+ + + {/* Global Animation Context Provider */} + + + {renderPage()} + + + + {/* Login Modal */} + setShowLoginModal(false)} + onLoginSuccess={handleLoginSuccess} + /> + + {/* Sticky Widget - Dynamic based on page */} +

+ + {!showQRCard && ( + { + if (currentPage === 'attractions') { + setCurrentPage('checkout'); + } else { + setShowQRCard(true); + } + }} + className={`relative shadow-2xl flex items-center justify-center rounded-2xl transition-all duration-300 overflow-hidden group ${ + currentPage === 'attractions' + ? 'w-[244px] h-36' + : 'w-36 h-36 bg-black text-white' + }`} + aria-label={currentPage === 'attractions' ? 'Get CityCard' : 'Show QR Code'} + > + {currentPage === 'attractions' ? ( +

+ {/* Header Image */} +

+ + + {/* GET NOW Text */} +

GET NOW

+ + {/* Dashed Line Separator */} +

+ +

+ + {/* Card Title in Orange */} +

+ {stickyCardType === 'unlimited' ? ( + <>Melbourne Unlimited Card + ) : ( + <>Get Selective Card + )} +

+ + {/* Orange Border */} + + ) : ( +

+ {/* QR Icon */} + + + {/* Text */} +

+ Scan QR +

+ Download App +

+ )} + + {/* Subtle Hover Effect */} +

+ + )} + + + + {showQRCard && currentPage !== 'attractions' && ( + + {/* Close Button */} + + + {/* QR Code - Much Larger */} +

+ {/* QR Code Pattern */} +

+ {qrPattern.map((filled, index) => ( + + ))} +

+ + {/* Center Logo - Much Larger */} +

+ + {/* Text Content - Larger */} +

Scan QR for app

+ Scan to get the Melbourne CityCards mobile app +

+ + {/* Static Border */} +

+ + )} + +

+ + {/* Preload animation optimization */} + { + // Remove from DOM after animation + const element = document.querySelector('[data-preload]'); + element?.remove(); + }} + data-preload + /> +

+ ); +} + +// Export animation variants for use in components +export { + heroVariants, + sectionVariants, + cardVariants, + staggerContainer, + fastStaggerContainer, + headingVariants, + textVariants, + ctaVariants, + iconVariants, + buttonHoverVariants, + cardHoverVariants, + easeOutQuart, + easeOutExpo, + easeOutCubic +}; + +export default App; \ No newline at end of file diff --git a/src/Attributions.md b/src/Attributions.md new file mode 100644 index 0000000..9b7cd4e --- /dev/null +++ b/src/Attributions.md @@ -0,0 +1,3 @@ +This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md). + +This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license). \ No newline at end of file diff --git a/src/assets/01db7df74b38a6ea709f973ff1a3ce03c9a5a75d.png b/src/assets/01db7df74b38a6ea709f973ff1a3ce03c9a5a75d.png new file mode 100644 index 0000000..8741a60 Binary files /dev/null and b/src/assets/01db7df74b38a6ea709f973ff1a3ce03c9a5a75d.png differ diff --git a/src/assets/0920e544195a4f6cffeb43277fdbb28bbf0e88b6.png b/src/assets/0920e544195a4f6cffeb43277fdbb28bbf0e88b6.png new file mode 100644 index 0000000..0612bf7 Binary files /dev/null and b/src/assets/0920e544195a4f6cffeb43277fdbb28bbf0e88b6.png differ diff --git a/src/assets/129015504c88093e4b54dc6e8c91b3997d9ccc5b.png b/src/assets/129015504c88093e4b54dc6e8c91b3997d9ccc5b.png new file mode 100644 index 0000000..bde60c7 Binary files /dev/null and b/src/assets/129015504c88093e4b54dc6e8c91b3997d9ccc5b.png differ diff --git a/src/assets/1512fbc49cf628796adeccca6752a29d1e61ecf4.png b/src/assets/1512fbc49cf628796adeccca6752a29d1e61ecf4.png new file mode 100644 index 0000000..2f3b2b2 Binary files /dev/null and b/src/assets/1512fbc49cf628796adeccca6752a29d1e61ecf4.png differ diff --git a/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png b/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png new file mode 100644 index 0000000..65787f4 Binary files /dev/null and b/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png differ diff --git a/src/assets/1d756a3ad6ee9098afb373e07e18ddd36571954c.png b/src/assets/1d756a3ad6ee9098afb373e07e18ddd36571954c.png new file mode 100644 index 0000000..d57e152 Binary files /dev/null and b/src/assets/1d756a3ad6ee9098afb373e07e18ddd36571954c.png differ diff --git a/src/assets/26f0daececd90e6473f4b370af7b26b7fb2a67ad.png b/src/assets/26f0daececd90e6473f4b370af7b26b7fb2a67ad.png new file mode 100644 index 0000000..f7825cf Binary files /dev/null and b/src/assets/26f0daececd90e6473f4b370af7b26b7fb2a67ad.png differ diff --git a/src/assets/2a32b13e0ed94d79c4867062010cb1a848d72dc1.png b/src/assets/2a32b13e0ed94d79c4867062010cb1a848d72dc1.png new file mode 100644 index 0000000..9fb6c05 Binary files /dev/null and b/src/assets/2a32b13e0ed94d79c4867062010cb1a848d72dc1.png differ diff --git a/src/assets/3c5d5a12a7b44ab1b1ac2db7faa54270de100d86.png b/src/assets/3c5d5a12a7b44ab1b1ac2db7faa54270de100d86.png new file mode 100644 index 0000000..6518c9b Binary files /dev/null and b/src/assets/3c5d5a12a7b44ab1b1ac2db7faa54270de100d86.png differ diff --git a/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png b/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png new file mode 100644 index 0000000..8271161 Binary files /dev/null and b/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png differ diff --git a/src/assets/4af0d5b295cf8650b4caa23233d3dcf539032a73.png b/src/assets/4af0d5b295cf8650b4caa23233d3dcf539032a73.png new file mode 100644 index 0000000..1bff437 Binary files /dev/null and b/src/assets/4af0d5b295cf8650b4caa23233d3dcf539032a73.png differ diff --git a/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png b/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png new file mode 100644 index 0000000..ee2ff09 Binary files /dev/null and b/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png differ diff --git a/src/assets/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png b/src/assets/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png new file mode 100644 index 0000000..8a96ea0 Binary files /dev/null and b/src/assets/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png differ diff --git a/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png b/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png new file mode 100644 index 0000000..5ccae11 Binary files /dev/null and b/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png differ diff --git a/src/assets/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png b/src/assets/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png new file mode 100644 index 0000000..bb4b987 Binary files /dev/null and b/src/assets/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png differ diff --git a/src/assets/84f4f124e1476f3bb1eee24bc4c0fa75f1fed2a8.png b/src/assets/84f4f124e1476f3bb1eee24bc4c0fa75f1fed2a8.png new file mode 100644 index 0000000..c191362 Binary files /dev/null and b/src/assets/84f4f124e1476f3bb1eee24bc4c0fa75f1fed2a8.png differ diff --git a/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png b/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png new file mode 100644 index 0000000..15d3b7f Binary files /dev/null and b/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png differ diff --git a/src/assets/a384e2e7712b48e54fadc7594244c40162ad4152.png b/src/assets/a384e2e7712b48e54fadc7594244c40162ad4152.png new file mode 100644 index 0000000..9172d25 Binary files /dev/null and b/src/assets/a384e2e7712b48e54fadc7594244c40162ad4152.png differ diff --git a/src/assets/a3956d2491d1e44ca71fc856b229d3e22523f828.png b/src/assets/a3956d2491d1e44ca71fc856b229d3e22523f828.png new file mode 100644 index 0000000..e7f9f10 Binary files /dev/null and b/src/assets/a3956d2491d1e44ca71fc856b229d3e22523f828.png differ diff --git a/src/assets/a812c79b0d125e4946b33446eae0353f518627e2.png b/src/assets/a812c79b0d125e4946b33446eae0353f518627e2.png new file mode 100644 index 0000000..ac576dd Binary files /dev/null and b/src/assets/a812c79b0d125e4946b33446eae0353f518627e2.png differ diff --git a/src/assets/ad526a204d3f66901399ea0452aaf33e105b0f32.png b/src/assets/ad526a204d3f66901399ea0452aaf33e105b0f32.png new file mode 100644 index 0000000..8e3af1f Binary files /dev/null and b/src/assets/ad526a204d3f66901399ea0452aaf33e105b0f32.png differ diff --git a/src/assets/bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6.png b/src/assets/bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6.png new file mode 100644 index 0000000..838ae90 Binary files /dev/null and b/src/assets/bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6.png differ diff --git a/src/assets/cc387e616b2e6552715d051e5c9a41e1a1637857.png b/src/assets/cc387e616b2e6552715d051e5c9a41e1a1637857.png new file mode 100644 index 0000000..f14543e Binary files /dev/null and b/src/assets/cc387e616b2e6552715d051e5c9a41e1a1637857.png differ diff --git a/src/assets/cit-logo.png b/src/assets/cit-logo.png new file mode 100644 index 0000000..0b36969 Binary files /dev/null and b/src/assets/cit-logo.png differ diff --git a/src/assets/d37e3e3f9d3f32fcf86dddd187aa6fd48832406a.png b/src/assets/d37e3e3f9d3f32fcf86dddd187aa6fd48832406a.png new file mode 100644 index 0000000..c935f7e Binary files /dev/null and b/src/assets/d37e3e3f9d3f32fcf86dddd187aa6fd48832406a.png differ diff --git a/src/assets/dda914a03c57961a1affac724d29681004341456.png b/src/assets/dda914a03c57961a1affac724d29681004341456.png new file mode 100644 index 0000000..a474821 Binary files /dev/null and b/src/assets/dda914a03c57961a1affac724d29681004341456.png differ diff --git a/src/assets/e8091276ed2c976b5c975f21687b0d1702bd9c90.png b/src/assets/e8091276ed2c976b5c975f21687b0d1702bd9c90.png new file mode 100644 index 0000000..975dd14 Binary files /dev/null and b/src/assets/e8091276ed2c976b5c975f21687b0d1702bd9c90.png differ diff --git a/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png b/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png new file mode 100644 index 0000000..b741036 Binary files /dev/null and b/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png differ diff --git a/src/assets/eaf15191e9a315d2d4b384ffcb22910687c3d328.png b/src/assets/eaf15191e9a315d2d4b384ffcb22910687c3d328.png new file mode 100644 index 0000000..c7bd31f Binary files /dev/null and b/src/assets/eaf15191e9a315d2d4b384ffcb22910687c3d328.png differ diff --git a/src/assets/eb1420e4d74097842eb197fc60970d29fa0afd1f.png b/src/assets/eb1420e4d74097842eb197fc60970d29fa0afd1f.png new file mode 100644 index 0000000..6d934b1 Binary files /dev/null and b/src/assets/eb1420e4d74097842eb197fc60970d29fa0afd1f.png differ diff --git a/src/assets/ef6f48b2b60d04fc8723d03a71f9dca2b6067704.png b/src/assets/ef6f48b2b60d04fc8723d03a71f9dca2b6067704.png new file mode 100644 index 0000000..4caa44c Binary files /dev/null and b/src/assets/ef6f48b2b60d04fc8723d03a71f9dca2b6067704.png differ diff --git a/src/assets/f32abfc6ad0bc41084ce6dd6d98890502970dda7.png b/src/assets/f32abfc6ad0bc41084ce6dd6d98890502970dda7.png new file mode 100644 index 0000000..642797b Binary files /dev/null and b/src/assets/f32abfc6ad0bc41084ce6dd6d98890502970dda7.png differ diff --git a/src/assets/f6c7124d0a9ca2463b53b6a370a48c4c0bbba57d.png b/src/assets/f6c7124d0a9ca2463b53b6a370a48c4c0bbba57d.png new file mode 100644 index 0000000..e9caa78 Binary files /dev/null and b/src/assets/f6c7124d0a9ca2463b53b6a370a48c4c0bbba57d.png differ diff --git a/src/assets/f9d75a20370022ef4bcdb5f3d08841527703cee6.png b/src/assets/f9d75a20370022ef4bcdb5f3d08841527703cee6.png new file mode 100644 index 0000000..d53016c Binary files /dev/null and b/src/assets/f9d75a20370022ef4bcdb5f3d08841527703cee6.png differ diff --git a/src/batch_replace_fonts.py b/src/batch_replace_fonts.py new file mode 100644 index 0000000..13e9d1a --- /dev/null +++ b/src/batch_replace_fonts.py @@ -0,0 +1,93 @@ +#!/usr/bin/env python3 +import os +import re + +# List of files to update +files_to_update = [ + "components/BlogsPage.tsx", + "components/HowItWorksPage.tsx", + "components/ProfilePage.tsx", + "components/EsimsPage.tsx", + "components/AttractionsPage.tsx", + "components/FAQPage.tsx", + "components/MelbourneBlogs.tsx", + "components/CityAttractionsPage.tsx", + "components/BlogDetailsPage.tsx", + "components/VarietyOfAdventures.tsx", + "components/MelbourneFAQ.tsx", + "components/MelbournePage.tsx", + "components/MelbourneCardComparison.tsx", + "components/BookAttractionSection.tsx", + "components/PassesPage.tsx", + "components/CheckoutPage.tsx", + "components/DownloadAppPage.tsx", + "components/WhyChooseUsSection.tsx", + "components/PrivacyPolicyPage.tsx", + "components/MobileAppPromotion.tsx", + "components/OffersPage.tsx", + "components/ContactUsPage.tsx", + "components/WhyChooseCityCards.tsx", + "components/HotelDiscountsPage.tsx", + "components/MagicItinerary.tsx", + "components/NewsletterSection.tsx", + "components/PostCardsPage.tsx", + "components/HeroSection.tsx", + "components/MelbourneTourOverview.tsx", + "components/ItineraryViewPage.tsx", + "components/CityCardsPage.tsx", + "components/MagicItineraryPage.tsx", + "components/CreateMagicItineraryPage.tsx", + "components/SecureCheckoutPage.tsx", + "components/AttractionDetailsPage.tsx", + "components/AboutUsPage.tsx" +] + +def replace_in_file(filepath): + """Replace font-merchant with font-poppins in a file.""" + try: + with open(filepath, 'r', encoding='utf-8') as f: + content = f.read() + + # Count replacements + count = content.count('font-merchant') + if count == 0: + print(f"✓ {filepath} - already updated") + return 0 + + # Replace all instances + new_content = content.replace('font-merchant', 'font-poppins') + + # Write back + with open(filepath, 'w', encoding='utf-8') as f: + f.write(new_content) + + print(f"✓ {filepath} - replaced {count} instances") + return count + + except FileNotFoundError: + print(f"✗ {filepath} - file not found") + return 0 + except Exception as e: + print(f"✗ {filepath} - error: {e}") + return 0 + +def main(): + print("Starting batch font replacement...") + print("=" * 50) + + total_replacements = 0 + files_updated = 0 + + for filepath in files_to_update: + count = replace_in_file(filepath) + if count > 0: + files_updated += 1 + total_replacements += count + + print("=" * 50) + print(f"\nCompleted!") + print(f"Files updated: {files_updated}") + print(f"Total replacements: {total_replacements}") + +if __name__ == "__main__": + main() diff --git a/src/components/AboutUsPage.tsx b/src/components/AboutUsPage.tsx new file mode 100644 index 0000000..558ffdb --- /dev/null +++ b/src/components/AboutUsPage.tsx @@ -0,0 +1,539 @@ +import React from 'react'; +import { motion } from 'motion/react'; +import { ArrowLeft, Heart, MapPin, Zap, Globe, Users, Camera, Coffee } from 'lucide-react'; +import { Button } from './ui/button'; +import { ImageWithFallback } from './figma/ImageWithFallback'; +import Navbar from './Navbar'; +import { Footer } from './Footer'; +import { MobileAppSection } from './MobileAppSection'; +import { EnhancedTestimonials } from './EnhancedTestimonials'; +import { ReviewsSection } from './ReviewsSection'; + +interface User { + email: string; + name: string; +} + +interface AboutUsPageProps { + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + currentPage: string; + user: User | null; +} + +export function AboutUsPage({ + onBackClick, + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + currentPage, + user +}: AboutUsPageProps) { + return ( +

+ {/* Navbar */} + {}} + onHomeClick={onHomeClick} + onMelbourneClick={onMelbourneClick} + onPassesClick={onPassesClick} + onCheckoutClick={onCheckoutClick} + onSignInClick={onSignInClick} + onAttractionsClick={onAttractionsClick} + onBlogsClick={onBlogsClick} + onHowItWorksClick={onHowItWorksClick} + onFAQClick={onFAQClick} + onPrivacyPolicyClick={onPrivacyPolicyClick} + onAboutUsClick={onAboutUsClick} + onProfileClick={onProfileClick} + onCityCardsClick={onCityCardsClick} + onMagicItineraryClick={onMagicItineraryClick} + onPostCardsClick={onPostCardsClick} + onOffersClick={onOffersClick} + currentPage={currentPage} + isUserSignedIn={!!user} + user={user} + /> + + {/* Header Section with Floating Elements */} +

+ {/* Floating Travel Icons */} + + + + + + + + + + + + +

+ {/* Back Button */} + + + Back + + + {/* Page Title with Fun Typography */} + + + Meet the{' '} + + Dream Team + {' '} + ✈️ + + + We're a bunch of travel-obsessed humans who got tired of vacation planning stress + and decided to fix it for everyone! 🌍✨ + + +

+ + {/* Our Story Section */} +

+ + {/* Story Introduction */} + +

+ + + Our Story + + +

+ From{' '} + Travel Stress{' '} + to{' '} + + Travel Bliss + +

+ +

+ Picture this: You're on your dream vacation, but instead of exploring that amazing museum, + you're standing in a 2-hour line holding a crumpled paper ticket. Sound familiar? 😅 +

+ +

+ That's exactly what happened to our founder during a trip to Melbourne. After missing + three attractions because of queues and ticket confusion, they had an idea: + "What if we could put all city attractions in one magical card?" +

+ + +

+ + + {/* Floating emoji reactions */} + + 💡 + + + + ✨ + + + + + {/* Our Mission Cards */} + + {[ + { + icon: , + title: "Skip the Lines", + description: "Because life's too short to waste on queues! Fast-track entry to all the coolest spots.", + color: "from-yellow-400 to-orange-500", + emoji: "⚡" + }, + { + icon: , + title: "Discover Hidden Gems", + description: "We'll show you secret local spots that even your guidebook doesn't know about!", + color: "from-green-400 to-blue-500", + emoji: "🗺️" + }, + { + icon: , + title: "Create Epic Memories", + description: "More time exploring, less time planning. That's what vacation should feel like!", + color: "from-pink-400 to-red-500", + emoji: "💖" + } + ].map((card, index) => ( + +

+ {/* Background gradient */} +

+ + {/* Floating emoji */} + + {card.emoji} + + +

+ {card.icon} +

+ +

+ {card.title} +

+ +

+ {card.description} +

+ + ))} + + + {/* Team Stats Section */} + +

+ We're a Small Team with Big Dreams 🚀 +

+ +

+ {[ + { number: "15+", label: "Cities Covered", emoji: "🌍" }, + { number: "500K+", label: "Happy Travelers", emoji: "😊" }, + { number: "1M+", label: "Lines Skipped", emoji: "⚡" }, + { number: "∞", label: "Adventures Created", emoji: "🗺️" } + ].map((stat, index) => ( + + + {stat.emoji} + +

+ {stat.number} +

+ {stat.label} +

+ + ))} +

+ +

+ + {/* Values Section */} +

+ + What Makes Us{' '} + Tick{' '} + ⚡ + + + These aren't just buzzwords for us - they're our daily mantras! + +

+ +

+ {[ + { + title: "Travel Should Be Fun", + description: "Not stressful, not complicated, just pure joy and discovery!", + icon: , + emoji: "🎉" + }, + { + title: "Everyone Deserves Adventure", + description: "From budget backpackers to luxury travelers - adventure is for all!", + icon: , + emoji: "🌟" + }, + { + title: "Local is Everything", + description: "The best experiences come from locals who know their city inside out.", + icon: , + emoji: "🏠" + }, + { + title: "Innovation Over Tradition", + description: "Why stick to 'how it's always been' when we can make it better?", + icon: , + emoji: "💡" + }, + { + title: "Sustainability Matters", + description: "Protecting the places we love to visit for future generations.", + icon: , + emoji: "🌱" + }, + { + title: "Memories Over Things", + description: "The best souvenirs are the stories you'll tell forever.", + icon: , + emoji: "📸" + } + ].map((value, index) => ( + + + {value.emoji} + + +

+ {value.icon} +

+ +

+ {value.title} +

+ +

+ {value.description} +

+ + ))} +

+ + {/* What Our Travelers Say Section */} + + + {/* Access All Your City Cards Section */} +

+ +

+ + {/* Customer Review Section */} +

+ +

+ + {/* Footer */} +

+ ); +} \ No newline at end of file diff --git a/src/components/ArticlesSection.tsx b/src/components/ArticlesSection.tsx new file mode 100644 index 0000000..f7cd16e --- /dev/null +++ b/src/components/ArticlesSection.tsx @@ -0,0 +1,79 @@ +import { ImageWithFallback } from './figma/ImageWithFallback'; +import { Button } from './ui/button'; + +interface ArticleCard { + id: string; + title: string; + image: string; +} + +const articles: ArticleCard[] = [ + { + id: '1', + title: 'Choosing a Travel Backpack: A Comprehensive Guide!', + image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&h=400&fit=crop&q=80' + }, + { + id: '2', + title: 'Bucket List Trip - 52 Places To Visit In Your Life...', + image: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=500&h=400&fit=crop&q=80' + }, + { + id: '3', + title: 'The FREE Way to Travel: No Money, No Problems!', + image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=500&h=400&fit=crop&q=80' + } +]; + +export function ArticlesSection() { + return ( +

+ {/* Header */} +

+ Our latest articles about travel +

+ Know the latest articles about travel +

+ + {/* Articles Grid */} +

+ {articles.map((article) => ( +

+ + {/* Gradient overlay */} +

+ + {/* Article title */} +

+ {article.title} +

+ ))} +

+ + {/* CTA Button */} +

+ +

+ ); +} \ No newline at end of file diff --git a/src/components/AttractionDetailsPage.tsx b/src/components/AttractionDetailsPage.tsx new file mode 100644 index 0000000..834e875 --- /dev/null +++ b/src/components/AttractionDetailsPage.tsx @@ -0,0 +1,474 @@ +import { useState } from 'react'; +import { motion } from 'motion/react'; +import { ArrowLeft, Clock, Users, Calendar, MapPin, Star, Check, X, ChevronLeft, ChevronRight } from 'lucide-react'; +import { Button } from './ui/button'; +import { Badge } from './ui/badge'; +import { Card, CardContent } from './ui/card'; +import { Separator } from './ui/separator'; +import { Calendar as CalendarComponent } from './ui/calendar'; +import Navbar from './Navbar'; +import { Footer } from './Footer'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +interface AttractionDetailsPageProps { + attractionId: string; + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick?: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + currentPage: string; + user?: { email: string; name: string } | null; +} + +export function AttractionDetailsPage({ + attractionId, + onBackClick, + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + currentPage, + user, +}: AttractionDetailsPageProps) { + const [date, setDate] = useState(new Date()); + + // Featured attraction for the main display + const featuredAttraction = { + id: 'phi-phi', + name: 'Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour', + badges: ['Bestseller', 'Free cancellation', 'Reservation Required'], + images: { + main: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + gallery: [ + 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' + ] + }, + overview: { + duration: '3 days', + groupSize: '10 people', + ages: '18-99 yrs', + languages: 'English, Japanese' + }, + description: 'The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.', + highlights: [ + 'Experience the thrill of a speedboat to the stunning Phi Phi Islands', + 'Be amazed by the variety of marine life in the archepelago', + 'Enjoy relaxing in paradise with white sand beaches and azure turquoise water', + 'Feel the comfort of a tour limited to 35 passengers', + 'Catch a glimpse of the wild monkeys around Monkey Beach' + ], + included: [ + 'Beverages, drinking water, morning tea and buffet lunch', + 'Local taxes', + 'Hotel pickup and drop-off by air-conditioned minivan', + 'Insurance Transfer to a private pier', + 'Soft drinks', + 'Tour Guide' + ], + notIncluded: [ + 'Towel', + 'Tips', + 'Alcoholic Beverages' + ], + bookingOptions: [ + 'By Calling on 022 2645675', + 'Email your details at islands.booking@mail.com', + 'Via CityCards Portal' + ] + }; + + return ( +

+ { + if (city === 'Melbourne') { + onMelbourneClick(); + } + }} + onSignInClick={onSignInClick} + onSignOutClick={onSignOutClick} + onPassesClick={onPassesClick} + onCheckoutClick={onCheckoutClick} + onHomeClick={onHomeClick} + onAttractionsClick={onAttractionsClick} + onBlogsClick={onBlogsClick} + onHowItWorksClick={onHowItWorksClick} + onFAQClick={onFAQClick} + onPrivacyPolicyClick={onPrivacyPolicyClick} + onAboutUsClick={onAboutUsClick} + onProfileClick={onProfileClick} + onCityCardsClick={onCityCardsClick} + onMagicItineraryClick={onMagicItineraryClick} + onPostCardsClick={onPostCardsClick} + onOffersClick={onOffersClick} + currentPage="attractions" + isUserSignedIn={!!user} + user={user} + /> + +

+ {/* Back Button */} + + + + + {/* Title and Badges Section */} +

+ {featuredAttraction.badges.map((badge, index) => ( + + {badge} + + ))} +

+ +

+ + Phi Phi Islands Adventure + {' '} + + Day Trip with Seaview Lunch by V. Marine Tour + +

+ + {/* Image Gallery Section */} +

+ {/* Main large image */} +

+ +

+ + {/* Gallery images */} + {featuredAttraction.images.gallery.slice(0, 4).map((image, index) => ( +

+ +

+ ))} +

+ + {/* Main Content Grid */} +

+ {/* Left Content - Tour Details */} +

+ {/* Overview Cards */} +

+ {Object.entries(featuredAttraction.overview).map(([key, value]) => ( + +

+ {key === 'duration' && } + {key === 'groupSize' && } + {key === 'ages' && } + {key === 'languages' && } +

+ {key === 'groupSize' ? 'Group Size' : key} +

{value}

+ + ))} +

+ + {/* Tour Overview */} +

+ Tour Overview +

+ {featuredAttraction.description} +

+ + {/* Tour Highlights */} +

+ Tour Highlights +

+
+
+
+ {highlight} +

+ + {/* What's Included/Not Included */} +

+ What's included +

+ {/* Included */} +

+ + Included +

+ {featuredAttraction.included.map((item, index) => ( +

+ +

+ {item} +

+ ))} +

+ + {/* Not Included */} +

+ + Not Included +

+ {featuredAttraction.notIncluded.map((item, index) => ( +

+ +

+ {item} +

+ ))} +

+ + {/* Location on map placeholder */} +

+ Location on map +

+ +

Interactive Map

Phi Phi Islands, Thailand

+ + {/* Right Sidebar - Calendar and Booking */} +

+ {/* Calendar Widget with Custom Design */} + +

Select Date

Choose your preferred visit date

+ + {/* Custom Calendar Design */} +

+ {/* Calendar Header */} +

+ + September 2025 + +

+ + {/* Days of week */} +

+ + {/* Calendar Grid */} +

+ {/* Previous month */} + + + {/* Current month */} + {Array.from({ length: 30 }, (_, i) => { + const day = i + 1; + const isSelected = day === 27; + const isToday = day === 15; + return ( + + ); + })} + + {/* Next month */} + {Array.from({ length: 4 }, (_, i) => ( + + ))} +

+ + {/* Selected Date Display */} +

+ +

Selected Date

September 27, 2025

+ + + {/* Pricing Card */} + +

+ Adult Ticket + $89 +

+ Service Fee + $5 +

+ Total + $94 +

+ + + {/* Confirm Booking Button */} + + + {/* Trust Indicators */} +

+ + Instant Confirmation +

+ + Free Cancellation +

+ +

+ ); +} \ No newline at end of file diff --git a/src/components/AttractionHassleFreeSection.tsx b/src/components/AttractionHassleFreeSection.tsx new file mode 100644 index 0000000..fc26d0d --- /dev/null +++ b/src/components/AttractionHassleFreeSection.tsx @@ -0,0 +1,225 @@ +import { motion } from 'motion/react'; +import earthImage from '../assets/f32abfc6ad0bc41084ce6dd6d98890502970dda7.png'; + +export function AttractionHassleFreeSection() { + return ( +

+ {/* Subtle Background Elements */} +

+ +

+ + {/* Left Side - Earth Ellipse with Cloud Animation */} + + {/* Earth Ellipse Container */} +

+ {/* Earth PNG Image */} + + Earth

+ + + {/* Floating Cloud Animations */} + +

+ + + +

+ + + {/* Orbital Ring - Centered around the Earth */} + + {/* Small orbiting elements */} + + + +

+ + + {/* Right Side - Content with Hierarchy - Full Width */} + +

+ {/* Main Heading */} + + Make the most of every{' '} + + attraction + + —hassle-free. + + + {/* Content Sections */} +

+ {/* Section 1 */} + +

+ Explore a diverse array of travel passes +

+ Explore a diverse array of travel passes, each designed to enhance your + adventure. From unlimited access to top attractions to exclusive discounts + on local experiences, our selection ensures you find the ideal pass for + your journey. +

+ + + {/* Section 2 */} + +

+ Discover every attraction effortlessly +

+ + + {/* Section 3 */} + +

+ Discover every attraction effortlessly +

+ +

+ + +

+ ); +} \ No newline at end of file diff --git a/src/components/AttractionsPage.tsx b/src/components/AttractionsPage.tsx new file mode 100644 index 0000000..1e7eee8 --- /dev/null +++ b/src/components/AttractionsPage.tsx @@ -0,0 +1,604 @@ +import { useState } from 'react'; +import { motion } from 'motion/react'; +import { Search, Star, Clock, ChevronRight } from 'lucide-react'; +import { Button } from './ui/button'; +import { Input } from './ui/input'; +import { Card, CardContent } from './ui/card'; +import { Badge } from './ui/badge'; +import { Checkbox } from './ui/checkbox'; +import Navbar from './Navbar'; +import { CitySubmenu } from './CitySubmenu'; +import { Footer } from './Footer'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +interface User { + email: string; + name: string; +} + +interface Attraction { + id: string; + name: string; + description: string; + image: string; + location: string; + duration: string; + rating: number; + price: number; + category: string; + hasReservation: boolean; + reviewCount: number; + passType: string; +} + +const attractions: Attraction[] = [ + { + id: '1', + name: 'Centipede Tour - Guided Arizona Desert Tour by ATV', + description: 'Experience the thrill of off-road adventure through the stunning Arizona desert landscape', + image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Paris, France', + duration: '4 days', + rating: 4.8, + price: 189.25, + category: 'adventure', + hasReservation: true, + reviewCount: 243, + passType: 'unlimited' + }, + { + id: '2', + name: 'Molokini and Turtle Town Snorkeling Adventure Aboard', + description: 'Snorkel in crystal-clear waters and swim alongside sea turtles in this unforgettable marine adventure', + image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'New York, USA', + duration: '4 days', + rating: 4.8, + price: 225, + category: 'adventure', + hasReservation: false, + reviewCount: 167, + passType: 'selective' + }, + { + id: '3', + name: 'Westminster Walking Tour & Westminster Abbey Entry', + description: 'Explore the heart of London with guided tours of historic Westminster and the famous Abbey', + image: 'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZXN0bWluc3RlciUyMGFiYmV5JTIwbG9uZG9ufGVufDF8fHx8MTc1ODEwNDkwNnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'London, UK', + duration: '4 days', + rating: 4.8, + price: 343, + category: 'culture', + hasReservation: true, + reviewCount: 343, + passType: 'unlimited' + }, + { + id: '4', + name: 'All Inclusive Ultimate Circle Island Day Tour with Lunch', + description: 'Comprehensive island tour including all major attractions, lunch, and transportation', + image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'New York, USA', + duration: '4 days', + rating: 4.8, + price: 225, + category: 'adventure', + hasReservation: false, + reviewCount: 243, + passType: 'unlimited' + }, + { + id: '5', + name: 'Space Center Houston Admission Ticket', + description: 'Explore NASA\'s Johnson Space Center and discover the wonders of space exploration', + image: 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGFjZSUyMGNlbnRlciUyMG5hc2ElMjBob3VzdG9ufGVufDF8fHx8MTc1ODEwNDkxM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Paris, France', + duration: '4 days', + rating: 4.8, + price: 225, + category: 'family', + hasReservation: true, + reviewCount: 243, + passType: 'selective' + }, + { + id: '6', + name: 'Melbourne Skydeck Observatory', + description: 'Experience breathtaking 360-degree views from the Southern Hemisphere\'s highest viewing platform', + image: 'https://images.unsplash.com/photo-1677200922658-d0df5b2ac91e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhdHRyYWN0aW9ucyUyMGZhbW91cyUyMGxhbmRtYXJrc3xlbnwxfHx8fDE3NTc0MDEwODV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Melbourne CBD', + duration: '2 hours', + rating: 4.5, + price: 25, + category: 'adventure', + hasReservation: true, + reviewCount: 892, + passType: 'selective' + }, + { + id: '7', + name: 'Royal Botanic Gardens Melbourne', + description: 'Explore 38 hectares of stunning gardens featuring over 8,500 species of plants', + image: 'https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'South Yarra', + duration: '3 hours', + rating: 4.7, + price: 0, + category: 'nature', + hasReservation: false, + reviewCount: 1245, + passType: 'selective' + }, + { + id: '8', + name: 'Federation Square Cultural Precinct', + description: 'Melbourne\'s cultural precinct featuring galleries, museums, and unique architecture', + image: 'https://images.unsplash.com/photo-1580688027085-8220709e3d84?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZWRlcmF0aW9uJTIwc3F1YXJlJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Melbourne CBD', + duration: '3 hours', + rating: 4.3, + price: 0, + category: 'culture', + hasReservation: true, + reviewCount: 672, + passType: 'unlimited' + }, + { + id: '9', + name: 'St Kilda Pier & Little Penguins', + description: 'Watch little penguins return home at sunset while enjoying the scenic pier', + image: 'https://images.unsplash.com/photo-1597889790884-2bb63cfbd4f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdCUyMGtpbGRhJTIwcGllciUyMG1lbGJvdXJuZXxlbnwxfHx8fDE3NTc0MDEwOTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'St Kilda', + duration: '2 hours', + rating: 4.4, + price: 0, + category: 'nature', + hasReservation: false, + reviewCount: 543, + passType: 'unlimited' + }, + { + id: '10', + name: 'Queen Victoria Market Experience', + description: 'Historic market offering fresh produce, gourmet foods, and unique souvenirs', + image: 'https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0JTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5OHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Melbourne CBD', + duration: '2 hours', + rating: 4.6, + price: 0, + category: 'culture', + hasReservation: true, + reviewCount: 987, + passType: 'selective' + }, + { + id: '11', + name: 'Melbourne Zoo Adventure', + description: 'Meet over 320 animal species from around the world in naturalistic habitats', + image: 'https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Parkville', + duration: '4 hours', + rating: 4.5, + price: 40, + category: 'family', + hasReservation: false, + reviewCount: 1156, + passType: 'selective' + }, + { + id: '12', + name: 'Great Ocean Road Day Tour', + description: 'Scenic coastal drive featuring the famous Twelve Apostles and stunning ocean views', + image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', + location: 'Great Ocean Road', + duration: '12 hours', + rating: 4.9, + price: 85, + category: 'adventure', + hasReservation: true, + reviewCount: 678, + passType: 'unlimited' + } +]; + +const filterCategories = [ + { value: 'with-reservation', label: 'With Reservation', count: 3 }, + { value: 'without-reservation', label: 'Without Reservation', count: 3 }, + { value: 'beach', label: 'Beach', count: 3 }, + { value: 'adventure', label: 'Adventure', count: 3 }, + { value: 'mountains', label: 'Mountains', count: 3 }, + { value: 'family', label: 'Family Friendly', count: 3 } +]; + +const passTypeCategories = [ + { value: 'selective', label: 'Selective Pass', count: 6 }, + { value: 'unlimited', label: 'Unlimited Pass', count: 6 } +]; + +interface AttractionsPageProps { + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + onAttractionClick?: (attractionId: string) => void; + currentPage: string; + user: User | null; +} + +export function AttractionsPage({ + onBackClick, + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + onAttractionClick, + currentPage, + user +}: AttractionsPageProps) { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedCategories, setSelectedCategories] = useState([]); + const [selectedPassTypes, setSelectedPassTypes] = useState([]); + + const filteredAttractions = attractions.filter(attraction => { + const matchesSearch = attraction.name.toLowerCase().includes(searchQuery.toLowerCase()) || + attraction.description.toLowerCase().includes(searchQuery.toLowerCase()); + + const matchesCategory = selectedCategories.length === 0 || + selectedCategories.some(cat => { + if (cat === 'with-reservation') return attraction.hasReservation; + if (cat === 'without-reservation') return !attraction.hasReservation; + return attraction.category === cat; + }); + + const matchesPassType = selectedPassTypes.length === 0 || + selectedPassTypes.includes(attraction.passType); + + return matchesSearch && matchesCategory && matchesPassType; + }); + + const toggleCategory = (category: string) => { + setSelectedCategories(prev => + prev.includes(category) + ? prev.filter(c => c !== category) + : [...prev, category] + ); + }; + + const togglePassType = (passType: string) => { + setSelectedPassTypes(prev => + prev.includes(passType) + ? prev.filter(p => p !== passType) + : [...prev, passType] + ); + }; + + const showingFrom = 1; + const showingTo = Math.min(12, filteredAttractions.length); + const totalItems = filteredAttractions.length; + + return ( +

+ {/* Breadcrumb */} + + + {/* Page Header */} +

+ Discover{' '} + Melbourne's{' '} + Best{' '} + Attractions +

+ Skip the lines and explore Melbourne's most iconic destinations with your CityCard pass +

+ + {/* City Card Promotional Banner */} +

+ +

+ Find Your Perfect Adventure +

+ + {/* Search Bar and Button Container */} +

+ {/* Search Bar */} +

+ setSearchQuery(e.target.value)} + className="pl-4 pr-12 h-[44px] bg-white/95 backdrop-blur-sm border-0 rounded-lg text-gray-800 placeholder:text-gray-500 font-poppins shadow-lg" + /> + +

+ + {/* Call-to-Action Button */} + +

+ + {/* Decorative background elements */} +

+ +

+ {/* Left Sidebar */} +

+ +

+ {/* Search by header */} +

Search by

+ + {/* Filter categories */} +

+ {filterCategories.map(category => ( +

+ toggleCategory(category.value)} + className="border-[#bebebe]" + /> + + {category.label} ({category.count}) + +

+ ))} +

+ + {/* Divider */} +

+ + {/* Pass Type header */} +

Pass Type

+ + {/* Pass Type filters */} +

+ {passTypeCategories.map(passType => ( +

+ togglePassType(passType.value)} + className="border-[#bebebe]" + /> + + {passType.label} ({passType.count}) + +

+ ))} +

+ +

+ + {/* Main Content */} +

+ {/* Header */} +

Attractions in Melbourne

+ + {/* Results count */} +

+ Showing {showingFrom}-{showingTo} of {totalItems} Item(s) +

+ + {/* Attractions Grid */} +

+ {filteredAttractions.slice(0, 12).map((attraction) => ( + + onAttractionClick?.(attraction.id)} + > +

+ + {/* Pass Type Badge */} +

+ {attraction.price === 0 ? ( + + FREE + + ) : attraction.passType === 'unlimited' ? ( + + Unlimited Pass Exclusive + + ) : ( + + Selective Pass + + )} +

+ +

+ {attraction.location} +

+ {attraction.name} +

+ {[...Array(5)].map((_, i) => ( + + ))} + + {attraction.rating} ({attraction.reviewCount}) + +

+ + {/* Pricing and Pass Info */} +

+ + {attraction.duration} +

Normal visit price

+ ${attraction.price} +

+ + {/* Included with Pass CTA */} +

+ ✓ Included with {attraction.passType === 'unlimited' ? 'Unlimited' : 'Selective'} Pass +

+ Save ${attraction.price} +

+ +

+ + + + ))} +

+ +

+ ); +} \ No newline at end of file diff --git a/src/components/BlogDetailsPage.tsx b/src/components/BlogDetailsPage.tsx new file mode 100644 index 0000000..675c7de --- /dev/null +++ b/src/components/BlogDetailsPage.tsx @@ -0,0 +1,510 @@ +import { useState } from 'react'; +import { motion } from 'motion/react'; +import { ArrowLeft, Calendar, User, Clock, Share2, BookmarkPlus, ThumbsUp, MessageSquare, Tag, MapPin } from 'lucide-react'; +import { Button } from './ui/button'; +import { Badge } from './ui/badge'; +import { Card, CardContent } from './ui/card'; +import { Separator } from './ui/separator'; +import Navbar from './Navbar'; +import { Footer } from './Footer'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +interface User { + email: string; + name: string; +} + +interface BlogDetailsPageProps { + blogId: string; + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + currentPage: string; + user: User | null; +} + +// Mock blog data - in a real app this would come from an API +const getBlogById = (id: string) => { + const blogs = { + '1': { + id: '1', + title: 'Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour', + content: ` +

The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach."

+ +

Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.

+ +

Tour Overview

+ +

What's included

+ +

Beverages, drinking water, morning tea and buffet lunch
Local taxes
Hotel pickup and drop-off by air-conditioned minivan
Insurance Transfer to a private pier
Soft drinks
Tour Guide

+ +

Location on map

+ +

Explore the stunning locations of the Phi Phi Islands, including Maya Bay, Bamboo Island, and Monkey Beach. Each location offers unique experiences from snorkeling to beach relaxation.

+ `, + author: 'Sarah Johnson', + date: 'Dec 15, 2024', + readTime: '5 min read', + category: 'Travel Guide', + image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080', + gallery: [ + 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080', + 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080', + 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080', + 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080' + ], + tags: ['Adventure', 'Islands', 'Snorkeling', 'Marine Life'], + likes: 45, + comments: 12 + }, + '2': { + id: '2', + title: '5 best cafe spots in Melbourne', + content: ` +

Melbourne's coffee culture is legendary, and for good reason. The city is home to some of the world's most innovative cafes, where baristas are treated as artists and coffee is considered a craft.

+ +

From hidden laneway gems to bustling neighborhood favorites, here are our top picks for the best cafe experiences in Melbourne.

+ +

The Coffee Scene

+ +

Melbourne's coffee culture began in the 1950s with Italian and Greek immigrants who brought their espresso traditions to Australia. Today, the city boasts more cafes per capita than any other city in the world.

+ +

Our Top Picks

+ +

Degraves Espresso Bar - A laneway institution
Pellegrini's Espresso Bar - Old-school Italian charm
Brother Baba Budan - Single origin specialists
Patricia Coffee Brewers - Modern coffee artistry
Axil Coffee Roasters - Local roasting expertise

+ +

Coffee Culture Tips

+ +

When visiting Melbourne's cafes, remember that coffee is taken seriously here. Don't be surprised if your barista asks detailed questions about your preferences - they're helping you find your perfect cup.

+ `, + author: 'James Miller', + date: 'Dec 12, 2024', + readTime: '4 min read', + category: 'Food & Drink', + image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb2ZmZWUlMjBzaG9wJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NjEyNDA5M3ww&ixlib=rb-4.1.0&q=80&w=1080', + gallery: [ + 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb2ZmZWUlMjBzaG9wJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NjEyNDA5M3ww&ixlib=rb-4.1.0&q=80&w=1080', + 'https://images.unsplash.com/photo-1679731980101-503d93bbec27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBsYW5ld2F5c3xlbnwxfHx8fDE3NTYxMjQwNzN8MA&ixlib=rb-4.1.0&q=80&w=1080' + ], + tags: ['Coffee', 'Melbourne', 'Food', 'Culture'], + likes: 32, + comments: 8 + } + }; + + return blogs[id as keyof typeof blogs] || blogs['1']; +}; + +export function BlogDetailsPage({ + blogId, + onBackClick, + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + currentPage, + user +}: BlogDetailsPageProps) { + const [isLiked, setIsLiked] = useState(false); + const [isBookmarked, setIsBookmarked] = useState(false); + + const blog = getBlogById(blogId); + + return ( +

+ {/* Back Button */} + + + + + {/* Blog Header */} + +

+ + {blog.category} + + {blog.tags.map((tag, index) => ( + + {tag} + + ))} +

+ +

+ Discover the{' '} + + Ultimate + {' '} + {blog.title.split(' ').slice(-3).join(' ')} +

+ +

+ + {blog.author} +

+ + {blog.date} +

+ + {blog.readTime} +

+ +

+ + + + + + + +

+ + + {/* Image Gallery - Masonry Layout */} + + {/* Large featured image - Left side spanning 2 rows */} +

+ +

+ + {/* Top right wide image */} +

+ +

+ + {/* Bottom right - First small image */} +

+ +

+ + {/* Bottom right - Second small image */} +

+ +

+ + + {/* Main Content */} + + {/* Tour Overview Section */} +

+ Tour{' '} + Overview +

+ + {/* Tour Details Cards */} +

+ +

Duration

8 Hours

+ +

Group Size

12 People

+ +

Age Range

5-99 yrs

+ +

Languages

English

+ +

+ The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included. +

+ + {/* Tour Highlights Section */} +

+ Tour{' '} + + Highlights + +

+
+ Visit the famous Maya Bay, featured in the movie "The Beach" +
+
+ Snorkel in the crystal-clear waters of Bamboo Island +
+
+ Swim in the stunning Pileh Lagoon surrounded by limestone cliffs +
+
+ Observe playful monkeys at Monkey Beach +
+
+ Enjoy a delicious buffet lunch with sea view +

+ + {/* What's Included Section */} +

+ What's Included +

+ +

+
+ ✓ +
+ Beverages, drinking water, morning tea and buffet lunch +
+
+ ✓ +
+ Local taxes +
+
+ ✓ +
+ Hotel pickup and drop-off by air-conditioned minivan +

+ +

+
+ ✓ +
+ Insurance Transfer to a private pier +
+
+ ✓ +
+ Soft drinks +
+
+ ✓ +
+ Tour Guide +

+ + {/* Location on Map Section */} +

+ Location on{' '} + Map +

+ +

+ ); +} \ No newline at end of file diff --git a/src/components/BlogsPage.tsx b/src/components/BlogsPage.tsx new file mode 100644 index 0000000..176ed38 --- /dev/null +++ b/src/components/BlogsPage.tsx @@ -0,0 +1,529 @@ +import { useState } from 'react'; +import { motion } from 'motion/react'; +import { Calendar, User, Clock, ArrowRight, Search, Tag, CreditCard, MapPin, Check, Smartphone, Star, Heart, Share2 } from 'lucide-react'; +import { Button } from './ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'; +import { Badge } from './ui/badge'; +import { Input } from './ui/input'; +import Navbar from './Navbar'; +import { CitySubmenu } from './CitySubmenu'; +import { MobileAppSection } from './MobileAppSection'; +import { WhyChooseCityCards } from './WhyChooseCityCards'; +import { EnhancedTestimonials } from './EnhancedTestimonials'; +import { ReviewsSection } from './ReviewsSection'; +import { Footer } from './Footer'; +import { ImageWithFallback } from './figma/ImageWithFallback'; +import imgFrame1597884939 from "figma:asset/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png"; + +// Blog Mobile App Section Component +function BlogMobileAppSection() { + return ( +

+ {/* Subtle Background Elements */} + + +

+ ); +} + +interface BlogsPageProps { + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick?: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + onBlogClick?: (blogId: string) => void; + currentPage: string; + user?: { email: string; name: string; } | null; +} + +// Mock blog data +const blogPosts = [ + { + id: '1', + title: 'Ultimate Melbourne Coffee Culture Guide', + excerpt: 'Discover the hidden laneway cafes and roastery gems that make Melbourne the coffee capital of Australia.', + author: 'Sarah Johnson', + date: 'Dec 15, 2024', + readTime: '5 min read', + category: 'Food & Drink', + featured: true, + image: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWV8ZW58MXx8fHwxNzU2MTI0MDYwfDA&ixlib=rb-4.1.0&q=80&w=1080' + }, + { + id: '2', + title: 'Hidden Street Art Treasures in Melbourne', + excerpt: 'Navigate through Melbourne\'s famous laneways and discover world-class street art that transforms the city into an open-air gallery.', + author: 'Michael Chen', + date: 'Dec 12, 2024', + readTime: '4 min read', + category: 'Entertainment', + image: 'https://images.unsplash.com/photo-1523631278395-d65a85c7c3b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJlZXQlMjBhcnQlMjBtZWxib3VybmV8ZW58MXx8fHwxNzU2MTI0MDY5fDA&ixlib=rb-4.1.0&q=80&w=1080' + }, + { + id: '3', + title: 'A Foodie\'s Guide to Queen Victoria Market', + excerpt: 'From fresh produce to international delicacies, explore the vibrant flavors and culinary experiences at Melbourne\'s iconic market.', + author: 'Emma Wilson', + date: 'Dec 10, 2024', + readTime: '6 min read', + category: 'Food & Drink', + image: 'https://images.unsplash.com/photo-1567306301408-9b74a2a3e9b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYXJrZXQlMjBmb29kfGVufDF8fHx8MTc1NjEyNDA3Mnww&ixlib=rb-4.1.0&q=80&w=1080' + }, + { + id: '4', + title: 'Exploring Melbourne\'s Rooftop Bars', + excerpt: 'Sip cocktails with stunning city views at Melbourne\'s best rooftop venues, from hidden speakeasies to glamorous sky-high lounges.', + author: 'James Parker', + date: 'Dec 8, 2024', + readTime: '7 min read', + category: 'Adventure', + image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvdXRiYWNrJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1NjEyNDEwMXww&ixlib=rb-4.1.0&q=80&w=1080' + }, + { + id: '5', + title: 'Secrets of the Great Ocean Road', + excerpt: 'Uncover hidden gems along one of the world\'s most scenic coastal drives, from secluded beaches to charming seaside towns.', + author: 'Lisa Rodriguez', + date: 'Dec 5, 2024', + readTime: '8 min read', + category: 'Road Trip', + image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZHxlbnwxfHx8fDE3NTYxMjQxMDV8MA&ixlib=rb-4.1.0&q=80&w=1080' + }, + { + id: '6', + title: 'Wonders of the Great Barrier Reef', + excerpt: 'Explore the underwater paradise of the Great Barrier Reef and discover the incredible marine life that calls this UNESCO World Heritage site home.', + author: 'David Thompson', + date: 'Dec 3, 2024', + readTime: '6 min read', + category: 'Nature', + image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMGJhcnJpZXIlMjByZWVmfGVufDF8fHx8MTc1NjEyNDEwOXww&ixlib=rb-4.1.0&q=80&w=1080' + } +]; + +const categories = ['All', 'Travel Guide', 'Food & Drink', 'Entertainment', 'Adventure', 'Road Trip', 'Nature']; + +const exploreMoreItems = [ + { + title: 'Melbourne City Guide', + description: 'Complete guide to exploring Melbourne', + category: 'Guide' + }, + { + title: 'Best Attractions', + description: 'Top-rated attractions in Melbourne', + category: 'Attractions' + }, + { + title: 'Food & Culture', + description: 'Culinary experiences and cultural insights', + category: 'Culture' + }, + { + title: 'Events Calendar', + description: 'Upcoming events and festivals', + category: 'Events' + }, + { + title: 'Travel Tips', + description: 'Essential tips for visiting Melbourne', + category: 'Tips' + }, + { + title: 'Photography Spots', + description: 'Instagram-worthy locations in the city', + category: 'Photography' + } +]; + + + +export function BlogsPage({ + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + onBlogClick, + currentPage, + user +}: BlogsPageProps) { + const [selectedCategory, setSelectedCategory] = useState('All'); + const [searchQuery, setSearchQuery] = useState(''); + + const filteredPosts = blogPosts.filter(post => { + const matchesCategory = selectedCategory === 'All' || post.category === selectedCategory; + const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) || + post.excerpt.toLowerCase().includes(searchQuery.toLowerCase()); + return matchesCategory && matchesSearch; + }); + + const featuredPost = blogPosts.find(post => post.featured); + const latestPosts = blogPosts.slice(0, 4); + + return ( +

+ {/* Navigation */} + { + if (city === 'Melbourne') { + onMelbourneClick(); + } + }} + onHomeClick={onHomeClick} + onSignInClick={onSignInClick} + onSignOutClick={onSignOutClick} + onPassesClick={onPassesClick} + onCheckoutClick={onCheckoutClick} + onAttractionsClick={onAttractionsClick} + onBlogsClick={onBlogsClick} + onHowItWorksClick={onHowItWorksClick} + onFAQClick={onFAQClick} + onPrivacyPolicyClick={onPrivacyPolicyClick} + onAboutUsClick={onAboutUsClick} + onProfileClick={onProfileClick} + onCityCardsClick={onCityCardsClick} + onMagicItineraryClick={onMagicItineraryClick} + onPostCardsClick={onPostCardsClick} + onOffersClick={onOffersClick} + onEsimsClick={onEsimsClick} + onHotelDiscountsClick={onHotelDiscountsClick} + currentPage={currentPage} + isUserSignedIn={!!user} + user={user} + /> + + {}} + onHomeClick={onHomeClick} + onMelbourneClick={onMelbourneClick} + onAttractionsClick={onAttractionsClick} + onPassesClick={onPassesClick} + onBlogsClick={onBlogsClick} + onHowItWorksClick={onHowItWorksClick} + /> + +

+ {/* Page Header */} + +

+ Explore more with the{' '} + + Blogs + +

+ Discover insider tips, hidden gems, and travel stories from Melbourne and beyond +

+ + + {/* Search and Filter Section */} + +

+ {/* Search Bar */} +

+ + setSearchQuery(e.target.value)} + className="font-poppins font-normal text-base pl-10 py-3 rounded-xl border-gray-200 focus:border-primary" + /> +

+ + {/* Category Filter */} +

+ {categories.map((category) => ( + + ))} +

+ + + {/* Main Content Grid */} +

+ {/* Left Side - Latest Blogs */} + +

+ Latest Blogs +

+ + {/* Featured Blog */} + {featuredPost && ( + onBlogClick?.(featuredPost.id)} + > +

+ + + Featured + +

+ + {featuredPost.category} + +

+ {featuredPost.title} +

+ {featuredPost.excerpt} +

+ + {featuredPost.author} +

+ + {featuredPost.date} +

+ +

+ + )} + + {/* Blog List */} +

+ {filteredPosts.filter(post => !post.featured).map((post, index) => ( + + onBlogClick?.(post.id)} + > +

+ +

+ + {post.category} + +

+ {post.title} +

+ {post.excerpt} +

+ + {post.author} +

+ + {post.date} +

+ + {post.readTime} +

+ +

+ + + ))} +

+ + + {/* Right Side - Explore More */} + +

+ Explore More +

+ {exploreMoreItems.map((item, index) => ( + +

+ {item.title} +

+ {item.description} +

+ +

+ + ))} +

+ + {/* Newsletter Signup */} + +

+ Stay Updated +

+ Get the latest travel tips and city guides delivered to your inbox. +

+ + +

+ +

+ + {/* Access Your CityCards Section */} +

+ +

+ + {/* Why Choose CityCards Section */} +

+ +

+ + {/* Enhanced Testimonials Section */} + + + {/* Blog Mobile App Section */} + + + {/* Reviews Section */} + +

+ +

+ ); +} + +export default BlogsPage; \ No newline at end of file diff --git a/src/components/BookAttractionSection.tsx b/src/components/BookAttractionSection.tsx new file mode 100644 index 0000000..9cdbbbe --- /dev/null +++ b/src/components/BookAttractionSection.tsx @@ -0,0 +1,410 @@ +import { useState } from 'react'; +import { ChevronLeft, ChevronRight, Clock, Users, Star, Zap, CheckCircle, MapPin, Volume2, Camera } from 'lucide-react'; +import { ImageWithFallback } from './figma/ImageWithFallback'; +import { motion } from 'motion/react'; + +const attractions = [ + { + id: 1, + name: "Sydney Opera House", + city: "Sydney", + country: "Australia", + image: "https://images.unsplash.com/photo-1657622884558-cc7525f93638?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBvcGVyYSUyMGhvdXNlJTIwaGFyYm9yJTIwYnJpZGdlfGVufDF8fHx8MTc1NjExNDMwMHww&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.8, + reviews: "12,500+", + category: "Landmarks", + originalPrice: "$89", + includedValue: "$89", + perks: [ + { icon: Zap, label: "Skip-the-line", color: "text-green-600" }, + { icon: Volume2, label: "Audio guide", color: "text-blue-600" }, + { icon: Camera, label: "Photo spots", color: "text-purple-600" } + ] + }, + { + id: 2, + name: "Great Ocean Road", + city: "Melbourne", + country: "Australia", + image: "https://images.unsplash.com/photo-1557544780-585e99807b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMHR3ZWx2ZSUyMGFwb3N0bGVzfGVufDF8fHx8MTc1NjExNDMwNHww&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.9, + reviews: "8,200+", + category: "Nature", + originalPrice: "$125", + includedValue: "$125", + perks: [ + { icon: Users, label: "Guided tour", color: "text-blue-600" }, + { icon: MapPin, label: "Transport", color: "text-green-600" }, + { icon: Camera, label: "Photo stops", color: "text-purple-600" } + ] + }, + { + id: 3, + name: "Lone Pine Koala Sanctuary", + city: "Brisbane", + country: "Australia", + image: "https://images.unsplash.com/photo-1625476038303-0d3022077d39?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25lJTIwcGluZSUyMGtvYWxhJTIwc2FuY3R1YXJ5JTIwYnJpc2JhbmV8ZW58MXx8fHwxNzU2MTE0MzA3fDA&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.7, + reviews: "15,800+", + category: "Wildlife", + originalPrice: "$65", + includedValue: "$65", + perks: [ + { icon: Zap, label: "Skip-the-line", color: "text-green-600" }, + { icon: Users, label: "Animal encounters", color: "text-orange-600" }, + { icon: Camera, label: "Photo opportunities", color: "text-purple-600" } + ] + }, + { + id: 4, + name: "Kings Park", + city: "Perth", + country: "Australia", + image: "https://images.unsplash.com/photo-1667315682754-852d9e855207?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxraW5ncyUyMHBhcmslMjBwZXJ0aCUyMGJvdGFuaWNhbCUyMGdhcmRlbnxlbnwxfHx8fDE3NTYxMTQzMTJ8MA&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.6, + reviews: "9,400+", + category: "Parks", + originalPrice: "Free", + includedValue: "$35", + perks: [ + { icon: Users, label: "Walking tours", color: "text-blue-600" }, + { icon: Volume2, label: "Audio guide", color: "text-blue-600" }, + { icon: MapPin, label: "Trail maps", color: "text-green-600" } + ] + }, + { + id: 5, + name: "Barossa Valley", + city: "Adelaide", + country: "Australia", + image: "https://images.unsplash.com/photo-1578274821879-08e7f9050d83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxiYXJvc3NhJTIwdmFsbGV5JTIwdmluZXlhcmQlMjB3aW5lcnl8ZW58MXx8fHwxNzU2MTE0MzE3fDA&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.8, + reviews: "6,700+", + category: "Wine Tours", + originalPrice: "$98", + includedValue: "$98", + perks: [ + { icon: Users, label: "Wine tastings", color: "text-purple-600" }, + { icon: MapPin, label: "Transport", color: "text-green-600" }, + { icon: Volume2, label: "Expert guide", color: "text-blue-600" } + ] + }, + { + id: 6, + name: "Uluru", + city: "Northern Territory", + country: "Australia", + image: "https://images.unsplash.com/photo-1535960146738-4113294a306c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx1bHVydSUyMGF5ZXJzJTIwcm9jayUyMGF1c3RyYWxpYSUyMGRlc2VydHxlbnwxfHx8fDE3NTYxMTQzMjB8MA&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.9, + reviews: "11,200+", + category: "Landmarks", + originalPrice: "$156", + includedValue: "$156", + perks: [ + { icon: Users, label: "Cultural tours", color: "text-orange-600" }, + { icon: Camera, label: "Sunrise viewing", color: "text-purple-600" }, + { icon: MapPin, label: "Transport", color: "text-green-600" } + ] + }, + { + id: 7, + name: "Blue Mountains", + city: "Sydney", + country: "Australia", + image: "https://images.unsplash.com/photo-1603101468073-50894cb31719?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxibHVlJTIwbW91bnRhaW5zJTIwc3lkbmV5JTIwdGhyZWUlMjBzaXN0ZXJzfGVufDF8fHx8MTc1NjExNDMyNXww&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.7, + reviews: "10,300+", + category: "Nature", + originalPrice: "$78", + includedValue: "$78", + perks: [ + { icon: MapPin, label: "Scenic railway", color: "text-green-600" }, + { icon: Users, label: "Guided walks", color: "text-blue-600" }, + { icon: Camera, label: "Lookout access", color: "text-purple-600" } + ] + }, + { + id: 8, + name: "Kangaroo Island", + city: "Adelaide", + country: "Australia", + image: "https://images.unsplash.com/photo-1719933564987-6c842ee2084e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxrYW5nYXJvbyUyMGlzbGFuZCUyMGF1c3RyYWxpYSUyMHdpbGRsaWZlfGVufDF8fHx8MTc1NjExNDMyOXww&ixlib=rb-4.1.0&q=80&w=1080", + rating: 4.8, + reviews: "7,900+", + category: "Wildlife", + originalPrice: "$145", + includedValue: "$145", + perks: [ + { icon: Users, label: "Wildlife tours", color: "text-orange-600" }, + { icon: MapPin, label: "Ferry transport", color: "text-green-600" }, + { icon: Volume2, label: "Nature guide", color: "text-blue-600" } + ] + } +]; + +const categories = ["All", "Landmarks", "Nature", "Wildlife", "Parks", "Wine Tours"]; + +export function BookAttractionSection() { + const [activeCategory, setActiveCategory] = useState("All"); + + const filteredAttractions = activeCategory === "All" + ? attractions + : attractions.filter(attraction => attraction.category === activeCategory); + + const AttractionCard = ({ attraction, index }: { attraction: typeof attractions[0], index: number }) => ( + + {/* Image Container */} +

+ +

+ + {/* Rating Badge */} +

+ ★ +

+ {attraction.rating} +

+ + {/* Value Badge - Shows on hover */} + + Included: {attraction.includedValue} + + + {/* Overlay Content */} +

+ {attraction.name} +

+ {attraction.city}, {attraction.country} +

+ {attraction.reviews} reviews +

+ +

+ → + Explore +

+ +

+ + {/* Hover Overlay - Included Value & Perks */} + +

+ {/* Included Value Header */} + +

+ + Included Value +

+ {attraction.includedValue} +

+ {attraction.originalPrice === "Free" ? "Premium access included" : "Save money with CityCard"} +

+ + + {/* Perks Grid */} +

What's Included:

+ {attraction.perks.map((perk, perkIndex) => ( + +

+ +

+ {perk.label} + + ))} +

+ + {/* Action Button */} + + Add to CityCard + +

+ + + {/* Enhanced Hover Gradient Overlay */} +

+ + {/* Border Glow Effect */} +

+ + ); + + return ( +

+ {/* Header */} + +

+ + Must-See Destinations + +

+ + Top + {' '} + Attractions{' '} + Included +

+ Discover Australia's most iconic attractions and hidden gems across Sydney, Melbourne, Brisbane, Perth, and Adelaide - all included with your CityCard +

+ + + {/* Category Tabs */} + + {categories.map((category, index) => ( + setActiveCategory(category)} + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + className={`px-6 py-4 h-14 rounded-2xl font-medium transition-all duration-300 ${ + activeCategory === category + ? 'bg-gradient-to-r from-primary to-secondary text-white shadow-xl shadow-primary/25 ring-2 ring-primary/20' + : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-primary/20 hover:bg-white' + }`} + > + {category} + + ))} + + + {/* Mobile Horizontal Carousel */} +

+ {/* Scroll Container */} +

+ {filteredAttractions.map((attraction, index) => ( + + ))} +

+ + {/* Scroll Indicators */} +

+ {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_, index) => ( +

+ ))} +

+ + {/* Mobile Hint Text */} +

+ Swipe to explore more attractions +

+ + {/* Desktop Bento Grid */} +

+ {/* Top Row - 3 equal cards */} +

+ {filteredAttractions.slice(0, 3).map((attraction, index) => ( + + ))} +

+ + {/* Consistent Vertical Spacing */} +

+ + {/* Bottom Row - 2 larger cards */} +

+ {filteredAttractions.slice(3, 5).map((attraction, index) => ( + + ))} +

+ + {/* Call to Action */} + + + Get Your City Card + + {/* Shine animation */} +

+ + +

+ ); +} \ No newline at end of file diff --git a/src/components/CTAButton.tsx b/src/components/CTAButton.tsx new file mode 100644 index 0000000..ff5d97d --- /dev/null +++ b/src/components/CTAButton.tsx @@ -0,0 +1,93 @@ +import { motion } from 'motion/react'; +import BeforeLogin from '../imports/BeforeLogin'; +import AfterLogin from '../imports/AfterLogin'; + +interface User { + email: string; + name: string; +} + +interface CTAButtonProps { + user: User | null; + onClick: () => void; + className?: string; +} + +// Helper function to generate initials from user data +const generateInitials = (user: User): string => { + if (user.name && user.name.includes(' ')) { + // If name has spaces, use first letter of first and last name + const nameParts = user.name.trim().split(' '); + return (nameParts[0]?.charAt(0) + nameParts[nameParts.length - 1]?.charAt(0)).toUpperCase(); + } else if (user.name) { + // If name is single word, use first two letters + return user.name.substring(0, 2).toUpperCase(); + } else { + // Fallback to email + const emailPart = user.email.split('@')[0]; + if (emailPart.length >= 2) { + return emailPart.substring(0, 2).toUpperCase(); + } + return emailPart.charAt(0).toUpperCase() + 'X'; + } +}; + +// Custom AfterLogin component with dynamic initials +function CustomAfterLogin({ initials }: { initials: string }) { + return ( +

+ {/* User Initials Circle */} +

{initials}

+ + {/* Text */} +

MY CITY CARD

+ ); +} + +export function CTAButton({ user, onClick, className = "" }: CTAButtonProps) { + const buttonContent = user ? ( + + ) : ( + + ); + + return ( + + + {buttonContent} + + + {/* Hover glow effect */} +

+ + ); +} \ No newline at end of file diff --git a/src/components/CheckoutPage.tsx b/src/components/CheckoutPage.tsx new file mode 100644 index 0000000..cc9f2b8 --- /dev/null +++ b/src/components/CheckoutPage.tsx @@ -0,0 +1,767 @@ +import { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'motion/react'; +import { ArrowLeft, CreditCard, Users, Calendar, MapPin, Shield, Truck, Clock, ChevronRight, Check, ChevronDown, X, Mail, Smartphone } from 'lucide-react'; +import { Button } from './ui/button'; +import { Input } from './ui/input'; +import { Label } from './ui/label'; +import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; +import { Separator } from './ui/separator'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog'; +import { RadioGroup, RadioGroupItem } from './ui/radio-group'; +import { Checkbox } from './ui/checkbox'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; +import { Badge } from './ui/badge'; +import { Textarea } from './ui/textarea'; +import Navbar from './Navbar'; +import { Footer } from './Footer'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +interface CheckoutPageProps { + onBackClick: () => void; + onHomeClick: () => void; + onMelbourneClick: () => void; + onPassesClick: () => void; + onCheckoutClick: () => void; + onSignInClick: () => void; + onSignOutClick?: () => void; + onAttractionsClick: () => void; + onBlogsClick: () => void; + onHowItWorksClick: () => void; + onFAQClick: () => void; + onPrivacyPolicyClick: () => void; + onAboutUsClick: () => void; + onProfileClick: () => void; + onCityCardsClick: () => void; + onMagicItineraryClick: () => void; + onPostCardsClick: () => void; + onOffersClick: () => void; + onSecureCheckoutClick?: () => void; + onContactUsClick?: () => void; + onEsimsClick?: () => void; + onHotelDiscountsClick?: () => void; + currentPage: string; + user?: { email: string; name: string } | null; +} + +// Mock cart data +const mockCartItems = [ + { + id: '1', + name: 'Paris Unlimited Pass', + type: '7-Day Pass', + price: 79, + originalPrice: 149, + discount: 47, + attractions: 45, + validity: '7 days', + image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?w=400', + features: ['Skip-the-line access', 'Mobile voucher', 'Free cancellation'] + } +]; + +export function CheckoutPage({ + onBackClick, + onHomeClick, + onMelbourneClick, + onPassesClick, + onCheckoutClick, + onSignInClick, + onSignOutClick, + onAttractionsClick, + onBlogsClick, + onHowItWorksClick, + onFAQClick, + onPrivacyPolicyClick, + onAboutUsClick, + onProfileClick, + onCityCardsClick, + onMagicItineraryClick, + onPostCardsClick, + onOffersClick, + onSecureCheckoutClick, + onContactUsClick, + onEsimsClick, + onHotelDiscountsClick, + currentPage, + user, +}: CheckoutPageProps) { + const [purchaseType, setPurchaseType] = useState<'self' | 'gift'>('self'); + const [selectedPayment, setSelectedPayment] = useState('credit-card'); + const [showEmailVerification, setShowEmailVerification] = useState(false); + const [verificationCode, setVerificationCode] = useState(''); + const [isEmailVerified, setIsEmailVerified] = useState(false); + const [formData, setFormData] = useState({ + email: '', + firstName: '', + lastName: '', + phone: '', + country: '', + address: '', + city: '', + postalCode: '', + cardNumber: '', + expiry: '', + cvv: '', + cardName: '', + agreeTerms: false, + subscribeNewsletter: false + }); + const [giftData, setGiftData] = useState({ + recipientName: '', + recipientPhone: '', + recipientEmail: '', + personalizedMessage: '' + }); + + const subtotal = mockCartItems.reduce((sum, item) => sum + item.price, 0); + const tax = Math.round(subtotal * 0.1); + const total = subtotal + tax; + const totalSavings = mockCartItems.reduce((sum, item) => sum + (item.originalPrice - item.price), 0); + + const handleInputChange = (field: string, value: string | boolean) => { + setFormData(prev => ({ ...prev, [field]: value })); + + // Trigger email verification when email is complete + if (field === 'email' && typeof value === 'string' && value.includes('@') && value.includes('.') && !isEmailVerified) { + setTimeout(() => { + setShowEmailVerification(true); + }, 1000); + } + }; + + const handleGiftInputChange = (field: string, value: string) => { + setGiftData(prev => ({ ...prev, [field]: value })); + }; + + const handleEmailVerification = () => { + if (verificationCode === '123456') { + setIsEmailVerified(true); + setShowEmailVerification(false); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!isEmailVerified) { + setShowEmailVerification(true); + return; + } + const checkoutData = { + purchaseType, + formData, + ...(purchaseType === 'gift' && { giftData }), + selectedPayment, + cartItems: mockCartItems + }; + console.log('Processing checkout...', checkoutData); + }; + + const paymentMethods = [ + { + id: 'credit-card', + name: 'Credit Card', + icon: , + description: 'Visa, Mastercard, American Express' + }, + { + id: 'paypal', + name: 'PayPal', + icon:

, + description: 'Pay with your PayPal account' + }, + { + id: 'google-pay', + name: 'Google Pay', + icon:

, + description: 'Pay with Google Pay' + } + ]; + + return ( +

+ {/* Navbar */} + {}} + onHomeClick={onHomeClick} + onMelbourneClick={onMelbourneClick} + onPassesClick={onPassesClick} + onCheckoutClick={onCheckoutClick} + onSignInClick={onSignInClick} + onSignOutClick={onSignOutClick} + onAttractionsClick={onAttractionsClick} + onBlogsClick={onBlogsClick} + onHowItWorksClick={onHowItWorksClick} + onFAQClick={onFAQClick} + onPrivacyPolicyClick={onPrivacyPolicyClick} + onAboutUsClick={onAboutUsClick} + onProfileClick={onProfileClick} + onCityCardsClick={onCityCardsClick} + onMagicItineraryClick={onMagicItineraryClick} + onPostCardsClick={onPostCardsClick} + onOffersClick={onOffersClick} + onEsimsClick={onEsimsClick} + onHotelDiscountsClick={onHotelDiscountsClick} + currentPage={currentPage} + isUserSignedIn={!!user} + user={user} + /> + + {/* Header Section */} +

+ {/* Back Button */} + + + Back to Cart + + + {/* Page Title */} + +

+ Secure{' '} + Checkout +

+ Complete your purchase and start exploring Paris +

+ +

+ + {/* Main Checkout Content */} +

+ {/* Left Column - Form Inputs (3/5 width) */} +

+ {/* Purchase Type Selection */} + + + + Purchase Type + + + setPurchaseType(value as 'self' | 'gift')} + className="grid grid-cols-1 md:grid-cols-2 gap-4" + > +

+ + +

+ +

Buy for Myself

Purchase a pass for your own use

+ +

+ + +

+ +

Gift a Pass

Send as a gift to someone special

+ +

+ + + + + + {/* Gift Recipient Information - Only shown when gift is selected */} + {purchaseType === 'gift' && ( + + + + + + Gift Recipient Details + + + +

+ Recipient Name * + handleGiftInputChange('recipientName', e.target.value)} + placeholder="Jane Smith" + required={purchaseType === 'gift'} + className="mt-1 font-poppins" + /> +

+ Recipient Email Address * + handleGiftInputChange('recipientEmail', e.target.value)} + placeholder="recipient@email.com" + required={purchaseType === 'gift'} + className="mt-1 font-poppins" + /> +

+ Recipient Phone Number * + handleGiftInputChange('recipientPhone', e.target.value)} + placeholder="+1 (555) 123-4567" + required={purchaseType === 'gift'} + className="mt-1 font-poppins" + /> +

+ Personalized Message +

handleGiftInputChange('personalizedMessage', e.target.value)}
+                          placeholder="Write a special message for your gift recipient..."
+                          rows={4}
+                          className="mt-1 font-poppins"
+                        />
+                        <p className="text-xs text-muted-foreground mt-1 font-poppins">Optional: Add a personal touch to your gift</p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              )}
+
+              {/* Contact Information */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.3 : 0.2 }}
+              >
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 font-merchant">
+                      <Users className="w-5 h-5" />
+                      {purchaseType === 'gift' ? 'Your Information (Purchaser)' : 'Contact Information'}
+                      {isEmailVerified && <Check className="w-5 h-5 text-green-600" />}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <Label htmlFor="email" className="font-poppins">Email Address *</Label>
+                      <div className="relative">
+                        <Input
+                          id="email"
+                          type="email"
+                          value={formData.email}
+                          onChange={(e) => handleInputChange('email', e.target.value)}
+                          placeholder="your@email.com"
+                          required
+                          className={`mt-1 font-poppins ${isEmailVerified ? 'border-green-600 bg-green-50' : ''}`}
+                        />
+                        {isEmailVerified && (
+                          <Check className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-green-600" />
+                        )}
+                      </div>
+                      {isEmailVerified && (
+                        <p className="text-sm text-green-600 mt-1 font-poppins">Email verified ✓</p>
+                      )}
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <Label htmlFor="firstName" className="font-poppins">First Name *</Label>
+                        <Input
+                          id="firstName"
+                          value={formData.firstName}
+                          onChange={(e) => handleInputChange('firstName', e.target.value)}
+                          placeholder="John"
+                          required
+                          className="mt-1 font-poppins"
+                        />
+                      </div>
+                      <div>
+                        <Label htmlFor="lastName" className="font-poppins">Last Name *</Label>
+                        <Input
+                          id="lastName"
+                          value={formData.lastName}
+                          onChange={(e) => handleInputChange('lastName', e.target.value)}
+                          placeholder="Doe"
+                          required
+                          className="mt-1 font-poppins"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <Label htmlFor="phone" className="font-poppins">Phone Number</Label>
+                      <Input
+                        id="phone"
+                        type="tel"
+                        value={formData.phone}
+                        onChange={(e) => handleInputChange('phone', e.target.value)}
+                        placeholder="+1 (555) 123-4567"
+                        className="mt-1 font-poppins"
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+
+              {/* Payment Method */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.3 }}
+              >
+
+              </motion.div>
+
+              {/* Billing Address */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.4 : 0.3 }}
+              >
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 font-merchant">
+                      <MapPin className="w-5 h-5" />
+                      Billing Address
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <Label htmlFor="country" className="font-poppins">Country *</Label>
+                      <Select value={formData.country} onValueChange={(value) => handleInputChange('country', value)}>
+                        <SelectTrigger className="mt-1">
+                          <SelectValue placeholder="Select country" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="us">United States</SelectItem>
+                          <SelectItem value="au">Australia</SelectItem>
+                          <SelectItem value="uk">United Kingdom</SelectItem>
+                          <SelectItem value="ca">Canada</SelectItem>
+                          <SelectItem value="de">Germany</SelectItem>
+                          <SelectItem value="fr">France</SelectItem>
+                          <SelectItem value="in">India</SelectItem>
+                          <SelectItem value="jp">Japan</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label htmlFor="address" className="font-poppins">Street Address *</Label>
+                      <Input
+                        id="address"
+                        value={formData.address}
+                        onChange={(e) => handleInputChange('address', e.target.value)}
+                        placeholder="123 Main Street"
+                        required
+                        className="mt-1 font-poppins"
+                      />
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <Label htmlFor="city" className="font-poppins">City *</Label>
+                        <Input
+                          id="city"
+                          value={formData.city}
+                          onChange={(e) => handleInputChange('city', e.target.value)}
+                          placeholder="New York"
+                          required
+                          className="mt-1 font-poppins"
+                        />
+                      </div>
+                      <div>
+                        <Label htmlFor="postalCode" className="font-poppins">Postal Code *</Label>
+                        <Input
+                          id="postalCode"
+                          value={formData.postalCode}
+                          onChange={(e) => handleInputChange('postalCode', e.target.value)}
+                          placeholder="10001"
+                          required
+                          className="mt-1 font-poppins"
+                        />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+
+              {/* Terms and Newsletter */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.5 : 0.4 }}
+                className="space-y-4"
+              >
+                <div className="flex items-start space-x-2">
+                  <Checkbox
+                    id="terms"
+                    checked={formData.agreeTerms}
+                    onCheckedChange={(checked) => handleInputChange('agreeTerms', checked as boolean)}
+                  />
+                  <div className="grid gap-1.5 leading-none">
+                    <label
+                      htmlFor="terms"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-poppins"
+                    >
+                      I agree to the Terms of Service and Privacy Policy *
+                    </label>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-2">
+                  <Checkbox
+                    id="newsletter"
+                    checked={formData.subscribeNewsletter}
+                    onCheckedChange={(checked) => handleInputChange('subscribeNewsletter', checked as boolean)}
+                  />
+                  <div className="grid gap-1.5 leading-none">
+                    <label
+                      htmlFor="newsletter"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-poppins"
+                    >
+                      Subscribe to our newsletter for travel tips and special offers
+                    </label>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+
+            {/* Right Column - Order Summary (2/5 width) */}
+            <div className="lg:col-span-2">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.4 : 0.3 }}
+                className="sticky top-24"
+              >
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="font-merchant flex items-center gap-2">
+                      Order Summary
+                      {purchaseType === 'gift' && (
+                        <Badge variant="secondary" className="font-poppins">
+                          <Mail className="w-3 h-3 mr-1" />
+                          Gift Purchase
+                        </Badge>
+                      )}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    {/* Gift Indicator */}
+                    {purchaseType === 'gift' && giftData.recipientName && (
+                      <div className="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/20 rounded-lg p-4">
+                        <div className="flex items-start gap-3">
+                          <Mail className="w-5 h-5 text-primary mt-0.5" />
+                          <div className="flex-1">
+                            <p className="font-medium text-sm font-poppins mb-1">Gift Recipient</p>
+                            <p className="text-sm text-gray-700 font-poppins">{giftData.recipientName}</p>
+                            <p className="text-xs text-gray-500 font-poppins mt-1">{giftData.recipientEmail}</p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Cart Items */}
+                    <div className="space-y-4">
+                      {mockCartItems.map((item) => (
+                        <div key={item.id} className="flex gap-4">
+                          <ImageWithFallback
+                            src={item.image}
+                            alt={item.name}
+                            className="w-20 h-20 rounded-lg object-cover"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-base mb-1 font-poppins">{item.name}</h4>
+                            <p className="text-sm text-gray-500 mb-2 font-poppins">{item.type}</p>
+                            <div className="flex items-center gap-2 mb-2">
+                              <span className="font-bold text-lg font-poppins">€{item.price}</span>
+                              <span className="text-sm text-gray-500 line-through font-poppins">€{item.originalPrice}</span>
+                              <Badge variant="outline" className="text-xs">
+                                -{item.discount}%
+                              </Badge>
+                            </div>
+                            <div className="text-sm text-gray-600 font-poppins">
+                              {item.attractions} attractions • Valid for {item.validity}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <Separator />
+
+                    {/* Features Summary */}
+                    <div className="space-y-3">
+                      <h4 className="font-medium font-merchant">What's Included:</h4>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 text-sm font-poppins">
+                          <Check className="w-4 h-4 text-green-600" />
+                          <span>Skip-the-line access to {mockCartItems[0].attractions} attractions</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm font-poppins">
+                          <Check className="w-4 h-4 text-green-600" />
+                          <span>Valid for {mockCartItems[0].validity}</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm font-poppins">
+                          <Check className="w-4 h-4 text-green-600" />
+                          <span>Instant mobile delivery</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm font-poppins">
+                          <Check className="w-4 h-4 text-green-600" />
+                          <span>Free cancellation</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* Pricing Breakdown */}
+                    <div className="space-y-3">
+                      <div className="flex justify-between text-sm font-poppins">
+                        <span>Subtotal</span>
+                        <span>€{subtotal}</span>
+                      </div>
+                      <div className="flex justify-between text-sm font-poppins">
+                        <span>Taxes & Fees</span>
+                        <span>€{tax}</span>
+                      </div>
+                      <div className="flex justify-between text-sm text-green-600 font-poppins">
+                        <span>Total Savings</span>
+                        <span>-€{totalSavings}</span>
+                      </div>
+                      <Separator />
+                      <div className="flex justify-between font-bold text-xl font-poppins">
+                        <span>Total</span>
+                        <span>€{total}</span>
+                      </div>
+                    </div>
+
+                    {/* Checkout Button */}
+                    <Button
+                      type="button"
+                      onClick={() => onSecureCheckoutClick?.()}
+                      className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-4 text-lg font-poppins"
+                      disabled={
+                        !formData.agreeTerms || 
+                        !formData.email || 
+                        !formData.firstName || 
+                        !formData.lastName || 
+                        !isEmailVerified ||
+                        (purchaseType === 'gift' && (!giftData.recipientName || !giftData.recipientEmail || !giftData.recipientPhone))
+                      }
+                    >
+                      {purchaseType === 'gift' ? 'Send Gift & Proceed to Checkout' : 'Proceed to Secure Checkout'}
+                      <ChevronRight className="w-5 h-5 ml-2" />
+                    </Button>
+
+                    {/* Security Notice */}
+                    <div className="flex items-center gap-2 text-xs text-gray-500 justify-center font-poppins">
+                      <Shield className="w-4 h-4" />
+                      <span>Secure 256-bit SSL encryption</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </div>
+          </form>
+        </div>
+      </section>
+
+      {/* Email Verification Popup */}
+      <Dialog open={showEmailVerification} onOpenChange={setShowEmailVerification}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 font-merchant">
+              <Mail className="w-5 h-5" />
+              Verify Your Email
+            </DialogTitle>
+            <DialogDescription className="font-poppins">
+              Enter the verification code sent to your email to continue with your booking.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 font-poppins">
+              We've sent a verification code to <strong>{formData.email}</strong>
+            </p>
+            <div>
+              <Label htmlFor="verification" className="font-poppins">Verification Code</Label>
+              <Input
+                id="verification"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value)}
+                placeholder="Enter 6-digit code"
+                className="mt-1 font-poppins text-center text-lg letter-spacing-2"
+                maxLength={6}
+              />
+            </div>
+            <div className="flex gap-3">
+              <Button
+                onClick={handleEmailVerification}
+                className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins"
+                disabled={verificationCode.length !== 6}
+              >
+                Verify Email
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => setShowEmailVerification(false)}
+                className="font-poppins"
+              >
+                Skip for now
+              </Button>
+            </div>
+            <p className="text-xs text-gray-500 text-center font-poppins">
+              Demo code: <strong>123456</strong>
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CitiesPage.tsx b/src/components/CitiesPage.tsx
new file mode 100644
index 0000000..22362a9
--- /dev/null
+++ b/src/components/CitiesPage.tsx
@@ -0,0 +1,685 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { Search, MapPin, Clock, Star, Users, Filter, X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import { Checkbox } from './ui/checkbox';
+import { Slider } from './ui/slider';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface City {
+  id: string;
+  name: string;
+  country: string;
+  description: string;
+  image: string;
+  region: string;
+  attractionsCount: number;
+  rating: number;
+  visitDuration: string;
+  startingPrice: number;
+  currency: string;
+  category: string;
+  status: 'available' | 'coming-soon';
+  isPopular?: boolean;
+  passesAvailable: number;
+}
+
+const cities: City[] = [
+  {
+    id: 'melbourne',
+    name: 'Melbourne',
+    country: 'Australia',
+    description: 'Cultural capital with world-famous coffee culture, street art, and vibrant laneways',
+    image: 'https://images.unsplash.com/photo-1624341373902-70e3a8dc9acc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZXxlbnwxfHx8fDE3NTc2NjM0ODN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Australia & Oceania',
+    attractionsCount: 30,
+    rating: 4.8,
+    visitDuration: '3-7 days',
+    startingPrice: 49,
+    currency: 'AUD',
+    category: 'culture',
+    status: 'available',
+    isPopular: true,
+    passesAvailable: 3
+  },
+  {
+    id: 'sydney',
+    name: 'Sydney',
+    country: 'Australia',
+    description: 'Iconic harbor city with the Opera House, Harbour Bridge, and stunning beaches',
+    image: 'https://images.unsplash.com/photo-1523059623039-a9ed027e7fad?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBvcGVyYSUyMGhvdXNlfGVufDF8fHx8MTc1NzU5MDk3MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Australia & Oceania',
+    attractionsCount: 25,
+    rating: 4.7,
+    visitDuration: '3-6 days',
+    startingPrice: 52,
+    currency: 'AUD',
+    category: 'adventure',
+    status: 'coming-soon',
+    isPopular: true,
+    passesAvailable: 2
+  },
+  {
+    id: 'paris',
+    name: 'Paris',
+    country: 'France',
+    description: 'City of Light with world-famous landmarks, art museums, and romantic atmosphere',
+    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGVpZmZlbCUyMHRvd2VyfGVufDF8fHx8MTc1NzYxNjQ2OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Europe',
+    attractionsCount: 45,
+    rating: 4.9,
+    visitDuration: '4-8 days',
+    startingPrice: 55,
+    currency: 'EUR',
+    category: 'culture',
+    status: 'coming-soon',
+    isPopular: true,
+    passesAvailable: 4
+  },
+  {
+    id: 'london',
+    name: 'London',
+    country: 'United Kingdom',
+    description: 'Historic capital with royal palaces, world-class museums, and modern culture',
+    image: 'https://images.unsplash.com/photo-1486299267070-83823f5448dd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBiaWclMjBiZW58ZW58MXx8fHwxNzU3NjQ3OTYxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Europe',
+    attractionsCount: 38,
+    rating: 4.8,
+    visitDuration: '4-7 days',
+    startingPrice: 58,
+    currency: 'GBP',
+    category: 'culture',
+    status: 'coming-soon',
+    passesAvailable: 3
+  },
+  {
+    id: 'tokyo',
+    name: 'Tokyo',
+    country: 'Japan',
+    description: 'Vibrant metropolis blending ancient traditions with cutting-edge technology',
+    image: 'https://images.unsplash.com/photo-1588486691401-93624c48459b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGNpdHklMjBsYW5kc2NhcGV8ZW58MXx8fHwxNzU3NjYzNDk5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Asia',
+    attractionsCount: 52,
+    rating: 4.9,
+    visitDuration: '5-10 days',
+    startingPrice: 68,
+    currency: 'JPY',
+    category: 'culture',
+    status: 'coming-soon',
+    isPopular: true,
+    passesAvailable: 5
+  },
+  {
+    id: 'rome',
+    name: 'Rome',
+    country: 'Italy',
+    description: 'Eternal city with ancient history, timeless beauty, and incredible cuisine',
+    image: 'https://images.unsplash.com/photo-1706884027668-4b2a1a9701ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb21lJTIwY29sb3NzZXVtJTIwYW5jaWVudHxlbnwxfHx8fDE3NTc2Mzk3NDN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Europe',
+    attractionsCount: 34,
+    rating: 4.8,
+    visitDuration: '3-6 days',
+    startingPrice: 45,
+    currency: 'EUR',
+    category: 'culture',
+    status: 'coming-soon',
+    passesAvailable: 3
+  },
+  {
+    id: 'barcelona',
+    name: 'Barcelona',
+    country: 'Spain',
+    description: 'Architectural wonder with Gaudí masterpieces, beaches, and vibrant nightlife',
+    image: 'https://images.unsplash.com/photo-1539037116277-4db20889f2d4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxiYXJjZWxvbmElMjBjaXR5fGVufDF8fHx8MTc1NzY2MzUyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'Europe',
+    attractionsCount: 29,
+    rating: 4.7,
+    visitDuration: '3-5 days',
+    startingPrice: 42,
+    currency: 'EUR',
+    category: 'culture',
+    status: 'coming-soon',
+    passesAvailable: 2
+  },
+  {
+    id: 'new-york',
+    name: 'New York',
+    country: 'United States',
+    description: 'The city that never sleeps with iconic skyline, Broadway, and world-class dining',
+    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwY2l0eXxlbnwxfHx8fDE3NTc2NjM1MzN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    region: 'North America',
+    attractionsCount: 67,
+    rating: 4.6,
+    visitDuration: '4-8 days',
+    startingPrice: 75,
+    currency: 'USD',
+    category: 'adventure',
+    status: 'coming-soon',
+    passesAvailable: 6
+  }
+];
+
+interface CitiesPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCitiesClick: () => void;
+  onDealsClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityClick?: (cityId: string) => void;
+  currentPage: string;
+}
+
+export function CitiesPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCitiesClick,
+  onDealsClick,
+  onCheckoutClick,
+  onSignInClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityClick,
+  currentPage
+}: CitiesPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedRegions, setSelectedRegions] = useState<string[]>([]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
+  const [priceRange, setPriceRange] = useState([0, 100]);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [itemsPerPage] = useState(9); // Show 9 cities per page (3 rows of 3)
+
+  const regions = [
+    { value: 'australia-oceania', label: 'Australia & Oceania', count: 2 },
+    { value: 'europe', label: 'Europe', count: 4 },
+    { value: 'asia', label: 'Asia', count: 1 },
+    { value: 'north-america', label: 'North America', count: 1 }
+  ];
+
+  const categories = [
+    { value: 'culture', label: 'Culture', count: 6 },
+    { value: 'adventure', label: 'Adventure', count: 2 }
+  ];
+
+  const statuses = [
+    { value: 'available', label: 'Available Now', count: 1 },
+    { value: 'coming-soon', label: 'Coming Soon', count: 7 }
+  ];
+
+  const filteredCities = cities.filter(city => {
+    const matchesSearch = city.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         city.country.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         city.description.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    const matchesRegion = selectedRegions.length === 0 || 
+                         selectedRegions.some(region => 
+                           city.region.toLowerCase().replace(/[^a-z]/g, '-') === region
+                         );
+    
+    const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(city.category);
+    const matchesStatus = selectedStatus.length === 0 || selectedStatus.includes(city.status);
+    const matchesPrice = city.startingPrice >= priceRange[0] && city.startingPrice <= priceRange[1];
+    
+    return matchesSearch && matchesRegion && matchesCategory && matchesStatus && matchesPrice;
+  });
+
+  // Pagination logic
+  const totalPages = Math.ceil(filteredCities.length / itemsPerPage);
+  const startIndex = (pageNumber - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentCities = filteredCities.slice(startIndex, endIndex);
+  const totalItems = filteredCities.length;
+  const showingFrom = totalItems > 0 ? startIndex + 1 : 0;
+  const showingTo = Math.min(endIndex, totalItems);
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setPageNumber(1);
+  }, [searchQuery, selectedRegions, selectedCategories, selectedStatus, priceRange]);
+
+  const toggleRegion = (region: string) => {
+    setSelectedRegions(prev => 
+      prev.includes(region) 
+        ? prev.filter(r => r !== region)
+        : [...prev, region]
+    );
+  };
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories(prev => 
+      prev.includes(category) 
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const toggleStatus = (status: string) => {
+    setSelectedStatus(prev => 
+      prev.includes(status) 
+        ? prev.filter(s => s !== status)
+        : [...prev, status]
+    );
+  };
+
+  const clearAllFilters = () => {
+    setSelectedRegions([]);
+    setSelectedCategories([]);
+    setSelectedStatus([]);
+    setPriceRange([0, 100]);
+    setSearchQuery('');
+  };
+
+  const FilterSidebar = ({ isMobile = false }) => (
+    <div className={`bg-white ${isMobile ? 'p-6' : 'p-6 sticky top-44'} rounded-lg border border-gray-100 h-fit`}>
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="font-semibold text-gray-900">Filters</h3>
+        {isMobile && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowMobileFilters(false)}
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Search by region */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Region</h4>
+        <div className="space-y-3">
+          {regions.map(region => (
+            <div key={region.value} className="flex items-center space-x-3">
+              <Checkbox
+                id={region.value}
+                checked={selectedRegions.includes(region.value)}
+                onCheckedChange={() => toggleRegion(region.value)}
+              />
+              <label
+                htmlFor={region.value}
+                className="text-sm text-gray-700 cursor-pointer flex-1"
+              >
+                {region.label} ({region.count})
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Category */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Category</h4>
+        <div className="space-y-3">
+          {categories.map(category => (
+            <div key={category.value} className="flex items-center space-x-3">
+              <Checkbox
+                id={category.value}
+                checked={selectedCategories.includes(category.value)}
+                onCheckedChange={() => toggleCategory(category.value)}
+              />
+              <label
+                htmlFor={category.value}
+                className="text-sm text-gray-700 cursor-pointer flex-1"
+              >
+                {category.label} ({category.count})
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Status */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Availability</h4>
+        <div className="space-y-3">
+          {statuses.map(status => (
+            <div key={status.value} className="flex items-center space-x-3">
+              <Checkbox
+                id={status.value}
+                checked={selectedStatus.includes(status.value)}
+                onCheckedChange={() => toggleStatus(status.value)}
+              />
+              <label
+                htmlFor={status.value}
+                className="text-sm text-gray-700 cursor-pointer flex-1"
+              >
+                {status.label} ({status.count})
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Price Range */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Starting Price Range</h4>
+        <div className="px-3">
+          <Slider
+            value={priceRange}
+            onValueChange={setPriceRange}
+            min={0}
+            max={100}
+            step={5}
+            className="mb-3"
+          />
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>${priceRange[0]}</span>
+            <span>${priceRange[1]}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Clear filters */}
+      <Button
+        variant="outline"
+        onClick={clearAllFilters}
+        className="w-full"
+      >
+        Clear All Filters
+      </Button>
+    </div>
+  );
+
+  const handleCityClick = (cityId: string) => {
+    if (cityId === 'melbourne') {
+      onMelbourneClick();
+    } else {
+      onCityClick?.(cityId);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar
+        activeCity=""
+        onCityChange={(city) => {
+          if (city === 'Melbourne') {
+            onMelbourneClick();
+          }
+        }}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCitiesClick={() => {}} // Already on cities page
+        onDealsClick={onDealsClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        currentPage="cities"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex flex-col lg:flex-row gap-8 pt-32">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:block lg:w-1/4">
+            <FilterSidebar />
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">
+            {/* Header */}
+            <div className="mb-8">
+              <h1 className="mb-2">Explore <span className="font-bold italic">Cities</span></h1>
+              <p className="text-gray-600">
+                Discover amazing destinations around the world with our curated city passes
+              </p>
+            </div>
+
+            {/* Search Bar */}
+            <div className="mb-8">
+              <div className="relative max-w-md">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Input
+                  placeholder="Search cities..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 bg-white border-gray-200"
+                />
+              </div>
+            </div>
+
+            {/* Mobile Filter Button */}
+            <div className="lg:hidden mb-6">
+              <Button
+                variant="outline"
+                onClick={() => setShowMobileFilters(true)}
+                className="w-full"
+              >
+                <Filter className="w-4 h-4 mr-2" />
+                Filters ({selectedRegions.length + selectedCategories.length + selectedStatus.length})
+              </Button>
+            </div>
+
+            {/* Results Count */}
+            <div className="mb-6">
+              <p className="text-gray-600">
+                Showing {showingFrom}-{showingTo} of {totalItems} city(s)
+              </p>
+            </div>
+
+            {/* Cities Grid */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+            >
+              {currentCities.map((city, index) => (
+                <motion.div
+                  key={city.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Card 
+                    className="group cursor-pointer interactive-card h-full"
+                    onClick={() => handleCityClick(city.id)}
+                  >
+                    <CardContent className="p-0">
+                      <div className="relative">
+                        <ImageWithFallback
+                          src={city.image}
+                          alt={city.name}
+                          className="w-full h-48 object-cover rounded-t-lg"
+                        />
+                        {city.isPopular && (
+                          <Badge className="absolute top-3 left-3 bg-primary text-white">
+                            Popular
+                          </Badge>
+                        )}
+                        <div className="absolute top-3 right-3 bg-white rounded-full p-2 shadow-sm">
+                          <Star className="w-4 h-4 fill-current text-yellow-500" />
+                        </div>
+                        <Badge 
+                          className={`absolute bottom-3 right-3 ${
+                            city.status === 'available' 
+                              ? 'bg-green-600 text-white' 
+                              : 'bg-orange-600 text-white'
+                          }`}
+                        >
+                          {city.status === 'available' ? 'Available' : 'Coming Soon'}
+                        </Badge>
+                      </div>
+                      
+                      <div className="p-4">
+                        <div className="flex items-start justify-between mb-2">
+                          <div className="flex-1">
+                            <p className="text-sm text-gray-500 mb-1">{city.country}</p>
+                            <h3 className="font-semibold text-gray-900 group-hover:text-primary transition-colors">
+                              {city.name}
+                            </h3>
+                          </div>
+                        </div>
+                        
+                        <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+                          {city.description}
+                        </p>
+                        
+                        <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
+                          <div className="flex items-center gap-1">
+                            <Users className="w-4 h-4" />
+                            <span>{city.attractionsCount} attractions</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Clock className="w-4 h-4" />
+                            <span>{city.visitDuration}</span>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
+                          <div className="flex items-center gap-1">
+                            <Star className="w-4 h-4 fill-current text-yellow-500" />
+                            <span>{city.rating}</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <MapPin className="w-4 h-4" />
+                            <span>{city.region}</span>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-1">
+                            <span className="text-sm text-gray-500">From</span>
+                            <span className="font-semibold">${city.startingPrice} {city.currency}</span>
+                          </div>
+                          <Badge 
+                            variant="secondary"
+                            className="text-xs"
+                          >
+                            {city.passesAvailable} {city.passesAvailable === 1 ? 'Pass' : 'Passes'}
+                          </Badge>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {totalItems === 0 && (
+              <div className="text-center py-12">
+                <p className="text-gray-500 mb-4">No cities found matching your criteria</p>
+                <Button onClick={clearAllFilters} variant="outline">
+                  Clear All Filters
+                </Button>
+              </div>
+            )}
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="text-sm text-gray-600">
+                  Page {pageNumber} of {totalPages}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
+                    disabled={pageNumber === 1}
+                    className="px-3 py-2"
+                  >
+                    Previous
+                  </Button>
+                  
+                  {/* Page numbers */}
+                  <div className="flex items-center gap-1">
+                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                      let pageNum;
+                      if (totalPages <= 5) {
+                        pageNum = i + 1;
+                      } else if (pageNumber <= 3) {
+                        pageNum = i + 1;
+                      } else if (pageNumber >= totalPages - 2) {
+                        pageNum = totalPages - 4 + i;
+                      } else {
+                        pageNum = pageNumber - 2 + i;
+                      }
+                      
+                      return (
+                        <Button
+                          key={pageNum}
+                          variant={pageNumber === pageNum ? "default" : "outline"}
+                          onClick={() => setPageNumber(pageNum)}
+                          className="px-3 py-2 min-w-[40px]"
+                        >
+                          {pageNum}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                  
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.min(totalPages, pageNumber + 1))}
+                    disabled={pageNumber === totalPages}
+                    className="px-3 py-2"
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Filter Modal */}
+      {showMobileFilters && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowMobileFilters(false)} />
+          <div className="fixed inset-y-0 left-0 w-80 bg-white overflow-y-auto">
+            <FilterSidebar isMobile />
+          </div>
+        </div>
+      )}
+
+      {/* Enhanced Testimonials Section */}
+      <EnhancedTestimonials />
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CityAttractionsPage.tsx b/src/components/CityAttractionsPage.tsx
new file mode 100644
index 0000000..943ccaf
--- /dev/null
+++ b/src/components/CityAttractionsPage.tsx
@@ -0,0 +1,747 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { Search, MapPin, Clock, Star, DollarSign, Filter, X, ArrowLeft } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import { Checkbox } from './ui/checkbox';
+import { Slider } from './ui/slider';
+import Navbar from './Navbar';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface Attraction {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+  location: string;
+  duration: string;
+  rating: number;
+  price: number;
+  category: string;
+  passType: 'unlimited' | 'selective' | 'both';
+  isPopular?: boolean;
+}
+
+interface CityData {
+  id: string;
+  name: string;
+  country: string;
+  hero_image: string;
+  currency: string;
+  description: string;
+  attractions: Attraction[];
+}
+
+const cityAttractions: Record<string, CityData> = {
+  paris: {
+    id: 'paris',
+    name: 'Paris',
+    country: 'France',
+    hero_image: 'https://images.unsplash.com/photo-1652254693457-5f6d7db674c6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMHRvdXJpc20lMjBhdHRyYWN0aW9uc3xlbnwxfHx8fDE3NTc2NjQwMjB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    currency: 'EUR',
+    description: 'City of Light with world-famous landmarks, art museums, and romantic atmosphere',
+    attractions: [
+      {
+        id: 'eiffel-tower',
+        name: 'Eiffel Tower',
+        description: 'Iconic iron tower offering breathtaking views of Paris from its observation decks',
+        image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGVpZmZlbCUyMHRvd2VyfGVufDF8fHx8MTc1NzYxNjQ2OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Champ de Mars',
+        duration: '2-3 hours',
+        rating: 4.5,
+        price: 29,
+        category: 'culture',
+        passType: 'unlimited',
+        isPopular: true
+      },
+      {
+        id: 'louvre-museum',
+        name: 'Louvre Museum',
+        description: 'World\'s largest art museum housing the Mona Lisa and countless masterpieces',
+        image: 'https://images.unsplash.com/photo-1566139536744-6270a2e5a3a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb3V2cmUlMjBtdXNldW18ZW58MXx8fHwxNzU3NjY0MDY3fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Palais Royal',
+        duration: '3-4 hours',
+        rating: 4.7,
+        price: 17,
+        category: 'culture',
+        passType: 'unlimited',
+        isPopular: true
+      },
+      {
+        id: 'notre-dame',
+        name: 'Notre-Dame Cathedral',
+        description: 'Gothic masterpiece and historic cathedral in the heart of Paris',
+        image: 'https://images.unsplash.com/photo-1539650116574-75c0c6d0d0e3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxub3RyZSUyMGRhbWUlMjBwYXJpc3xlbnwxfHx8fDE3NTc2NjQwNzF8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Île de la Cité',
+        duration: '1-2 hours',
+        rating: 4.6,
+        price: 0,
+        category: 'culture',
+        passType: 'unlimited'
+      },
+      {
+        id: 'arc-de-triomphe',
+        name: 'Arc de Triomphe',
+        description: 'Monumental arch honoring those who fought for France, with panoramic city views',
+        image: 'https://images.unsplash.com/photo-1598975106642-dc3a8c79c854?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcmMlMjBkZSUyMHRyaW9tcGhlfGVufDF8fHx8MTc1NzY2NDA3NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Champs-Élysées',
+        duration: '1-2 hours',
+        rating: 4.4,
+        price: 13,
+        category: 'culture',
+        passType: 'both'
+      },
+      {
+        id: 'seine-cruise',
+        name: 'Seine River Cruise',
+        description: 'Scenic boat tour along the Seine passing famous Parisian landmarks',
+        image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzZWluZSUyMHJpdmVyJTIwY3J1aXNlfGVufDF8fHx8MTc1NzY2NDA3OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Various Docks',
+        duration: '1 hour',
+        rating: 4.3,
+        price: 15,
+        category: 'adventure',
+        passType: 'both'
+      },
+      {
+        id: 'montmartre',
+        name: 'Montmartre & Sacré-Cœur',
+        description: 'Bohemian hilltop district with the stunning Sacré-Cœur Basilica',
+        image: 'https://images.unsplash.com/photo-1471939743851-c4df8b6ee c95?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb250bWFydHJlJTIwc2FjcmUlMjBjb2V1cnxlbnwxfHx8fDE3NTc2NjQwODN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Montmartre',
+        duration: '2-4 hours',
+        rating: 4.5,
+        price: 0,
+        category: 'culture',
+        passType: 'unlimited'
+      }
+    ]
+  },
+  tokyo: {
+    id: 'tokyo',
+    name: 'Tokyo',
+    country: 'Japan',
+    hero_image: 'https://images.unsplash.com/photo-1713263367828-9eafd7fc3797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGF0dHJhY3Rpb25zJTIwY2l0eXNjYXBlfGVufDF8fHx8MTc1NzY2NDAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    currency: 'JPY',
+    description: 'Vibrant metropolis blending ancient traditions with cutting-edge technology',
+    attractions: [
+      {
+        id: 'tokyo-tower',
+        name: 'Tokyo Tower',
+        description: 'Iconic red tower offering spectacular city views and broadcasting facilities',
+        image: 'https://images.unsplash.com/photo-1598976838083-ad00095bb123?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMHRvd2VyfGVufDF8fHx8MTc1NzY2NDEwOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Minato',
+        duration: '2-3 hours',
+        rating: 4.4,
+        price: 25,
+        category: 'adventure',
+        passType: 'unlimited',
+        isPopular: true
+      },
+      {
+        id: 'sensoji-temple',
+        name: 'Sensoji Temple',
+        description: 'Ancient Buddhist temple and Tokyo\'s oldest temple with traditional atmosphere',
+        image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzZW5zb2ppJTIwdGVtcGxlfGVufDF8fHx8MTc1NzY2NDExMnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Asakusa',
+        duration: '1-2 hours',
+        rating: 4.6,
+        price: 0,
+        category: 'culture',
+        passType: 'unlimited'
+      },
+      {
+        id: 'shibuya-crossing',
+        name: 'Shibuya Crossing',
+        description: 'World\'s busiest pedestrian crossing and symbol of modern Tokyo',
+        image: 'https://images.unsplash.com/photo-1542051841857-5f90071e7989?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaGlidXlhJTIwY3Jvc3Npbmd8ZW58MXx8fHwxNzU3NjY0MTE2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Shibuya',
+        duration: '1 hour',
+        rating: 4.3,
+        price: 0,
+        category: 'adventure',
+        passType: 'unlimited',
+        isPopular: true
+      },
+      {
+        id: 'tokyo-skytree',
+        name: 'Tokyo Skytree',
+        description: 'World\'s second tallest structure with observation decks and stunning views',
+        image: 'https://images.unsplash.com/photo-1576538509036-c47f3604da84?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMHNreXRyZWV8ZW58MXx8fHwxNzU3NjY0MTIwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Sumida',
+        duration: '2-3 hours',
+        rating: 4.5,
+        price: 32,
+        category: 'adventure',
+        passType: 'selective',
+        isPopular: true
+      }
+    ]
+  },
+  london: {
+    id: 'london',
+    name: 'London',
+    country: 'United Kingdom',
+    hero_image: 'https://images.unsplash.com/photo-1645544865499-8b768cf70562?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBsYW5kbWFya3MlMjB0b3VyaXNtfGVufDF8fHx8MTc1NzY2NDAyOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    currency: 'GBP',
+    description: 'Historic capital with royal palaces, world-class museums, and modern culture',
+    attractions: [
+      {
+        id: 'big-ben',
+        name: 'Big Ben & Parliament',
+        description: 'Iconic clock tower and seat of British government with guided tours',
+        image: 'https://images.unsplash.com/photo-1486299267070-83823f5448dd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBiaWclMjBiZW58ZW58MXx8fHwxNzU3NjQ3OTYxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Westminster',
+        duration: '2 hours',
+        rating: 4.7,
+        price: 28,
+        category: 'culture',
+        passType: 'unlimited',
+        isPopular: true
+      },
+      {
+        id: 'british-museum',
+        name: 'British Museum',
+        description: 'World-renowned museum with artifacts from across human history',
+        image: 'https://images.unsplash.com/photo-1603838354146-f5ffc0b45cd9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxicml0aXNoJTIwbXVzZXVtfGVufDF8fHx8MTc1NzY2NDE0NHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Bloomsbury',
+        duration: '3-4 hours',
+        rating: 4.6,
+        price: 0,
+        category: 'culture',
+        passType: 'unlimited'
+      },
+      {
+        id: 'tower-bridge',
+        name: 'Tower Bridge',
+        description: 'Victorian bascule bridge with glass floor and panoramic walkways',
+        image: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b3dlciUyMGJyaWRnZSUyMGxvbmRvbnxlbnwxfHx8fDE3NTc2NjQxNDh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Tower Hamlets',
+        duration: '1-2 hours',
+        rating: 4.4,
+        price: 12,
+        category: 'culture',
+        passType: 'both',
+        isPopular: true
+      },
+      {
+        id: 'buckingham-palace',
+        name: 'Buckingham Palace',
+        description: 'Official residence of the British monarch with state rooms tours',
+        image: 'https://images.unsplash.com/photo-1529655683826-ac6bbde65424?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidWNraW5naGFtJTIwcGFsYWNlfGVufDF8fHx8MTc1NzY2NDE1Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+        location: 'Westminster',
+        duration: '2-3 hours',
+        rating: 4.3,
+        price: 30,
+        category: 'culture',
+        passType: 'selective'
+      }
+    ]
+  }
+};
+
+interface CityAttractionsPageProps {
+  cityId: string;
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCitiesClick: () => void;
+  onSignInClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onAttractionClick?: (attractionId: string) => void;
+  currentPage: string;
+}
+
+export function CityAttractionsPage({
+  cityId,
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCitiesClick,
+  onSignInClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onAttractionClick,
+  currentPage
+}: CityAttractionsPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedPassTypes, setSelectedPassTypes] = useState<string[]>([]);
+  const [priceRange, setPriceRange] = useState([0, 50]);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [itemsPerPage] = useState(12);
+
+  // Get city data
+  const cityData = cityAttractions[cityId];
+  
+  if (!cityData) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-4">City Not Found</h1>
+          <p className="text-gray-600 mb-4">Sorry, this city is not available yet.</p>
+          <Button onClick={onBackClick}>Go Back</Button>
+        </div>
+      </div>
+    );
+  }
+
+  const categories = [
+    { value: 'adventure', label: 'Adventure', count: cityData.attractions.filter(a => a.category === 'adventure').length },
+    { value: 'culture', label: 'Culture', count: cityData.attractions.filter(a => a.category === 'culture').length },
+    { value: 'family', label: 'Family Friendly', count: cityData.attractions.filter(a => a.category === 'family').length }
+  ].filter(cat => cat.count > 0);
+
+  const passTypes = [
+    { value: 'unlimited', label: 'Unlimited', count: cityData.attractions.filter(a => a.passType === 'unlimited').length },
+    { value: 'selective', label: 'Selective', count: cityData.attractions.filter(a => a.passType === 'selective').length },
+    { value: 'both', label: 'Both', count: cityData.attractions.filter(a => a.passType === 'both').length }
+  ].filter(type => type.count > 0);
+
+  const filteredAttractions = cityData.attractions.filter(attraction => {
+    const matchesSearch = attraction.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         attraction.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(attraction.category);
+    const matchesPassType = selectedPassTypes.length === 0 || selectedPassTypes.includes(attraction.passType);
+    const matchesPrice = attraction.price >= priceRange[0] && attraction.price <= priceRange[1];
+    
+    return matchesSearch && matchesCategory && matchesPassType && matchesPrice;
+  });
+
+  // Pagination logic
+  const totalPages = Math.ceil(filteredAttractions.length / itemsPerPage);
+  const startIndex = (pageNumber - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentAttractions = filteredAttractions.slice(startIndex, endIndex);
+  const totalItems = filteredAttractions.length;
+  const showingFrom = totalItems > 0 ? startIndex + 1 : 0;
+  const showingTo = Math.min(endIndex, totalItems);
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setPageNumber(1);
+  }, [searchQuery, selectedCategories, selectedPassTypes, priceRange]);
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories(prev => 
+      prev.includes(category) 
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const togglePassType = (passType: string) => {
+    setSelectedPassTypes(prev => 
+      prev.includes(passType) 
+        ? prev.filter(p => p !== passType)
+        : [...prev, passType]
+    );
+  };
+
+  const clearAllFilters = () => {
+    setSelectedCategories([]);
+    setSelectedPassTypes([]);
+    setPriceRange([0, 50]);
+    setSearchQuery('');
+  };
+
+  const FilterSidebar = ({ isMobile = false }) => (
+    <div className={`bg-white ${isMobile ? 'p-6' : 'p-6 sticky top-44'} rounded-lg border border-gray-100 h-fit`}>
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="font-semibold text-gray-900">Filters</h3>
+        {isMobile && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowMobileFilters(false)}
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Categories */}
+      {categories.length > 0 && (
+        <div className="mb-6">
+          <h4 className="font-medium text-gray-900 mb-3">Category</h4>
+          <div className="space-y-3">
+            {categories.map(category => (
+              <div key={category.value} className="flex items-center space-x-3">
+                <Checkbox
+                  id={category.value}
+                  checked={selectedCategories.includes(category.value)}
+                  onCheckedChange={() => toggleCategory(category.value)}
+                />
+                <label
+                  htmlFor={category.value}
+                  className="text-sm text-gray-700 cursor-pointer flex-1"
+                >
+                  {category.label} ({category.count})
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Pass Types */}
+      {passTypes.length > 0 && (
+        <div className="mb-6">
+          <h4 className="font-medium text-gray-900 mb-3">Pass Type</h4>
+          <div className="space-y-3">
+            {passTypes.map(passType => (
+              <div key={passType.value} className="flex items-center space-x-3">
+                <Checkbox
+                  id={passType.value}
+                  checked={selectedPassTypes.includes(passType.value)}
+                  onCheckedChange={() => togglePassType(passType.value)}
+                />
+                <label
+                  htmlFor={passType.value}
+                  className="text-sm text-gray-700 cursor-pointer flex-1"
+                >
+                  {passType.label} ({passType.count})
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Price Range */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Price Range ({cityData.currency})</h4>
+        <div className="px-3">
+          <Slider
+            value={priceRange}
+            onValueChange={setPriceRange}
+            min={0}
+            max={50}
+            step={5}
+            className="mb-3"
+          />
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>{priceRange[0]} {cityData.currency}</span>
+            <span>{priceRange[1]} {cityData.currency}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Clear filters */}
+      <Button
+        variant="outline"
+        onClick={clearAllFilters}
+        className="w-full"
+      >
+        Clear All Filters
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCitiesClick={onCitiesClick}
+        onHomeClick={onHomeClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        currentPage="cities"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Hero Section */}
+      <div 
+        className="relative w-full h-[50vh] bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${cityData.hero_image}')`
+        }}
+      >
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-center text-white">
+            <motion.button
+              onClick={onBackClick}
+              className="absolute top-8 left-8 flex items-center gap-2 text-white hover:text-gray-200 transition-colors duration-200"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <ArrowLeft className="w-5 h-5" />
+              <span>Back to Cities</span>
+            </motion.button>
+            
+            <motion.h1 
+              className="font-merchant text-4xl md:text-5xl lg:text-6xl mb-4"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <span className="font-light">Explore</span>{' '}
+              <span className="font-bold italic">{cityData.name}</span>
+            </motion.h1>
+            <motion.p 
+              className="text-xl md:text-2xl max-w-3xl mx-auto"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              {cityData.description}
+            </motion.p>
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:block lg:w-1/4">
+            <FilterSidebar />
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">
+            {/* Header */}
+            <div className="mb-8">
+              <h2 className="mb-2">{cityData.name} Attractions</h2>
+              <p className="text-gray-600">
+                Discover the best attractions and experiences in {cityData.name}
+              </p>
+            </div>
+
+            {/* Search Bar */}
+            <div className="mb-8">
+              <div className="relative max-w-md">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Input
+                  placeholder="Search attractions..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 bg-white border-gray-200"
+                />
+              </div>
+            </div>
+
+            {/* Mobile Filter Button */}
+            <div className="lg:hidden mb-6">
+              <Button
+                variant="outline"
+                onClick={() => setShowMobileFilters(true)}
+                className="w-full"
+              >
+                <Filter className="w-4 h-4 mr-2" />
+                Filters ({selectedCategories.length + selectedPassTypes.length})
+              </Button>
+            </div>
+
+            {/* Results Count */}
+            <div className="mb-6">
+              <p className="text-gray-600">
+                Showing {showingFrom}-{showingTo} of {totalItems} attraction(s)
+              </p>
+            </div>
+
+            {/* Attractions Grid */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+            >
+              {currentAttractions.map((attraction, index) => (
+                <motion.div
+                  key={attraction.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Card 
+                    className="group cursor-pointer interactive-card h-full"
+                    onClick={() => onAttractionClick?.(attraction.id)}
+                  >
+                    <CardContent className="p-0">
+                      <div className="relative">
+                        <ImageWithFallback
+                          src={attraction.image}
+                          alt={attraction.name}
+                          className="w-full h-48 object-cover rounded-t-lg"
+                        />
+                        {attraction.isPopular && (
+                          <Badge className="absolute top-3 left-3 bg-primary text-white">
+                            Popular
+                          </Badge>
+                        )}
+                        <div className="absolute top-3 right-3 bg-white rounded-full p-2 shadow-sm">
+                          <Star className="w-4 h-4 fill-current text-yellow-500" />
+                        </div>
+                      </div>
+                      
+                      <div className="p-4">
+                        <div className="flex items-start justify-between mb-2">
+                          <div className="flex-1">
+                            <p className="text-sm text-gray-500 mb-1">{attraction.location}</p>
+                            <h3 className="font-semibold text-gray-900 group-hover:text-primary transition-colors">
+                              {attraction.name}
+                            </h3>
+                          </div>
+                        </div>
+                        
+                        <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+                          {attraction.description}
+                        </p>
+                        
+                        <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
+                          <div className="flex items-center gap-1">
+                            <Clock className="w-4 h-4" />
+                            <span>{attraction.duration}</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Star className="w-4 h-4 fill-current text-yellow-500" />
+                            <span>{attraction.rating}</span>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-1">
+                            {attraction.price > 0 ? (
+                              <>
+                                <DollarSign className="w-4 h-4 text-gray-500" />
+                                <span className="font-semibold">{attraction.price} {cityData.currency}</span>
+                              </>
+                            ) : (
+                              <span className="font-semibold text-green-600">Free</span>
+                            )}
+                          </div>
+                          <Badge 
+                            variant={attraction.passType === 'unlimited' ? 'default' : 'secondary'}
+                            className="text-xs"
+                          >
+                            {attraction.passType === 'unlimited' ? 'Unlimited' : 
+                             attraction.passType === 'selective' ? 'Selective' : 'Both'}
+                          </Badge>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {totalItems === 0 && (
+              <div className="text-center py-12">
+                <p className="text-gray-500 mb-4">No attractions found matching your criteria</p>
+                <Button onClick={clearAllFilters} variant="outline">
+                  Clear All Filters
+                </Button>
+              </div>
+            )}
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="text-sm text-gray-600">
+                  Page {pageNumber} of {totalPages}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
+                    disabled={pageNumber === 1}
+                    className="px-3 py-2"
+                  >
+                    Previous
+                  </Button>
+                  
+                  {/* Page numbers */}
+                  <div className="flex items-center gap-1">
+                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                      let pageNum;
+                      if (totalPages <= 5) {
+                        pageNum = i + 1;
+                      } else if (pageNumber <= 3) {
+                        pageNum = i + 1;
+                      } else if (pageNumber >= totalPages - 2) {
+                        pageNum = totalPages - 4 + i;
+                      } else {
+                        pageNum = pageNumber - 2 + i;
+                      }
+                      
+                      return (
+                        <Button
+                          key={pageNum}
+                          variant={pageNumber === pageNum ? "default" : "outline"}
+                          onClick={() => setPageNumber(pageNum)}
+                          className="px-3 py-2 min-w-[40px]"
+                        >
+                          {pageNum}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                  
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.min(totalPages, pageNumber + 1))}
+                    disabled={pageNumber === totalPages}
+                    className="px-3 py-2"
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Filter Modal */}
+      {showMobileFilters && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowMobileFilters(false)} />
+          <div className="fixed inset-y-0 left-0 w-80 bg-white overflow-y-auto">
+            <FilterSidebar isMobile />
+          </div>
+        </div>
+      )}
+
+      {/* Enhanced Testimonials Section */}
+      <EnhancedTestimonials />
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CityCardsPage.tsx b/src/components/CityCardsPage.tsx
new file mode 100644
index 0000000..cda3a97
--- /dev/null
+++ b/src/components/CityCardsPage.tsx
@@ -0,0 +1,391 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Star, MapPin, Clock, CreditCard, Users, Shield, Smartphone, Check } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import SubNavbar from './SubNavbar';
+import { Footer } from './Footer';
+import { MobileAppSection } from './MobileAppSection';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { FAQPage } from './FAQPage';
+import { HowItWorks } from './HowItWorks';
+import { WhyChooseCityCards } from './WhyChooseCityCards';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface CityCardsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+export function CityCardsPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: CityCardsPageProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage="citycards"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Sub Navbar */}
+      <SubNavbar
+        activeTab="citycards"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      {/* Hero Section */}
+      <section className="relative pt-52 pb-20 overflow-hidden">
+        {/* Background gradient */}
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
+        
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            className="max-w-4xl mx-auto text-center"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
+              <span className="font-light">What Are</span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                City Cards?
+              </span>
+            </h1>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
+              CityCards are your all-in-one pass to explore cities like never before. Get access to top attractions, 
+              skip the lines, and save money while discovering amazing experiences.
+            </p>
+          </motion.div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
+        <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
+      </section>
+
+      {/* Get Your City Cards Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center mb-12"
+          >
+            <h2 className="font-merchant text-3xl mb-4">Get your City Cards</h2>
+            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
+              Choose from our range of passes designed for every type of traveler and every budget
+            </p>
+          </motion.div>
+
+          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+            {/* Selective Pass */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="relative flex"
+            >
+              <Card className="relative transition-all duration-300 cursor-pointer flex flex-col w-full border-gray-200 shadow-md hover:shadow-lg hover:border-primary/30">
+                <CardHeader className="text-center pb-6 pt-8 flex-shrink-0">
+                  <CardTitle className="font-poppins text-2xl font-bold mb-2 text-gray-900">
+                    SELECTIVE PASS
+                  </CardTitle>
+                  <CardDescription className="text-gray-600 mb-6 leading-relaxed font-poppins h-[48px] flex items-center justify-center">
+                    Perfect for travelers who want to explore selected attractions at their own pace with essential features.
+                  </CardDescription>
+                  
+                  {/* Pricing */}
+                  <div className="mb-6">
+                    <div className="flex items-baseline justify-center gap-2 mb-2">
+                      <span className="text-4xl font-bold text-gray-900">$59.99</span>
+                      <span className="text-gray-500 font-poppins">/ per person</span>
+                    </div>
+                    <div className="text-sm text-gray-500 font-poppins h-[20px]">
+                      <span className="line-through mr-2">$89.99</span>
+                      <span className="text-green-600 font-medium">Save 33%</span>
+                    </div>
+                  </div>
+                </CardHeader>
+                
+                <CardContent className="pt-0 flex flex-col flex-1">
+                  {/* Features List - Fixed Height */}
+                  <div className="space-y-3 mb-8 flex-1 min-h-[200px]">
+                    {[
+                      'Access to selected attractions',
+                      'Limited number of attractions per pass',
+                      'Flexible validity period',
+                      'Priority entry where available',
+                      'Mobile ticket delivery',
+                      'Standard customer support'
+                    ].map((feature, index) => (
+                      <div key={index} className="flex items-start gap-3">
+                        <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-sm text-gray-700 font-poppins leading-relaxed">{feature}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* CTA Button - Fixed at bottom */}
+                  <div className="mt-auto flex-shrink-0">
+                    <Button 
+                      className="w-full py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 bg-gray-900 hover:bg-primary text-white hover:shadow-lg font-poppins"
+                      onClick={onCheckoutClick}
+                    >
+                      PURCHASE NOW
+                    </Button>
+                    
+                    <p className="text-xs text-gray-500 text-center mt-4 font-poppins h-[32px] flex items-center justify-center">
+                      ✓ Free cancellation up to 24 hours • Instant delivery
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Unlimited Pass */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              className="relative flex"
+            >
+              <Card className="relative transition-all duration-300 cursor-pointer flex flex-col w-full ring-2 ring-primary shadow-xl">
+                
+                {/* Popular Badge */}
+                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
+                  <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-6 py-2 font-semibold shadow-lg">
+                    ⭐ Most Popular
+                  </Badge>
+                </div>
+
+                <CardHeader className="text-center pb-6 pt-8 flex-shrink-0">
+                  <CardTitle className="font-poppins text-2xl font-bold mb-2 text-gray-900">
+                    UNLIMITED CARD
+                  </CardTitle>
+                  <CardDescription className="text-gray-600 mb-6 leading-relaxed font-poppins h-[48px] flex items-center justify-center">
+                    The ultimate experience for adventure seekers who want unlimited access to all attractions with premium features.
+                  </CardDescription>
+                  
+                  {/* Pricing */}
+                  <div className="mb-6">
+                    <div className="flex items-baseline justify-center gap-2 mb-2">
+                      <span className="text-4xl font-bold text-gray-900">$89.99</span>
+                      <span className="text-gray-500 font-poppins">/ per person</span>
+                    </div>
+                    <div className="text-sm text-gray-500 font-poppins h-[20px]">
+                      <span className="line-through mr-2">$149.99</span>
+                      <span className="text-green-600 font-medium">Save 40%</span>
+                    </div>
+                  </div>
+                </CardHeader>
+                
+                <CardContent className="pt-0 flex flex-col flex-1">
+                  {/* Features List - Fixed Height */}
+                  <div className="space-y-3 mb-8 flex-1 min-h-[200px]">
+                    {[
+                      'Unlimited access to all attractions',
+                      'Time-limited validity (7 days)',
+                      'Skip-the-line access',
+                      'Expert guide inclusion',
+                      'Mobile app access',
+                      'Premium customer support'
+                    ].map((feature, index) => (
+                      <div key={index} className="flex items-start gap-3">
+                        <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-sm text-gray-700 font-poppins leading-relaxed">{feature}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* CTA Button - Fixed at bottom */}
+                  <div className="mt-auto flex-shrink-0">
+                    <Button 
+                      className="w-full py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white shadow-lg hover:shadow-xl font-poppins"
+                      onClick={onCheckoutClick}
+                    >
+                      PURCHASE NOW
+                    </Button>
+                    
+                    <p className="text-xs text-gray-500 text-center mt-4 font-poppins h-[32px] flex items-center justify-center">
+                      ✓ Free cancellation up to 24 hours • Instant delivery
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <HowItWorks />
+
+      {/* Why Choose CityCards Section */}
+      <WhyChooseCityCards />
+
+      {/* Benefits Section */}
+
+
+      {/* Ready to Explore Melbourne Section */}
+
+
+      {/* FAQ Section */}
+      <section className="py-16 bg-gray-50">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center mb-12"
+          >
+            <h2 className="font-merchant text-3xl mb-4">Frequently Asked Questions</h2>
+            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
+              Everything you need to know about CityCards
+            </p>
+          </motion.div>
+
+          <div className="max-w-3xl mx-auto">
+            <div className="space-y-4">
+              {[
+                {
+                  question: "How do CityCards work?",
+                  answer: "CityCards are digital passes that give you access to multiple attractions in a city. Simply download our app, activate your card, and show it at participating attractions for instant entry."
+                },
+                {
+                  question: "Can I use my CityCard for multiple days?",
+                  answer: "Yes! Depending on the pass you choose, CityCards can be valid for 1, 2, 3, 5, or 7 consecutive days from your first use."
+                },
+                {
+                  question: "What's included in an Unlimited Pass?",
+                  answer: "The Unlimited Pass includes access to all participating attractions in your chosen city, plus additional perks like discounts at restaurants and shops."
+                },
+                {
+                  question: "Do I need to book attractions in advance?",
+                  answer: "Most attractions allow walk-in access with your CityCard, but some popular attractions may require advance booking through our app to guarantee entry."
+                },
+                {
+                  question: "What if I don't use all my attractions?",
+                  answer: "There's no pressure to visit every attraction. Your CityCard gives you the flexibility to explore at your own pace and choose what interests you most."
+                }
+              ].map((faq, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
+                >
+                  <Card className="hover:shadow-md transition-shadow duration-300">
+                    <CardContent className="p-6">
+                      <h3 className="font-merchant text-lg mb-3">{faq.question}</h3>
+                      <p className="text-gray-600 font-poppins">{faq.answer}</p>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Mobile App Section */}
+      <MobileAppSection />
+
+      {/* Customer Reviews */}
+      <EnhancedTestimonials />
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CitySubmenu.tsx b/src/components/CitySubmenu.tsx
new file mode 100644
index 0000000..55839a8
--- /dev/null
+++ b/src/components/CitySubmenu.tsx
@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+
+interface CitySubmenuProps {
+  onClose: () => void;
+  currentPage?: string;
+  onHomeClick?: () => void;
+  onMelbourneClick?: () => void;
+  onAttractionsClick?: () => void;
+  onPassesClick?: () => void;
+  onBlogsClick?: () => void;
+  onHowItWorksClick?: () => void;
+}
+
+interface SubmenuItem {
+  id: string;
+  label: string;
+  isCity?: boolean;
+  action?: () => void;
+}
+
+export function CitySubmenu({ 
+  onClose,
+  currentPage, 
+  onHomeClick,
+  onMelbourneClick, 
+  onAttractionsClick, 
+  onPassesClick, 
+  onBlogsClick,
+  onHowItWorksClick
+}: CitySubmenuProps) {
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  // Handle scroll effects to match main navbar behavior
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY > 20;
+      setIsScrolled(scrolled);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const submenuItems: SubmenuItem[] = [
+    { 
+      id: 'melbourne', 
+      label: 'Melbourne', 
+      isCity: true,
+      action: () => {
+        onMelbourneClick?.();
+        onClose();
+      }
+    },
+    { 
+      id: 'attractions', 
+      label: 'Attractions',
+      action: () => {
+        onAttractionsClick?.();
+        onClose();
+      }
+    },
+
+    { 
+      id: 'buy-now', 
+      label: 'Buy Now',
+      action: () => {
+        onPassesClick?.();
+        onClose();
+      }
+    },
+    { 
+      id: 'blogs', 
+      label: 'Blogs',
+      action: () => {
+        onBlogsClick?.();
+        onClose();
+      }
+    },
+    { 
+      id: 'how-it-works', 
+      label: 'How It Works',
+      action: () => {
+        onHowItWorksClick?.();
+        onClose();
+      }
+    }
+  ];
+
+  // Update selection based on current page
+  useEffect(() => {
+    if (currentPage === 'melbourne') {
+      setSelectedItem('melbourne');
+    } else if (currentPage === 'attractions') {
+      setSelectedItem('attractions');
+    } else if (currentPage === 'blogs') {
+      setSelectedItem('blogs');
+    } else if (currentPage === 'how-it-works') {
+      setSelectedItem('how-it-works');
+    } else if (currentPage === 'passes') {
+      setSelectedItem('buy-now');
+    } else {
+      setSelectedItem(null);
+    }
+  }, [currentPage]);
+
+  const handleItemClick = (item: SubmenuItem) => {
+    if (item.isCity) {
+      setSelectedItem(item.id);
+    }
+    item.action?.();
+  };
+
+  const isItemActive = (item: SubmenuItem) => {
+    return (item.isCity && currentPage === 'melbourne' && item.id === 'melbourne') ||
+           (item.id === 'attractions' && currentPage === 'attractions') ||
+           (item.id === 'buy-now' && currentPage === 'passes') ||
+           (item.id === 'blogs' && currentPage === 'blogs') ||
+           (item.id === 'how-it-works' && currentPage === 'how-it-works');
+  };
+
+  return (
+    <>
+      {/* Desktop Submenu */}
+      <motion.div
+        className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ 
+          duration: 0.6, 
+          ease: [0.25, 0.1, 0.25, 1], 
+          delay: 0.4 
+        }}
+      >
+        <motion.div
+          className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
+          initial={{ scale: 0.9 }}
+          animate={{ 
+            scale: isScrolled ? 0.95 : 1,
+            y: isScrolled ? 2 : 0,
+            boxShadow: isScrolled 
+              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
+              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
+          }}
+          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <div className="flex items-center gap-1">
+            {submenuItems.map((item) => (
+              <motion.button
+                key={item.id}
+                onClick={() => handleItemClick(item)}
+                className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${
+                  isItemActive(item)
+                    ? 'bg-primary text-white shadow-md'
+                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
+                }`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {item.label}
+                
+                {/* Hover effect for non-active items */}
+                {!isItemActive(item) && (
+                  <motion.div
+                    className="absolute inset-0 bg-gray-800 rounded-full -z-10"
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    whileHover={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+      </motion.div>
+
+      {/* Mobile Submenu */}
+      <motion.div
+        className="fixed top-[100px] left-4 right-4 z-30 md:hidden"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ 
+          duration: 0.6, 
+          ease: [0.25, 0.1, 0.25, 1], 
+          delay: 0.4 
+        }}
+      >
+        <motion.div
+          className="bg-white rounded-2xl px-3 py-3 shadow-lg border border-gray-200"
+          initial={{ scale: 0.9 }}
+          animate={{ 
+            scale: isScrolled ? 0.95 : 1,
+            y: isScrolled ? 2 : 0,
+            boxShadow: isScrolled 
+              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
+              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
+          }}
+          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
+            {submenuItems.map((item) => (
+              <motion.button
+                key={item.id}
+                onClick={() => handleItemClick(item)}
+                className={`relative px-3 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-xl flex-shrink-0 ${
+                  isItemActive(item)
+                    ? 'bg-primary text-white shadow-md'
+                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
+                }`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {item.label}
+                
+                {/* Hover effect for non-active items */}
+                {!isItemActive(item) && (
+                  <motion.div
+                    className="absolute inset-0 bg-gray-800 rounded-xl -z-10"
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    whileHover={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+      </motion.div>
+
+      {/* Medium Screen Submenu */}
+      <motion.div
+        className="fixed top-[110px] left-1/2 transform -translate-x-1/2 z-30 hidden md:block lg:hidden"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ 
+          duration: 0.6, 
+          ease: [0.25, 0.1, 0.25, 1], 
+          delay: 0.4 
+        }}
+      >
+        <motion.div
+          className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
+          initial={{ scale: 0.9 }}
+          animate={{ 
+            scale: isScrolled ? 0.95 : 1,
+            y: isScrolled ? 2 : 0,
+            boxShadow: isScrolled 
+              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
+              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
+          }}
+          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <div className="flex items-center gap-1">
+            {submenuItems.map((item) => (
+              <motion.button
+                key={item.id}
+                onClick={() => handleItemClick(item)}
+                className={`relative px-4 py-2.5 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-full ${
+                  isItemActive(item)
+                    ? 'bg-primary text-white shadow-md'
+                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
+                }`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {item.label}
+                
+                {/* Hover effect for non-active items */}
+                {!isItemActive(item) && (
+                  <motion.div
+                    className="absolute inset-0 bg-gray-800 rounded-full -z-10"
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    whileHover={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+      </motion.div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ContactUsPage.tsx b/src/components/ContactUsPage.tsx
new file mode 100644
index 0000000..d8f9483
--- /dev/null
+++ b/src/components/ContactUsPage.tsx
@@ -0,0 +1,490 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { 
+  Mail, 
+  Phone, 
+  MessageCircle, 
+  HelpCircle, 
+  FileText, 
+  CreditCard,
+  Upload,
+  Send,
+  ChevronRight,
+  CheckCircle
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+
+interface ContactUsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onEsimsClick: () => void;
+  onHotelDiscountsClick: () => void;
+  currentPage?: string;
+  user?: { email: string; name: string } | null;
+}
+
+interface CommonQuestion {
+  id: string;
+  question: string;
+  category: string;
+  icon: typeof HelpCircle;
+  iconBgColor: string;
+}
+
+export function ContactUsPage({
+  onBackClick,
+  onHomeClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: ContactUsPageProps) {
+  const [formData, setFormData] = useState({
+    subject: '',
+    description: '',
+    email: user?.email || '',
+    phone: ''
+  });
+  const [fileName, setFileName] = useState<string>('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const commonQuestions: CommonQuestion[] = [
+    {
+      id: '1',
+      question: 'How to redeem passes?',
+      category: 'Guide',
+      icon: HelpCircle,
+      iconBgColor: 'bg-blue-100 text-blue-600'
+    },
+    {
+      id: '2',
+      question: 'Refund Policy',
+      category: 'Policy',
+      icon: FileText,
+      iconBgColor: 'bg-orange-100 text-orange-600'
+    },
+    {
+      id: '3',
+      question: 'Payment Issues',
+      category: 'Billing and Payments',
+      icon: CreditCard,
+      iconBgColor: 'bg-green-100 text-green-600'
+    },
+    {
+      id: '4',
+      question: 'Refund Policy',
+      category: 'Policy',
+      icon: FileText,
+      iconBgColor: 'bg-orange-100 text-orange-600'
+    },
+    {
+      id: '5',
+      question: 'How to redeem passes?',
+      category: 'Guide',
+      icon: HelpCircle,
+      iconBgColor: 'bg-blue-100 text-blue-600'
+    },
+    {
+      id: '6',
+      question: 'Payment Issues',
+      category: 'Billing and Payments',
+      icon: CreditCard,
+      iconBgColor: 'bg-green-100 text-green-600'
+    },
+    {
+      id: '7',
+      question: 'Refund Policy',
+      category: 'Policy',
+      icon: FileText,
+      iconBgColor: 'bg-orange-100 text-orange-600'
+    }
+  ];
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setFileName(file.name);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    // Simulate API call
+    setTimeout(() => {
+      setIsSubmitting(false);
+      setIsSubmitted(true);
+      
+      // Reset form after 3 seconds
+      setTimeout(() => {
+        setIsSubmitted(false);
+        setFormData({
+          subject: '',
+          description: '',
+          email: user?.email || '',
+          phone: ''
+        });
+        setFileName('');
+      }, 3000);
+    }, 1500);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage}
+        user={user}
+      />
+
+      {/* Hero Section */}
+      <section className="pt-32 pb-16 bg-gradient-to-br from-primary/5 via-white to-secondary/5">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center max-w-3xl mx-auto"
+          >
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-primary/10 rounded-full mb-6">
+              <MessageCircle className="w-10 h-10 text-primary" />
+            </div>
+            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl mb-4">
+              <span className="font-medium">Help &</span>{' '}
+              <span className="font-semibold text-primary">Support</span>
+            </h1>
+            <p className="font-poppins text-xl text-gray-600 font-normal">
+              Get assistance with your CityCards experience
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="grid lg:grid-cols-2 gap-12 max-w-7xl mx-auto">
+            
+            {/* Left Column - Common Questions */}
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <div className="mb-8">
+                <h2 className="font-merchant text-3xl md:text-4xl mb-3">
+                  <span className="font-medium">Common</span>{' '}
+                  <span className="font-semibold text-primary">Questions</span>
+                </h2>
+                <p className="font-poppins text-base text-gray-600 font-normal">
+                  Quick answers to frequently asked questions
+                </p>
+              </div>
+
+              <div className="space-y-4 mb-8">
+                {commonQuestions.map((question, index) => (
+                  <motion.div
+                    key={question.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, delay: 0.1 * index }}
+                  >
+                    <Card className="cursor-pointer hover:shadow-lg transition-all duration-300 group border-2 hover:border-primary/20">
+                      <CardContent className="p-5">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-4 flex-1">
+                            <div className={`w-12 h-12 rounded-full ${question.iconBgColor} flex items-center justify-center flex-shrink-0`}>
+                              <question.icon className="w-6 h-6" />
+                            </div>
+                            <div className="flex-1">
+                              <h3 className="font-poppins font-medium text-base mb-1">
+                                {question.question}
+                              </h3>
+                              <p className="font-poppins text-sm text-gray-500 font-normal">
+                                {question.category}
+                              </p>
+                            </div>
+                          </div>
+                          <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-primary transition-colors" />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button
+                  onClick={onFAQClick}
+                  className="flex-1 h-14 font-poppins font-semibold bg-primary hover:bg-primary/90"
+                >
+                  Browse FAQ
+                </Button>
+              </div>
+            </motion.div>
+
+            {/* Right Column - Support Form */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+            >
+              <Card className="shadow-xl border-2">
+                <CardHeader className="border-b bg-gray-50/50">
+                  <CardTitle className="font-merchant text-2xl font-semibold">
+                    Contact Support
+                  </CardTitle>
+                  <p className="font-poppins text-sm text-gray-600 font-normal mt-2">
+                    Need help? We're here for you. Raise a ticket and our support team will get back to you shortly
+                  </p>
+                </CardHeader>
+                <CardContent className="p-6">
+                  {isSubmitted ? (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.9 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      className="text-center py-12"
+                    >
+                      <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <CheckCircle className="w-10 h-10 text-green-600" />
+                      </div>
+                      <h3 className="font-merchant text-2xl font-semibold mb-2">
+                        Ticket Submitted!
+                      </h3>
+                      <p className="font-poppins text-base text-gray-600 font-normal">
+                        We'll get back to you shortly
+                      </p>
+                    </motion.div>
+                  ) : (
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                      {/* Subject */}
+                      <div>
+                        <Label className="font-poppins font-normal text-base mb-2 block">
+                          Subject
+                        </Label>
+                        <Input
+                          type="text"
+                          placeholder="Enter Subject"
+                          value={formData.subject}
+                          onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                          required
+                          className="h-12 font-poppins font-normal"
+                        />
+                      </div>
+
+                      {/* Description */}
+                      <div>
+                        <Label className="font-poppins font-normal text-base mb-2 block">
+                          Description
+                        </Label>
+                        <Textarea
+                          placeholder="Enter Description"
+                          value={formData.description}
+                          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                          required
+                          rows={6}
+                          className="font-poppins font-normal resize-none"
+                        />
+                      </div>
+
+                      {/* File Upload */}
+                      <div>
+                        <Label className="font-poppins font-normal text-base mb-2 block">
+                          File upload
+                        </Label>
+                        <div className="relative">
+                          <Input
+                            type="file"
+                            onChange={handleFileChange}
+                            className="hidden"
+                            id="file-upload"
+                            accept="image/*,.pdf,.doc,.docx"
+                          />
+                          <label
+                            htmlFor="file-upload"
+                            className="flex items-center justify-between h-12 px-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors bg-white"
+                          >
+                            <span className="font-poppins font-normal text-base text-gray-500">
+                              {fileName || 'Upload File'}
+                            </span>
+                            <Upload className="w-5 h-5 text-gray-400" />
+                          </label>
+                        </div>
+                      </div>
+
+                      {/* Contact Details */}
+                      <div className="pt-4 border-t">
+                        <h3 className="font-merchant text-xl font-semibold mb-4">
+                          Contact Details
+                        </h3>
+                        
+                        <div className="space-y-4">
+                          {/* Email */}
+                          <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
+                            <Mail className="w-5 h-5 text-primary flex-shrink-0" />
+                            <div className="flex-1">
+                              <p className="font-poppins text-sm text-gray-500 font-normal mb-1">
+                                Email
+                              </p>
+                              {user ? (
+                                <p className="font-poppins font-medium text-base">
+                                  {user.email}
+                                </p>
+                              ) : (
+                                <Input
+                                  type="email"
+                                  placeholder="your.email@example.com"
+                                  value={formData.email}
+                                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                  required
+                                  className="h-10 font-poppins font-normal mt-1"
+                                />
+                              )}
+                            </div>
+                          </div>
+
+                          {/* Phone */}
+                          <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
+                            <Phone className="w-5 h-5 text-primary flex-shrink-0" />
+                            <div className="flex-1">
+                              <p className="font-poppins text-sm text-gray-500 font-normal mb-1">
+                                Phone
+                              </p>
+                              <Input
+                                type="tel"
+                                placeholder="(+971) 050 4245 564"
+                                value={formData.phone}
+                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                                className="h-10 font-poppins font-normal mt-1"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Submit Button */}
+                      <Button
+                        type="submit"
+                        disabled={isSubmitting}
+                        className="w-full h-14 font-poppins font-semibold bg-primary hover:bg-primary/90 text-lg"
+                      >
+                        {isSubmitting ? (
+                          <>
+                            <span className="animate-spin mr-2">⏳</span>
+                            Submitting...
+                          </>
+                        ) : (
+                          <>
+                            <Send className="w-5 h-5 mr-2" />
+                            Submit Ticket
+                          </>
+                        )}
+                      </Button>
+                    </form>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Additional Contact Info */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.5 }}
+                className="mt-6 p-6 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg"
+              >
+                <h3 className="font-merchant text-lg font-semibold mb-3">
+                  Other Ways to Reach Us
+                </h3>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <Mail className="w-5 h-5 text-primary" />
+                    <a href="mailto:support@citycards.com" className="font-poppins text-base font-normal hover:text-primary transition-colors">
+                      support@citycards.com
+                    </a>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Phone className="w-5 h-5 text-primary" />
+                    <a href="tel:+97105042455564" className="font-poppins text-base font-normal hover:text-primary transition-colors">
+                      (+971) 050 4245 564
+                    </a>
+                  </div>
+                </div>
+              </motion.div>
+            </motion.div>
+
+          </div>
+        </div>
+      </section>
+
+      <Footer
+        onHomeClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onContactUsClick={() => {}}
+      />
+    </div>
+  );
+}
diff --git a/src/components/CreateMagicItineraryPage.tsx b/src/components/CreateMagicItineraryPage.tsx
new file mode 100644
index 0000000..71c5f21
--- /dev/null
+++ b/src/components/CreateMagicItineraryPage.tsx
@@ -0,0 +1,1450 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  ArrowLeft, 
+  ArrowRight, 
+  MapPin, 
+  Sparkles, 
+  CheckCircle,
+  X,
+  Clock,
+  Calendar,
+  Users,
+  Star,
+  Search,
+  Navigation,
+  Heart,
+  Sun,
+  ChevronDown,
+  ChevronUp
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import { Progress } from './ui/progress';
+import { Calendar as CalendarComponent } from './ui/calendar';
+import { Input } from './ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface CreateMagicItineraryPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+interface ItineraryData {
+  destination: string;
+  locationSearch: string;
+  startDate: Date | undefined;
+  endDate: Date | undefined;
+  energy: string;
+  withKids: boolean;
+  museums: boolean;
+  scenicSpots: boolean;
+  culturalSites: boolean;
+  wildlife: boolean;
+  dietaryPreferences: string[];
+  nightlife: boolean;
+  shopping: boolean;
+}
+
+const destinations = [
+  { 
+    id: 'melbourne', 
+    name: 'Melbourne', 
+    country: 'Australia', 
+    image: 'https://images.unsplash.com/photo-1595434971780-79d5c20c5090?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBza3lsaW5lJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1ODk2MzkxOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+  },
+  { 
+    id: 'sydney', 
+    name: 'Sydney', 
+    country: 'Australia', 
+    image: 'https://images.unsplash.com/photo-1595563382617-fe6fa4fd0394?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1ODk2MzkyMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+  },
+  { 
+    id: 'brisbane', 
+    name: 'Brisbane', 
+    country: 'Australia', 
+    image: 'https://images.unsplash.com/photo-1729904987421-12490733e013?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxicmlzYmFuZSUyMGNpdHklMjByaXZlciUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTg5NjM5Mjd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+  }
+];
+
+const energyOptions = [
+  { 
+    id: 'adventurous', 
+    name: 'Adventurous',
+    description: 'High energy activities and exploration',
+    image: 'https://images.unsplash.com/photo-1587502537147-2ba64a62e3d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBvdXRkb29yJTIwaGlraW5nfGVufDF8fHx8MTc1ODk2NDQ2N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+  },
+  { 
+    id: 'relaxed', 
+    name: 'Relaxed',
+    description: 'Peaceful and laid-back experiences',
+    image: 'https://images.unsplash.com/photo-1716893933701-73d59789bba7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHxyZWxheGVkJTIwc3BhJTIwcGVhY2VmdWx8ZW58MXx8fHwxNzU4OTY0NDcxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+  }
+];
+
+const questionImages = {
+  museums: 'https://images.unsplash.com/photo-1747918157024-a1e1c77336fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBhcnQlMjBnYWxsZXJ5fGVufDF8fHx8MTc1ODkwOTYwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+  scenicSpots: 'https://images.unsplash.com/photo-1583994153242-578c3566477e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzY2VuaWMlMjB2aWV3cG9pbnQlMjBwaG90byUyMHNwb3RzfGVufDF8fHx8MTc1ODk2NDQ3OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+  culturalSites: 'https://images.unsplash.com/photo-1713711188046-c716c9de586a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjdWx0dXJhbCUyMGxhbmRtYXJrcyUyMGhpc3RvcmljYWwlMjBzaXRlc3xlbnwxfHx8fDE3NTg5NjQ0MjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+  wildlife: 'https://images.unsplash.com/photo-1679546397515-b914d6601234?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aWxkbGlmZSUyMGFuaW1hbHMlMjBzYWZhcml8ZW58MXx8fHwxNzU4OTY0NDg3fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+  nightlife: 'https://images.unsplash.com/photo-1758383200442-3c013f13473c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuaWdodGxpZmUlMjBiYXJzJTIwZXZlbmluZyUyMGNpdHl8ZW58MXx8fHwxNzU4OTY0NDkxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+  shopping: 'https://images.unsplash.com/photo-1728889853414-3782d56aa563?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHN0b3Jlc3xlbnwxfHx8fDE3NTg5NjQ0OTZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+};
+
+const dietaryOptions = ['Vegetarian', 'Gluten Free', 'Halal', 'Sugar-Free'];
+
+export function CreateMagicItineraryPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: CreateMagicItineraryPageProps) {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily');
+  const [itineraryData, setItineraryData] = useState<ItineraryData>({
+    destination: '',
+    locationSearch: '',
+    startDate: undefined,
+    endDate: undefined,
+    energy: '',
+    withKids: false,
+    museums: false,
+    scenicSpots: false,
+    culturalSites: false,
+    wildlife: false,
+    dietaryPreferences: [],
+    nightlife: false,
+    shopping: false
+  });
+
+  const [generatedItinerary, setGeneratedItinerary] = useState<any>(null);
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+  const [openDays, setOpenDays] = useState<Set<number>>(new Set([1])); // First day open by default
+  const [selectedActivity, setSelectedActivity] = useState<string | null>(null);
+
+  const toggleFavorite = (activityKey: string) => {
+    setFavorites(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(activityKey)) {
+        newSet.delete(activityKey);
+      } else {
+        newSet.add(activityKey);
+      }
+      return newSet;
+    });
+  };
+
+  const toggleDay = (dayNumber: number) => {
+    setOpenDays(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(dayNumber)) {
+        newSet.delete(dayNumber);
+      } else {
+        newSet.add(dayNumber);
+      }
+      return newSet;
+    });
+  };
+
+  const handleActivityClick = (activityKey: string) => {
+    setSelectedActivity(selectedActivity === activityKey ? null : activityKey);
+  };
+
+  const totalSteps = 4;
+  const progress = (currentStep / totalSteps) * 100;
+
+  const handleNext = () => {
+    if (currentStep < totalSteps) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      generateItinerary();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const generateItinerary = async () => {
+    setIsGenerating(true);
+    
+    // Simulate API call with realistic delay
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    
+    // Generate mock itinerary based on selections
+    const selectedDestination = destinations.find(d => d.id === itineraryData.destination);
+    const totalDays = itineraryData.startDate && itineraryData.endDate 
+      ? Math.ceil((itineraryData.endDate.getTime() - itineraryData.startDate.getTime()) / (1000 * 60 * 60 * 24))
+      : 3;
+    
+    const generateDailyPlans = () => {
+      const plans = [];
+      
+      // Enhanced activity templates with images and details
+      const activityTemplates = [
+        {
+          time: '8:00 am',
+          activity: 'Luxury Hotel Check-in',
+          location: 'The Grand Hotel',
+          address: '123 Main Street, City Center',
+          image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&h=600&fit=crop',
+          categories: ['Accommodation', 'Luxury'],
+          description: [
+            'Check-in at luxury downtown hotel',
+            'Enjoy welcome amenities',
+            'Explore hotel facilities',
+            'Settle into your room'
+          ]
+        },
+        {
+          time: '10:00 am',
+          activity: 'City Landmark Visit',
+          location: 'Historic City Square',
+          address: 'Central Plaza, Downtown District',
+          image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=800&h=600&fit=crop',
+          categories: ['Culture', 'Landmark', 'Sightseeing'],
+          description: [
+            'Explore the city\'s historic heart',
+            'Learn about local history',
+            'Take memorable photos',
+            'Visit nearby attractions'
+          ]
+        },
+        {
+          time: '12:00 pm',
+          activity: 'Local Cuisine Experience',
+          location: 'Artisan Cafe & Restaurant',
+          address: '45 Food Street, Culinary Quarter',
+          image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop',
+          categories: ['Food', 'Drinks', 'Culture'],
+          description: [
+            'Taste authentic local dishes',
+            'Try specialty coffee or tea',
+            'Experience local food culture',
+            'Browse artisan food products'
+          ]
+        },
+        {
+          time: '2:00 pm',
+          activity: 'Botanical Gardens',
+          location: 'Royal Gardens',
+          address: 'Garden Avenue, Green District',
+          image: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=800&h=600&fit=crop',
+          categories: ['Nature', 'Relaxation'],
+          description: [
+            'Stroll through beautiful gardens',
+            'Discover native plant species',
+            'Relax in peaceful surroundings',
+            'Capture stunning nature photography'
+          ]
+        },
+        {
+          time: '4:00 pm',
+          activity: 'Art Gallery Visit',
+          location: 'Contemporary Art Museum',
+          address: '78 Arts Avenue, Cultural District',
+          image: 'https://images.unsplash.com/photo-1564399577149-749794d74eee?w=800&h=600&fit=crop',
+          categories: ['Culture', 'Art', 'Museum'],
+          description: [
+            'View contemporary art collections',
+            'Attend guided exhibitions',
+            'Visit the museum shop',
+            'Enjoy cultural experiences'
+          ]
+        },
+        {
+          time: '7:00 pm',
+          activity: 'Sunset Dinner',
+          location: 'Rooftop Restaurant',
+          address: '99 Sky Tower, City Heights',
+          image: 'https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop',
+          categories: ['Food', 'Drinks', 'Luxury'],
+          description: [
+            'Fine dining experience',
+            'Panoramic city views',
+            'Signature cocktails',
+            'Memorable sunset atmosphere'
+          ]
+        }
+      ];
+
+      for (let i = 0; i < totalDays; i++) {
+        const currentDate = new Date(itineraryData.startDate!);
+        currentDate.setDate(currentDate.getDate() + i);
+        
+        plans.push({
+          day: i + 1,
+          date: currentDate.toLocaleDateString('en-US', { 
+            weekday: 'long', 
+            year: 'numeric', 
+            month: 'long', 
+            day: 'numeric' 
+          }),
+          title: i === 0 ? `Welcome to ${selectedDestination?.name}` : 
+                 i === totalDays - 1 ? 'Farewell Day' : 
+                 `Day ${i + 1} Exploration`,
+          activities: activityTemplates.slice(0, 5).map((template, idx) => ({
+            ...template,
+            // Vary times slightly for different days
+            time: template.time
+          }))
+        });
+      }
+      return plans;
+    };
+
+    const mockItinerary = {
+      destination: {
+        ...selectedDestination,
+        weather: '22°C, Sunny'
+      },
+      totalDays: totalDays,
+      dailyPlans: generateDailyPlans(),
+      estimatedCost: `${totalDays * 280}`,
+      includedActivities: totalDays * 5
+    };
+    
+    setGeneratedItinerary(mockItinerary);
+    setIsGenerating(false);
+    setShowResults(true);
+  };
+
+  const canProceed = () => {
+    switch (currentStep) {
+      case 1: return itineraryData.destination !== '' && itineraryData.startDate && itineraryData.endDate;
+      case 2: return itineraryData.energy !== '';
+      case 3: return true; // Kids and dietary questions always allow proceeding
+      case 4: return true; // Optional preference questions
+      default: return true;
+    }
+  };
+
+  const handleDietaryToggle = (option: string) => {
+    setItineraryData(prev => ({
+      ...prev,
+      dietaryPreferences: prev.dietaryPreferences.includes(option)
+        ? prev.dietaryPreferences.filter(item => item !== option)
+        : [...prev.dietaryPreferences, option]
+    }));
+  };
+
+  const renderStepper = () => (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex items-center justify-between max-w-4xl mx-auto">
+        {Array.from({ length: totalSteps }, (_, index) => {
+          const stepNumber = index + 1;
+          const isActive = stepNumber === currentStep;
+          const isCompleted = stepNumber < currentStep;
+          
+          return (
+            <div key={stepNumber} className="flex items-center">
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all ${
+                  isCompleted
+                    ? 'bg-primary border-primary text-white'
+                    : isActive
+                    ? 'border-primary text-primary bg-white'
+                    : 'border-gray-300 text-gray-400 bg-white'
+                }`}
+              >
+                {isCompleted ? (
+                  <CheckCircle className="w-4 h-4" />
+                ) : (
+                  <span className="text-sm font-medium">{stepNumber}</span>
+                )}
+              </div>
+              {stepNumber < totalSteps && (
+                <div
+                  className={`w-12 h-0.5 mx-2 transition-colors ${
+                    isCompleted ? 'bg-primary' : 'bg-gray-300'
+                  }`}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  const renderStep = () => {
+    if (isGenerating) {
+      return (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="text-center space-y-8 py-20"
+        >
+          <div className="relative">
+            <motion.div
+              animate={{ rotate: 360 }}
+              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+              className="w-16 h-16 mx-auto"
+            >
+              <Sparkles className="w-16 h-16 text-primary" />
+            </motion.div>
+          </div>
+
+          <div className="space-y-4">
+            <h2 className="font-light">Creating your</h2>
+            <h2 className="font-bold text-primary italic">Magic Itinerary</h2>
+            <p className="text-muted-foreground max-w-md mx-auto">
+              Our AI is analyzing your preferences and crafting the perfect travel experience...
+            </p>
+          </div>
+
+          <div className="max-w-xs mx-auto">
+            <Progress value={66} className="w-full" />
+          </div>
+        </motion.div>
+      );
+    }
+
+    if (showResults) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="space-y-8"
+        >
+          <div className="text-center space-y-4">
+            <div className="flex items-center justify-center gap-2 text-primary">
+              <Star className="w-6 h-6 fill-current" />
+              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight">
+                <span className="font-light">Your</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Magic Itinerary</span>
+              </h1>
+              <Star className="w-6 h-6 fill-current" />
+            </div>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+              Here's your personalized {generatedItinerary?.totalDays}-day adventure in {generatedItinerary?.destination?.name}!
+            </p>
+          </div>
+
+          {/* View Toggle */}
+          <div className="flex justify-center">
+            <div className="bg-muted p-1 rounded-lg">
+              <Button
+                variant={viewMode === 'daily' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setViewMode('daily')}
+                className="rounded-md font-poppins font-medium"
+              >
+                Daily View
+              </Button>
+              <Button
+                variant={viewMode === 'summary' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setViewMode('summary')}
+                className="rounded-md font-poppins font-medium"
+              >
+                Summary
+              </Button>
+            </div>
+          </div>
+
+          <div className="max-w-6xl mx-auto space-y-8">
+            {/* Itinerary Overview */}
+            <Card className="p-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="text-center">
+                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.totalDays}</div>
+                  <div className="font-poppins text-sm text-muted-foreground font-normal">Days</div>
+                </div>
+                <div className="text-center">
+                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.includedActivities}</div>
+                  <div className="font-poppins text-sm text-muted-foreground font-normal">Activities</div>
+                </div>
+                <div className="text-center">
+                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.estimatedCost}</div>
+                  <div className="font-poppins text-sm text-muted-foreground font-normal">Estimated Cost</div>
+                </div>
+              </div>
+            </Card>
+
+            {/* Daily Plans - Enhanced View */}
+            {viewMode === 'daily' && (
+              <div className="space-y-8">
+                {/* Location Header with Weather - Show Once */}
+                <motion.div
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.6, delay: 0.3 }}
+                  className="bg-gray-50 rounded-2xl p-6 shadow-sm border border-gray-200"
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h2 className="font-merchant text-3xl md:text-4xl leading-tight mb-2">
+                        {generatedItinerary?.destination?.name}, {generatedItinerary?.destination?.country}
+                      </h2>
+                      <p className="font-poppins text-base text-primary font-medium">{generatedItinerary?.destination?.weather}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Sun className="w-10 h-10 text-amber-500" />
+                    </div>
+                  </div>
+                </motion.div>
+
+                {/* Days Loop */}
+                {generatedItinerary?.dailyPlans?.map((day: any, dayIndex: number) => (
+                  <div key={dayIndex} className="space-y-6">
+                    {/* Day Header */}
+                    <motion.div
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.6, delay: 0.4 + dayIndex * 0.1 }}
+                      className="flex items-center gap-4 pl-2"
+                    >
+                      <div className="bg-gradient-to-br from-primary to-secondary text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg">
+                        <span className="font-merchant text-2xl font-semibold">{day.day}</span>
+                      </div>
+                      <div>
+                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">Day {day.day}</h3>
+                        <p className="font-poppins text-base text-muted-foreground font-normal">{day.title}</p>
+                      </div>
+                    </motion.div>
+
+                    {/* GMT Label */}
+                    <div className="pl-2">
+                      <p className="font-poppins text-sm text-gray-500 font-normal">GMT</p>
+                    </div>
+
+                    {/* Activity Cards - Desktop Grid Layout with Timeline */}
+                    <div className="relative space-y-8">
+                      {/* Timeline Line */}
+                      <div className="absolute left-12 top-0 bottom-0 w-px bg-gray-200 hidden md:block" style={{ height: 'calc(100% - 2rem)' }} />
+                      
+                      {day.activities?.map((activity: any, actIndex: number) => {
+                        const activityKey = `day${day.day}-act${actIndex}`;
+                        const isFavorite = favorites.has(activityKey);
+
+                        return (
+                          <motion.div
+                            key={actIndex}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5, delay: 0.5 + dayIndex * 0.1 + actIndex * 0.05 }}
+                            className="flex flex-col md:flex-row gap-6 relative"
+                          >
+                            {/* Time Column with Timeline Connector */}
+                            <div className="flex-shrink-0 md:w-24 pt-2 relative z-10">
+                              <div className="font-poppins text-base font-medium text-gray-700 bg-white pr-4">
+                                {activity.time}
+                              </div>
+                              {/* Timeline Dot */}
+                              <div className="hidden md:block absolute right-0 top-3 w-2 h-2 bg-primary rounded-full" style={{ transform: 'translateX(50%)' }} />
+                            </div>
+
+                            {/* Activity Card */}
+                            <div className="flex-1">
+                              <Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 border-2 border-gray-100">
+                                <CardContent className="p-0">
+                                  {/* Hero Image with Overlay Buttons */}
+                                  <div className="relative h-64 md:h-72 bg-gray-200">
+                                    <ImageWithFallback
+                                      src={activity.image}
+                                      alt={activity.activity}
+                                      className="w-full h-full object-cover"
+                                    />
+                                    
+                                    {/* Favorite Heart Button - Top Right */}
+                                    <div className="absolute top-4 right-4">
+                                      <Button
+                                        size="icon"
+                                        variant="secondary"
+                                        className="bg-white/95 hover:bg-white shadow-lg backdrop-blur-sm rounded-full w-12 h-12"
+                                        onClick={() => toggleFavorite(activityKey)}
+                                      >
+                                        <Heart className={`w-5 h-5 ${isFavorite ? 'fill-primary text-primary' : 'text-gray-700'}`} />
+                                      </Button>
+                                    </div>
+
+                                    {/* Get Directions Button - Bottom Left */}
+                                    <div className="absolute bottom-4 left-4">
+                                      <Button 
+                                        className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold shadow-lg px-6 py-3 rounded-xl"
+                                      >
+                                        <Navigation className="w-4 h-4 mr-2" />
+                                        Get Directions
+                                      </Button>
+                                    </div>
+                                  </div>
+
+                                  {/* Content Section */}
+                                  <div className="p-6 space-y-4">
+                                    {/* Location Name & Address */}
+                                    <div className="space-y-2">
+                                      <h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
+                                        {activity.activity}
+                                      </h4>
+                                      <div className="flex items-start gap-2 text-gray-600">
+                                        <MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-primary" />
+                                        <span className="font-poppins text-sm font-normal leading-relaxed">{activity.address}</span>
+                                      </div>
+                                    </div>
+
+                                    {/* Category Badges */}
+                                    <div className="flex flex-wrap gap-2">
+                                      {activity.categories?.map((category: string, catIndex: number) => (
+                                        <Badge 
+                                          key={catIndex} 
+                                          variant="secondary"
+                                          className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
+                                        >
+                                          {category}
+                                        </Badge>
+                                      ))}
+                                    </div>
+
+                                    {/* Activity Details - Bullet Points */}
+                                    <div className="space-y-2 pt-2">
+                                      {activity.description?.map((detail: string, detailIndex: number) => (
+                                        <div key={detailIndex} className="flex items-start gap-3">
+                                          <span className="text-primary font-semibold mt-1.5 flex-shrink-0">•</span>
+                                          <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">{detail}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </CardContent>
+                              </Card>
+                            </div>
+                          </motion.div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Summary View */}
+            {viewMode === 'summary' && (
+              <div className="space-y-4">
+                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">Trip Summary</h3>
+                <div className="space-y-4">
+                  {generatedItinerary?.dailyPlans?.map((day: any, dayIndex: number) => {
+                    const isDayOpen = openDays.has(day.day);
+                    
+                    return (
+                      <Collapsible
+                        key={dayIndex}
+                        open={isDayOpen}
+                        onOpenChange={() => toggleDay(day.day)}
+                      >
+                        <Card className="overflow-hidden border-2 border-gray-200">
+                          <CollapsibleTrigger className="w-full">
+                            <div className="flex items-center justify-between p-4 bg-gradient-to-r from-primary/5 to-transparent hover:from-primary/10 transition-colors cursor-pointer">
+                              <div className="flex items-center gap-3">
+                                <div className="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center font-merchant font-semibold">
+                                  {day.day}
+                                </div>
+                                <div className="text-left">
+                                  <h4 className="font-merchant text-lg font-semibold text-gray-900">
+                                    Day {day.day}
+                                  </h4>
+                                  <p className="font-poppins text-sm text-gray-500 font-normal">
+                                    {day.date}
+                                  </p>
+                                </div>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <Badge variant="secondary" className="font-poppins font-normal bg-primary/10 text-primary">
+                                  {day.activities?.length || 0} activities
+                                </Badge>
+                                {isDayOpen ? (
+                                  <ChevronUp className="w-5 h-5 text-gray-500" />
+                                ) : (
+                                  <ChevronDown className="w-5 h-5 text-gray-500" />
+                                )}
+                              </div>
+                            </div>
+                          </CollapsibleTrigger>
+                          
+                          <CollapsibleContent>
+                            <div className="p-4 space-y-2 bg-white">
+                              {day.activities?.map((activity: any, actIndex: number) => {
+                                const activityKey = `summary-day${day.day}-act${actIndex}`;
+                                const isSelected = selectedActivity === activityKey;
+                                
+                                return (
+                                  <div
+                                    key={actIndex}
+                                    className="border border-gray-200 rounded-lg overflow-hidden hover:border-primary/50 transition-all duration-200"
+                                  >
+                                    <div
+                                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition-colors"
+                                      onClick={() => handleActivityClick(activityKey)}
+                                    >
+                                      <div className="flex items-center gap-3 flex-1">
+                                        <div className="flex items-center gap-2 text-primary min-w-[80px]">
+                                          <Clock className="w-4 h-4" />
+                                          <span className="font-poppins text-sm font-medium">{activity.time}</span>
+                                        </div>
+                                        <div className="flex-1">
+                                          <p className="font-poppins font-medium text-gray-900">{activity.activity}</p>
+                                        </div>
+                                      </div>
+                                      {isSelected ? (
+                                        <ChevronUp className="w-4 h-4 text-gray-400" />
+                                      ) : (
+                                        <ChevronDown className="w-4 h-4 text-gray-400" />
+                                      )}
+                                    </div>
+                                    
+                                    <AnimatePresence>
+                                      {isSelected && (
+                                        <motion.div
+                                          initial={{ height: 0, opacity: 0 }}
+                                          animate={{ height: 'auto', opacity: 1 }}
+                                          exit={{ height: 0, opacity: 0 }}
+                                          transition={{ duration: 0.3, ease: 'easeInOut' }}
+                                          className="border-t border-gray-200 bg-gray-50"
+                                        >
+                                          <div className="p-4 space-y-3">
+                                            {/* Activity Details */}
+                                            <div className="space-y-2">
+                                              {activity.description?.map((detail: string, detailIndex: number) => (
+                                                <div key={detailIndex} className="flex items-start gap-2">
+                                                  <span className="text-primary font-semibold mt-1 flex-shrink-0">•</span>
+                                                  <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
+                                                    {detail}
+                                                  </span>
+                                                </div>
+                                              ))}
+                                            </div>
+                                            
+                                            {/* Get Directions Button */}
+                                            <div className="pt-2">
+                                              <Button 
+                                                className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold w-full"
+                                                size="sm"
+                                              >
+                                                <Navigation className="w-4 h-4 mr-2" />
+                                                Get Directions
+                                              </Button>
+                                            </div>
+                                          </div>
+                                        </motion.div>
+                                      )}
+                                    </AnimatePresence>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </CollapsibleContent>
+                        </Card>
+                      </Collapsible>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-8">
+              <Button
+                variant="outline"
+                onClick={() => setShowResults(false)}
+                className="font-poppins font-medium px-8 py-3 text-lg"
+              >
+                <Heart className="w-5 h-5 mr-2" />
+                Create Another
+              </Button>
+              <Button
+                className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg"
+              >
+                Save Itinerary
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      );
+    }
+
+    switch (currentStep) {
+      case 1:
+        return (
+          <motion.div
+            key="step1"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-12"
+          >
+            {/* Where are you visiting section */}
+            <div className="space-y-6">
+              <div className="text-center space-y-2">
+                <h2 className="font-merchant text-2xl leading-tight">
+                  <span className="font-light">Where are you</span>{' '}
+                  <span className="font-bold text-primary italic">visiting?</span>
+                </h2>
+              </div>
+
+              {/* Location Search */}
+              <div className="max-w-md mx-auto space-y-4">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    placeholder="Search destinations..."
+                    value={itineraryData.locationSearch}
+                    onChange={(e) => setItineraryData(prev => ({ ...prev, locationSearch: e.target.value }))}
+                    className="pl-10 h-12 text-center"
+                  />
+                </div>
+
+                {/* Popular Destinations */}
+                <div className="grid grid-cols-1 gap-3">
+                  {destinations
+                    .filter(dest => 
+                      itineraryData.locationSearch === '' || 
+                      dest.name.toLowerCase().includes(itineraryData.locationSearch.toLowerCase()) ||
+                      dest.country.toLowerCase().includes(itineraryData.locationSearch.toLowerCase())
+                    )
+                    .map((destination) => (
+                    <motion.div
+                      key={destination.id}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <Card
+                        className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center px-4 ${
+                          itineraryData.destination === destination.id
+                            ? 'border-primary bg-primary text-white'
+                            : 'border-gray-200 hover:border-primary/40'
+                        }`}
+                        onClick={() => setItineraryData(prev => ({ ...prev, destination: destination.id, locationSearch: destination.name }))}
+                      >
+                        <div className="flex items-center gap-3 w-full">
+                          <MapPin className={`w-5 h-5 ${
+                            itineraryData.destination === destination.id ? 'text-white' : 'text-gray-400'
+                          }`} />
+                          <div className="flex-1 text-left">
+                            <h3 className={`font-semibold ${
+                              itineraryData.destination === destination.id ? 'text-white' : 'text-gray-800'
+                            }`}>
+                              {destination.name}
+                            </h3>
+                            <p className={`text-sm ${
+                              itineraryData.destination === destination.id ? 'text-white/80' : 'text-gray-500'
+                            }`}>
+                              {destination.country}
+                            </p>
+                          </div>
+                        </div>
+                      </Card>
+                    </motion.div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* When are you visiting section */}
+            <div className="space-y-6">
+              <div className="text-center space-y-2">
+                <h2 className="text-2xl font-light">When are you</h2>
+                <h2 className="text-2xl font-bold text-primary italic">visiting?</h2>
+              </div>
+
+              <div className="max-w-2xl mx-auto">
+                <Card className="p-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* Start Date */}
+                    <div className="space-y-3">
+                      <label className="block font-medium text-center">Check-in Date</label>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            className={`w-full h-12 justify-start text-left font-normal ${
+                              !itineraryData.startDate && "text-muted-foreground"
+                            }`}
+                          >
+                            <Calendar className="mr-2 h-4 w-4" />
+                            {itineraryData.startDate ? (
+                              itineraryData.startDate.toLocaleDateString()
+                            ) : (
+                              "Select start date"
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <CalendarComponent
+                            mode="single"
+                            selected={itineraryData.startDate}
+                            onSelect={(date) => setItineraryData(prev => ({ ...prev, startDate: date }))}
+                            disabled={(date) => date < new Date()}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* End Date */}
+                    <div className="space-y-3">
+                      <label className="block font-medium text-center">Check-out Date</label>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            className={`w-full h-12 justify-start text-left font-normal ${
+                              !itineraryData.endDate && "text-muted-foreground"
+                            }`}
+                          >
+                            <Calendar className="mr-2 h-4 w-4" />
+                            {itineraryData.endDate ? (
+                              itineraryData.endDate.toLocaleDateString()
+                            ) : (
+                              "Select end date"
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <CalendarComponent
+                            mode="single"
+                            selected={itineraryData.endDate}
+                            onSelect={(date) => setItineraryData(prev => ({ ...prev, endDate: date }))}
+                            disabled={(date) => date < (itineraryData.startDate || new Date())}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+
+                  {/* Date Summary */}
+                  {itineraryData.startDate && itineraryData.endDate && (
+                    <div className="mt-6 p-4 bg-primary/5 rounded-lg border border-primary/20">
+                      <div className="text-center">
+                        <p className="font-medium text-primary">
+                          {Math.ceil((itineraryData.endDate.getTime() - itineraryData.startDate.getTime()) / (1000 * 60 * 60 * 24))} days
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {itineraryData.startDate.toLocaleDateString()} - {itineraryData.endDate.toLocaleDateString()}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </Card>
+              </div>
+            </div>
+          </motion.div>
+        );
+
+      case 2:
+        return (
+          <motion.div
+            key="step2"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-12"
+          >
+            {/* Energy Question */}
+            <div className="space-y-6">
+              <div className="text-center space-y-2">
+                <h2 className="font-merchant text-2xl leading-tight">
+                  <span className="font-light">What kind of energy are you after on</span>{' '}
+                  <span className="font-bold text-primary italic">this trip?</span>
+                </h2>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
+                {[
+                  { id: 'relaxed', name: 'Relaxed', description: 'Within 1-3km' },
+                  { id: 'balanced', name: 'Balanced', description: 'Within 3-10 km' },
+                  { id: 'action-packed', name: 'Action Packed', description: 'More than 10 km' }
+                ].map((option) => (
+                  <motion.div
+                    key={option.id}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    <Card
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-24 flex items-center justify-center text-center ${
+                        itineraryData.energy === option.id
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, energy: option.id }))}
+                    >
+                      <div className="p-3">
+                        <h3 className={`font-semibold ${
+                          itineraryData.energy === option.id ? 'text-white' : 'text-gray-800'
+                        }`}>
+                          {option.name}
+                        </h3>
+                        <p className={`text-xs ${
+                          itineraryData.energy === option.id ? 'text-white/80' : 'text-gray-500'
+                        }`}>
+                          {option.description}
+                        </p>
+                      </div>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+
+            {/* Kids Question */}
+            <div className="space-y-6">
+              <div className="text-center space-y-2">
+                <h2 className="font-merchant text-2xl leading-tight">
+                  <span className="font-light">Are you</span>{' '}
+                  <span className="font-bold text-primary italic">travelling with kids?</span>
+                </h2>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
+                {[
+                  { value: true, label: 'Yes', icon: '👨‍👩‍👧‍👦' },
+                  { value: false, label: 'No', icon: '👫' }
+                ].map((option) => (
+                  <motion.div
+                    key={option.label}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    <Card
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-24 flex items-center justify-center text-center ${
+                        itineraryData.withKids === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, withKids: option.value }))}
+                    >
+                      <div className="space-y-2">
+                        <div className="text-2xl">{option.icon}</div>
+                        <h3 className={`font-semibold ${
+                          itineraryData.withKids === option.value ? 'text-white' : 'text-gray-800'
+                        }`}>
+                          {option.label}
+                        </h3>
+                      </div>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        );
+
+      case 3:
+        return (
+          <motion.div
+            key="step3"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-8"
+          >
+            <div className="text-center space-y-2">
+              <h2 className="text-2xl font-light">Do you follow any</h2>
+              <h2 className="text-2xl font-bold text-primary italic">dietary preferences?</h2>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
+              {[
+                { id: 'vegetarian', label: 'Vegetarian' },
+                { id: 'meat-lover', label: 'Meat lover' },
+                { id: 'halal', label: 'Halal' },
+                { id: 'no-preference', label: "Doesn't matter" }
+              ].map((option) => (
+                <motion.div
+                  key={option.id}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Card
+                    className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-20 flex items-center justify-center text-center ${
+                      itineraryData.dietaryPreferences.includes(option.id)
+                        ? 'border-primary bg-primary text-white'
+                        : 'border-gray-200 hover:border-primary/40'
+                    }`}
+                    onClick={() => handleDietaryToggle(option.id)}
+                  >
+                    <h3 className={`font-semibold text-sm ${
+                      itineraryData.dietaryPreferences.includes(option.id) ? 'text-white' : 'text-gray-800'
+                    }`}>
+                      {option.label}
+                    </h3>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        );
+
+      case 4:
+        return (
+          <motion.div
+            key="step4"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-8"
+          >
+            <div className="max-w-lg mx-auto space-y-8">
+              {/* Museums Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular museums and art galleries?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'Yes if interesting' },
+                    { value: false, label: 'Totally my vibe' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.museums === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, museums: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.museums === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Scenic Spots Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular scenic viewpoints and photo spots?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'Yes if interesting' },
+                    { value: false, label: 'Absolutely love' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.scenicSpots === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, scenicSpots: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.scenicSpots === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Cultural Sites Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular cultural landmarks and historical sites?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'If nearby' },
+                    { value: false, label: 'Absolutely love' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.culturalSites === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, culturalSites: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.culturalSites === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Wildlife Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">Would you like your trip to include some wildlife experiences?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'If nearby' },
+                    { value: false, label: 'Absolutely love' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.wildlife === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, wildlife: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.wildlife === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Nightlife Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">Are you into nightlife and evening scenes?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'A few nights' },
+                    { value: false, label: 'Absolutely' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.nightlife === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, nightlife: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.nightlife === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Shopping Question */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium text-center">How do you feel about shopping during your trip?</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { value: true, label: 'Not really' },
+                    { value: null, label: 'Some shopping' },
+                    { value: false, label: 'Love shopping' }
+                  ].map((option, index) => (
+                    <Card
+                      key={index}
+                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
+                        itineraryData.shopping === option.value
+                          ? 'border-primary bg-primary text-white'
+                          : 'border-gray-200 hover:border-primary/40'
+                      }`}
+                      onClick={() => setItineraryData(prev => ({ ...prev, shopping: option.value }))}
+                    >
+                      <span className={`text-sm font-medium ${
+                        itineraryData.shopping === option.value ? 'text-white' : 'text-gray-800'
+                      }`}>
+                        {option.label}
+                      </span>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        );
+
+
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage="create-itinerary"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      <div className="container mx-auto px-4 pt-40 pb-8">
+        {/* Header - Only show during trip planning steps */}
+        {!isGenerating && !showResults && (
+          <>
+            <div className="max-w-4xl mx-auto text-center mb-8">
+              <h1 className="font-merchant text-3xl md:text-4xl leading-tight">
+                <span className="font-light">Tell Us About Your</span>{' '}
+                <span className="font-bold text-primary italic">Trip</span>
+              </h1>
+            </div>
+
+            {/* Progress Bar */}
+            <div className="max-w-md mx-auto mb-8">
+              <div className="w-full bg-gray-200 rounded-full h-2">
+                <div 
+                  className="bg-primary h-2 rounded-full transition-all duration-300"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Step Circles */}
+            <div className="flex justify-center items-center mb-12">
+              <div className="flex items-center gap-4">
+                {Array.from({ length: totalSteps }, (_, index) => {
+                  const stepNumber = index + 1;
+                  const isActive = stepNumber === currentStep;
+                  const isCompleted = stepNumber < currentStep;
+                  
+                  return (
+                    <div key={stepNumber} className="flex items-center">
+                      <div
+                        className={`w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 ${
+                          isCompleted
+                            ? 'bg-primary text-white'
+                            : isActive
+                            ? 'bg-primary text-white'
+                            : 'bg-gray-200 text-gray-400'
+                        }`}
+                      >
+                        {isCompleted ? (
+                          <CheckCircle className="w-4 h-4" />
+                        ) : (
+                          <span className="text-sm font-medium">{stepNumber}</span>
+                        )}
+                      </div>
+                      {stepNumber < totalSteps && (
+                        <div
+                          className={`w-12 h-0.5 mx-2 transition-colors duration-300 ${
+                            isCompleted ? 'bg-primary' : 'bg-gray-200'
+                          }`}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Main Content */}
+        <div className="max-w-4xl mx-auto">
+          <AnimatePresence mode="wait">
+            {renderStep()}
+          </AnimatePresence>
+
+          {/* Navigation Buttons */}
+          {!isGenerating && !showResults && (
+            <div className="flex justify-between mt-12 max-w-md mx-auto">
+              <Button
+                variant="outline"
+                onClick={handlePrevious}
+                disabled={currentStep === 1}
+                className="flex items-center gap-2 px-6 py-3"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Back
+              </Button>
+
+              <Button
+                onClick={handleNext}
+                disabled={!canProceed()}
+                className="flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary/90"
+              >
+                {currentStep === totalSteps ? 'Create Magic Itinerary' : 'Next'}
+                {currentStep !== totalSteps && <ArrowRight className="w-4 h-4" />}
+                {currentStep === totalSteps && <Sparkles className="w-4 h-4" />}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Footer
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CustomPostcards.tsx b/src/components/CustomPostcards.tsx
new file mode 100644
index 0000000..f30bc5a
--- /dev/null
+++ b/src/components/CustomPostcards.tsx
@@ -0,0 +1,842 @@
+import { useState, useRef, useEffect } from 'react';
+import { Camera, ArrowRight, Edit3, Upload, Type, Calendar } from 'lucide-react';
+import { Button } from './ui/button';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { motion, useMotionValue, useSpring, useTransform, useInView } from 'motion/react';
+import { HandwrittenText, useHandwrittenText } from './HandwrittenText';
+import vintageVector from 'figma:asset/e8091276ed2c976b5c975f21687b0d1702bd9c90.png';
+
+interface EditableCardProps {
+  isEditing: boolean;
+  onEdit: () => void;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  editIcon?: React.ReactNode;
+}
+
+export function CustomPostcards() {
+  const [editingCard, setEditingCard] = useState<string | null>(null);
+  const postcardRef = useRef<HTMLDivElement>(null);
+  const sectionRef = useRef<HTMLDivElement>(null);
+  
+  // 3D tilt effect using mouse position
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  
+  // Spring animations for smooth mouse following
+  const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), {
+    stiffness: 100,
+    damping: 15
+  });
+  const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), {
+    stiffness: 100,
+    damping: 15
+  });
+  
+  // Detect when section is in view to trigger handwriting
+  const isInView = useInView(sectionRef, { 
+    once: true, 
+    margin: "-100px",
+    amount: 0.3
+  });
+  
+  // Handwritten text control
+  const handwrittenControl = useHandwrittenText(false);
+  
+  // Handle mouse movement for 3D effect
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!postcardRef.current) return;
+    
+    const rect = postcardRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    
+    const x = (event.clientX - centerX) / (rect.width / 2);
+    const y = (event.clientY - centerY) / (rect.height / 2);
+    
+    mouseX.set(x);
+    mouseY.set(y);
+  };
+  
+  const handleMouseLeave = () => {
+    mouseX.set(0);
+    mouseY.set(0);
+  };
+
+  const [postcardData, setPostcardData] = useState({
+    photo: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop&crop=center",
+    message: "Greetings from paradise!\nThe beaches here are absolutely\nbreathtaking. Wish you were\nhere to enjoy this amazing\nsunset with me.",
+    date: "July 2024",
+    addressLabel: "POSTCARD"
+  });
+
+  const handleCreatePostcard = () => {
+    console.log('Navigate to postcard creation page...');
+  };
+
+  // Start handwriting animation when section comes into view
+  useEffect(() => {
+    if (isInView && !editingCard) {
+      // Delay the start of handwriting to let the postcard animation settle
+      const timer = setTimeout(() => {
+        handwrittenControl.start();
+      }, 1200);
+      return () => clearTimeout(timer);
+    }
+  }, [isInView, editingCard, handwrittenControl]);
+
+  // Reset handwriting when editing
+  useEffect(() => {
+    if (editingCard === 'message') {
+      handwrittenControl.reset();
+    }
+  }, [editingCard, handwrittenControl]);
+
+  const EditableCard = ({ isEditing, onEdit, children, className = "", style = {}, editIcon }: EditableCardProps) => {
+    return (
+      <motion.div 
+        className={`relative group cursor-pointer ${className}`}
+        style={style}
+        onClick={(e) => {
+          e.stopPropagation();
+          onEdit();
+        }}
+        whileHover={{ 
+          scale: 1.02,
+          transition: { duration: 0.2 }
+        }}
+        whileTap={{ scale: 0.98 }}
+        animate={isEditing ? {
+          boxShadow: "0 0 0 2px rgba(99, 102, 241, 0.5), 0 8px 16px rgba(99, 102, 241, 0.3)"
+        } : {}}
+      >
+        {children}
+        
+        {/* Animated Edit overlay */}
+        <motion.div 
+          className="absolute inset-0 bg-black rounded-md flex items-center justify-center"
+          initial={{ opacity: 0, backgroundColor: "rgba(0, 0, 0, 0)" }}
+          animate={isEditing ? {
+            opacity: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.2)"
+          } : {
+            opacity: 0,
+            backgroundColor: "rgba(0, 0, 0, 0)"
+          }}
+          whileHover={!isEditing ? {
+            opacity: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.1)"
+          } : {}}
+          transition={{ duration: 0.2 }}
+        >
+          <motion.div 
+            className="bg-white bg-opacity-90 px-2 py-1 rounded-md shadow-lg border border-gray-200 flex items-center gap-1"
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            whileHover={{ scale: 1.05 }}
+            transition={{ duration: 0.2 }}
+          >
+            <motion.div
+              animate={isEditing ? { rotate: [0, 10, -10, 0] } : {}}
+              transition={{ duration: 2, repeat: isEditing ? Infinity : 0 }}
+            >
+              {editIcon}
+            </motion.div>
+            <motion.span 
+              className="text-xs text-gray-700 font-medium"
+              animate={isEditing ? {
+                color: ["#374151", "#6366f1", "#374151"]
+              } : {}}
+              transition={{ duration: 1, repeat: isEditing ? Infinity : 0 }}
+            >
+              {isEditing ? 'Editing...' : 'Edit'}
+            </motion.span>
+          </motion.div>
+        </motion.div>
+      </motion.div>
+    );
+  };
+
+  // Ultra-realistic vintage postcard with responsive scaling and animations
+  const PostcardFrame = () => {
+    return (
+      <motion.div 
+        className="relative shadow-2xl transform rotate-[0.5deg] w-full h-full"
+        initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
+        animate={{ opacity: 1, scale: 1, rotate: 0.5 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        style={{
+          background: `
+            radial-gradient(circle at 20% 80%, rgba(210, 180, 140, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(160, 130, 100, 0.1) 0%, transparent 50%),
+            radial-gradient(circle at 40% 40%, rgba(190, 160, 120, 0.08) 0%, transparent 50%),
+            linear-gradient(135deg, #f8f4e6 0%, #f0e7d3 25%, #ede2d0 50%, #e8dcc8 75%, #e3d5c2 100%)
+          `,
+          borderRadius: '10px',
+          boxShadow: `
+            inset 0px 1px 30px rgba(139, 115, 85, 0.2),
+            inset 0px -1px 20px rgba(160, 130, 100, 0.15),
+            0px 12px 40px rgba(0, 0, 0, 0.15),
+            0px 4px 12px rgba(0, 0, 0, 0.1)
+          `,
+          border: '1px solid rgba(139, 115, 85, 0.2)'
+        }}
+      >
+        {/* Realistic paper texture with variations */}
+        <div 
+          className="absolute inset-0 opacity-40 rounded-[10px] pointer-events-none"
+          style={{
+            backgroundImage: `
+              url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af9a' fill-opacity='0.08'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
+              radial-gradient(circle at 25% 75%, rgba(180, 150, 120, 0.1) 0%, transparent 40%),
+              radial-gradient(circle at 75% 25%, rgba(160, 130, 100, 0.08) 0%, transparent 35%)
+            `
+          }}
+        />
+
+        {/* Age spots and stains */}
+        <div className="absolute inset-0 rounded-[10px] pointer-events-none opacity-30">
+          <div 
+            className="absolute w-8 h-6 rounded-full"
+            style={{
+              background: 'radial-gradient(ellipse, rgba(160, 120, 80, 0.15) 0%, transparent 70%)',
+              top: '15%',
+              right: '20%',
+              transform: 'rotate(-15deg)'
+            }}
+          />
+          <div 
+            className="absolute w-6 h-8 rounded-full"
+            style={{
+              background: 'radial-gradient(ellipse, rgba(140, 110, 70, 0.12) 0%, transparent 60%)',
+              bottom: '25%',
+              left: '15%',
+              transform: 'rotate(25deg)'
+            }}
+          />
+          <div 
+            className="absolute w-4 h-4 rounded-full"
+            style={{
+              background: 'radial-gradient(circle, rgba(180, 140, 100, 0.2) 0%, transparent 50%)',
+              top: '60%',
+              right: '10%'
+            }}
+          />
+        </div>
+
+        {/* Corner wear and creases */}
+        <div 
+          className="absolute top-0 right-0 w-12 h-12 opacity-25"
+          style={{
+            background: 'radial-gradient(circle at top right, rgba(139, 115, 85, 0.3) 20%, rgba(160, 130, 100, 0.2) 40%, transparent 70%)',
+            borderTopRightRadius: '10px'
+          }}
+        />
+        <div 
+          className="absolute bottom-0 left-0 w-16 h-16 opacity-20"
+          style={{
+            background: 'radial-gradient(circle at bottom left, rgba(120, 95, 70, 0.25) 25%, rgba(140, 115, 85, 0.15) 50%, transparent 75%)',
+            borderBottomLeftRadius: '10px'
+          }}
+        />
+
+        {/* Subtle crease lines */}
+        <div 
+          className="absolute w-full h-px bg-gradient-to-r from-transparent via-amber-800/10 to-transparent opacity-40"
+          style={{
+            top: '35%',
+            transform: 'rotate(-0.5deg)'
+          }}
+        />
+
+        {/* Animated Vintage Vector Logo - Top Right - Mobile Optimized */}
+        <motion.div 
+          className="absolute opacity-60 pointer-events-none"
+          style={{
+            top: '4.3%',
+            right: '3.5%',
+            width: '7.5%',
+            height: '11.5%',
+            filter: 'sepia(30%) saturate(120%) hue-rotate(15deg) brightness(85%) contrast(110%)'
+          }}
+          animate={{
+            rotate: [5, 7, 3, 5],
+            scale: [1, 1.02, 0.98, 1]
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        >
+          <img 
+            src={vintageVector} 
+            alt="Vintage logo"
+            className="w-full h-full object-contain"
+            style={{
+              mixBlendMode: 'multiply',
+              opacity: 0.8
+            }}
+          />
+          {/* Subtle aging overlay for the vector */}
+          <div 
+            className="absolute inset-0 rounded-full"
+            style={{
+              background: `
+                radial-gradient(circle at 30% 30%, rgba(160, 130, 90, 0.2) 0%, transparent 60%),
+                radial-gradient(circle at 70% 70%, rgba(140, 110, 70, 0.15) 0%, transparent 50%)
+              `,
+              mixBlendMode: 'multiply'
+            }}
+          />
+        </motion.div>
+
+        {/* Editable Photo Card with realistic mounting - Responsive */}
+        <EditableCard
+          isEditing={editingCard === 'photo'}
+          onEdit={() => setEditingCard(editingCard === 'photo' ? null : 'photo')}
+          style={{
+            position: 'absolute',
+            width: '33.3%',
+            height: '72.3%',
+            left: '4.9%',
+            top: '7.4%',
+            transform: 'rotate(-0.8deg)'
+          }}
+          editIcon={<Upload className="w-3 h-3 text-gray-600" />}
+        >
+          <div 
+            className="w-full h-full rounded-lg overflow-hidden shadow-lg relative"
+            style={{
+              border: '4px solid #ffffff',
+              boxShadow: `
+                0px 6px 25px rgba(0, 0, 0, 0.25),
+                inset 0px 1px 3px rgba(255, 255, 255, 0.8),
+                inset 0px -1px 2px rgba(160, 130, 100, 0.2)
+              `
+            }}
+          >
+            <ImageWithFallback
+              src={postcardData.photo}
+              alt="Beautiful tropical beach"
+              className="w-full h-full object-cover"
+              style={{
+                filter: 'sepia(8%) saturate(110%) contrast(102%) brightness(98%)'
+              }}
+            />
+            {/* Photo aging overlay */}
+            <div 
+              className="absolute inset-0 pointer-events-none"
+              style={{
+                background: `
+                  radial-gradient(circle at 20% 20%, rgba(255, 235, 205, 0.15) 0%, transparent 40%),
+                  radial-gradient(circle at 80% 80%, rgba(200, 170, 130, 0.1) 0%, transparent 35%)
+                `,
+                mixBlendMode: 'multiply'
+              }}
+            />
+          </div>
+        </EditableCard>
+        
+        {/* Realistic vertical divider with ink bleeding - Responsive */}
+        <div 
+          className="absolute"
+          style={{
+            top: '10.6%',
+            bottom: '10.6%',
+            left: '43.1%',
+            width: '2px',
+            background: `
+              linear-gradient(to bottom,
+                transparent 0%,
+                rgba(101, 84, 63, 0.4) 10%,
+                rgba(101, 84, 63, 0.6) 30%,
+                rgba(101, 84, 63, 0.8) 50%,
+                rgba(101, 84, 63, 0.6) 70%,
+                rgba(101, 84, 63, 0.4) 90%,
+                transparent 100%
+              )
+            `,
+            filter: 'blur(0.3px)'
+          }}
+        />
+        
+        {/* Ink bleed effect around divider - Responsive */}
+        <div 
+          className="absolute opacity-20"
+          style={{
+            top: '10.6%',
+            bottom: '10.6%',
+            left: '42.8%',
+            width: '6px',
+            background: `
+              linear-gradient(to bottom,
+                transparent 0%,
+                rgba(101, 84, 63, 0.1) 20%,
+                rgba(101, 84, 63, 0.15) 50%,
+                rgba(101, 84, 63, 0.1) 80%,
+                transparent 100%
+              )
+            `,
+            filter: 'blur(1px)'
+          }}
+        />
+        
+        {/* Right side content area - Responsive */}
+        <div 
+          className="absolute pointer-events-none"
+          style={{
+            top: '10.6%',
+            left: '47.2%',
+            width: '47.2%',
+            height: '78.7%'
+          }}
+        >
+          {/* Editable Address Label Card - Responsive */}
+          <EditableCard
+            isEditing={editingCard === 'label'}
+            onEdit={() => setEditingCard(editingCard === 'label' ? null : 'label')}
+            style={{
+              position: 'absolute',
+              top: '4.1%',
+              left: '0%',
+              pointerEvents: 'auto',
+              transform: 'rotate(-0.3deg)'
+            }}
+            editIcon={<Type className="w-3 h-3 text-gray-600" />}
+          >
+            <div 
+              className="px-2 py-1 rounded text-xs md:text-sm"
+              style={{
+                fontWeight: '600',
+                letterSpacing: '2px',
+                textTransform: 'uppercase',
+                color: 'rgba(101, 84, 63, 0.8)',
+                textShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)'
+              }}
+            >
+              {postcardData.addressLabel}
+            </div>
+          </EditableCard>
+          
+          {/* Realistic horizontal ruled lines with ink bleeding - Responsive */}
+          <div 
+            className="absolute pointer-events-none"
+            style={{
+              top: '14.9%',
+              left: '0%',
+              width: '94.1%',
+              height: '59.5%'
+            }}
+          >
+            {[...Array(9)].map((_, i) => (
+              <div key={i} className="relative" style={{ marginBottom: '6.5%' }}>
+                {/* Main line */}
+                <div 
+                  style={{
+                    height: '1px',
+                    width: i % 2 === 0 ? '100%' : '92%',
+                    background: `linear-gradient(to right, 
+                      rgba(101, 84, 63, 0.3) 0%, 
+                      rgba(101, 84, 63, 0.5) 20%, 
+                      rgba(101, 84, 63, 0.6) 50%, 
+                      rgba(101, 84, 63, 0.4) 80%, 
+                      rgba(101, 84, 63, 0.2) 95%,
+                      transparent 100%
+                    )`,
+                    transform: `rotate(${(Math.random() - 0.5) * 0.5}deg)`
+                  }}
+                />
+                {/* Ink bleed effect */}
+                <div 
+                  className="absolute top-0 left-0 opacity-30"
+                  style={{
+                    height: '3px',
+                    width: i % 2 === 0 ? '98%' : '90%',
+                    background: `linear-gradient(to right, 
+                      rgba(101, 84, 63, 0.1) 0%, 
+                      rgba(101, 84, 63, 0.2) 30%, 
+                      rgba(101, 84, 63, 0.15) 70%, 
+                      transparent 100%
+                    )`,
+                    filter: 'blur(1px)',
+                    transform: 'translateY(-1px)'
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          
+          {/* Editable Message Card with Handwritten Animation - Responsive */}
+          <EditableCard
+            isEditing={editingCard === 'message'}
+            onEdit={() => setEditingCard(editingCard === 'message' ? null : 'message')}
+            style={{
+              position: 'absolute',
+              top: '17.6%',
+              left: '4.4%',
+              width: '88.2%',
+              pointerEvents: 'auto',
+              transform: 'rotate(-0.7deg)'
+            }}
+            editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
+          >
+            <div className="px-2 py-2 rounded leading-relaxed">
+              {editingCard === 'message' ? (
+                // Show static text when editing
+                <div
+                  style={{
+                    fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+                    fontSize: 'clamp(14px, 3.6vw, 26px)',
+                    lineHeight: '1.7',
+                    color: 'rgba(85, 70, 50, 0.9)',
+                    textShadow: `
+                      1px 1px 2px rgba(0, 0, 0, 0.08),
+                      0px 0px 3px rgba(101, 84, 63, 0.1)
+                    `,
+                    whiteSpace: 'pre-line',
+                    filter: 'contrast(110%) brightness(98%)'
+                  }}
+                >
+                  {postcardData.message}
+                </div>
+              ) : (
+                // Show animated handwritten text when not editing
+                <HandwrittenText
+                  text={postcardData.message}
+                  speed={6}
+                  startDelay={0}
+                  autoStart={false}
+                  onComplete={handwrittenControl.onComplete}
+                  style={{
+                    fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+                    fontSize: 'clamp(14px, 3.6vw, 26px)',
+                    lineHeight: '1.7',
+                    color: 'rgba(85, 70, 50, 0.9)',
+                    textShadow: `
+                      1px 1px 2px rgba(0, 0, 0, 0.08),
+                      0px 0px 3px rgba(101, 84, 63, 0.1)
+                    `,
+                    filter: 'contrast(110%) brightness(98%)'
+                  }}
+                />
+              )}
+            </div>
+          </EditableCard>
+          
+          {/* Editable Date Card - Responsive */}
+          <EditableCard
+            isEditing={editingCard === 'date'}
+            onEdit={() => setEditingCard(editingCard === 'date' ? null : 'date')}
+            style={{
+              position: 'absolute',
+              bottom: '16.2%',
+              right: '7.4%',
+              pointerEvents: 'auto',
+              transform: 'rotate(-1.5deg)'
+            }}
+            editIcon={<Calendar className="w-3 h-3 text-gray-600" />}
+          >
+            <div 
+              className="px-2 py-1 rounded text-xs"
+              style={{
+                fontWeight: '500',
+                letterSpacing: '1px',
+                color: 'rgba(101, 84, 63, 0.7)',
+                textShadow: '0px 1px 1px rgba(0, 0, 0, 0.05)',
+                fontFamily: "'Poppins', sans-serif"
+              }}
+            >
+              {postcardData.date}
+            </div>
+          </EditableCard>
+        </div>
+        
+        {/* Ultra-realistic stamp - Responsive */}
+        <EditableCard
+          isEditing={editingCard === 'stamp'}
+          onEdit={() => setEditingCard(editingCard === 'stamp' ? null : 'stamp')}
+          style={{
+            position: 'absolute',
+            width: '12.5%',
+            height: '19.1%',
+            right: '3.5%',
+            bottom: '5.3%',
+            transform: 'rotate(-12deg)'
+          }}
+          editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
+        >
+          <div 
+            className="w-full h-full border-2 border-dashed rounded-full flex items-center justify-center relative"
+            style={{
+              borderColor: 'rgba(139, 115, 85, 0.8)',
+              background: `
+                radial-gradient(circle at 30% 30%, rgba(220, 190, 150, 0.95) 0%, rgba(200, 170, 130, 0.9) 40%, rgba(180, 150, 110, 0.85) 100%),
+                linear-gradient(135deg, rgba(240, 220, 180, 0.3) 0%, transparent 50%)
+              `,
+              boxShadow: `
+                inset 0px 2px 8px rgba(0, 0, 0, 0.25),
+                inset 0px -1px 4px rgba(255, 255, 255, 0.2),
+                0px 4px 12px rgba(0, 0, 0, 0.15)
+              `
+            }}
+          >
+            {/* Stamp aging and wear */}
+            <div 
+              className="absolute inset-0 rounded-full pointer-events-none"
+              style={{
+                background: `
+                  radial-gradient(circle at 70% 20%, rgba(160, 130, 90, 0.3) 0%, transparent 40%),
+                  radial-gradient(circle at 20% 80%, rgba(140, 110, 70, 0.2) 0%, transparent 35%)
+                `,
+                mixBlendMode: 'multiply'
+              }}
+            />
+            
+            {/* Stamp inner details */}
+            <div className="absolute inset-3 border border-amber-800/50 rounded-full" />
+            <div className="absolute inset-5 border border-amber-800/30 rounded-full" />
+            
+            {/* Stamp text */}
+            <div className="text-center leading-tight z-10" style={{ color: 'rgba(101, 84, 63, 0.9)' }}>
+              <div style={{ fontSize: 'clamp(6px, 1.25vw, 9px)', fontWeight: '700', letterSpacing: '1px' }}>
+                TRAVEL
+              </div>
+              <div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '600', marginTop: '2px', letterSpacing: '0.5px' }}>
+                MEMORIES
+              </div>
+              <div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '500', marginTop: '1px' }}>
+                2024
+              </div>
+            </div>
+            
+            {/* Stamp perforations with realistic variations */}
+            {[...Array(20)].map((_, i) => (
+              <div
+                key={i}
+                className="absolute rounded-full"
+                style={{
+                  width: '2px',
+                  height: '2px',
+                  backgroundColor: 'rgba(101, 84, 63, 0.4)',
+                  top: '50%',
+                  left: '50%',
+                  transform: `translate(-50%, -50%) rotate(${i * 18}deg) translateY(-42px)`,
+                  opacity: Math.random() > 0.1 ? 1 : 0.3 // Random missing perforations
+                }}
+              />
+            ))}
+            
+            {/* Stamp smudge mark */}
+            <div 
+              className="absolute w-3 h-2 opacity-25"
+              style={{
+                background: 'radial-gradient(ellipse, rgba(101, 84, 63, 0.4) 0%, transparent 70%)',
+                bottom: '15%',
+                right: '20%',
+                transform: 'rotate(20deg)',
+                filter: 'blur(0.5px)'
+              }}
+            />
+          </div>
+        </EditableCard>
+        
+        {/* Additional realistic aging effects */}
+        <div 
+          className="absolute w-3 h-1 opacity-15"
+          style={{
+            background: 'linear-gradient(45deg, rgba(120, 100, 70, 0.3), transparent)',
+            top: '20%',
+            left: '60%',
+            transform: 'rotate(45deg)',
+            filter: 'blur(0.5px)'
+          }}
+        />
+      </motion.div>
+    );
+  };
+
+  return (
+    <section ref={sectionRef} className="py-12 md:py-16 lg:py-20 bg-white relative overflow-hidden">
+      {/* Background decorations */}
+      <div className="absolute inset-0 opacity-10 overflow-hidden">
+        {/* Vintage Stamps */}
+        <div className="absolute top-20 left-20 w-16 h-20 bg-gradient-to-br from-primary/30 to-secondary/30 rounded-sm rotate-12 border-2 border-primary/20"></div>
+        <div className="absolute top-40 right-32 w-12 h-16 bg-gradient-to-br from-secondary/30 to-primary/30 rounded-sm -rotate-6 border-2 border-secondary/20"></div>
+        <div className="absolute bottom-32 left-40 w-14 h-18 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-sm rotate-45 border-2 border-primary/15"></div>
+        
+        {/* Paper Textures */}
+        <div className="absolute top-1/3 right-1/4 w-32 h-32 bg-gradient-to-tr from-primary/10 to-transparent rounded-full blur-2xl"></div>
+        <div className="absolute bottom-1/3 left-1/4 w-40 h-40 bg-gradient-to-bl from-secondary/10 to-transparent rounded-full blur-2xl"></div>
+        
+        {/* Ink Splatters */}
+        <div className="absolute top-1/2 left-1/2 w-8 h-8 bg-primary/20 rounded-full blur-sm"></div>
+        <div className="absolute top-1/4 right-1/3 w-6 h-6 bg-secondary/20 rounded-full blur-sm"></div>
+        <div className="absolute bottom-1/4 left-1/3 w-4 h-4 bg-primary/15 rounded-full blur-sm"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header */}
+        <div className="text-left mb-12 md:mb-16">
+          <div className="inline-flex items-center gap-2 bg-gray-50 px-4 py-2 rounded-full mb-4">
+            <Camera className="w-4 h-4 text-primary" />
+            <span className="text-sm text-gray-700">Custom Memories</span>
+          </div>
+          
+          <h2 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-gray-900 mb-6">
+            <span className="font-light">How to create your</span>
+            <span className="block">
+              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+                custom
+              </span>{' '}
+              <span className="font-normal">postcard?</span>
+            </span>
+          </h2>
+          
+          <p className="text-lg md:text-xl text-gray-600 max-w-3xl leading-relaxed">
+            Transform your travel experiences into beautiful, personalized postcards with authentic handwritten messages. Share your journey in a way that feels truly personal.
+          </p>
+        </div>
+
+        {/* Main Content - Responsive Grid */}
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 xl:gap-20 items-center max-w-7xl mx-auto">
+          
+          {/* Left Column - Interactive Postcard with 3D Effect */}
+          <motion.div 
+            className="relative flex items-center justify-center order-2 lg:order-1"
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            onClick={() => setEditingCard(null)}
+          >
+            {/* Main Postcard Container with 3D Transform */}
+            <motion.div
+              ref={postcardRef}
+              className="relative w-full max-w-lg mx-auto"
+              style={{
+                perspective: '1000px',
+                aspectRatio: '1.6/1'
+              }}
+            >
+              <motion.div
+                className="w-full h-full"
+                style={{
+                  rotateX,
+                  rotateY,
+                  transformStyle: 'preserve-3d'
+                }}
+              >
+                <PostcardFrame />
+              </motion.div>
+            </motion.div>
+
+            {/* Floating Elements around postcard */}
+            <motion.div
+              className="absolute -top-6 -right-6 w-16 h-16 bg-primary/10 rounded-full blur-lg"
+              animate={{
+                scale: [1, 1.2, 1],
+                opacity: [0.3, 0.6, 0.3]
+              }}
+              transition={{
+                duration: 4,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+            />
+            
+            <motion.div
+              className="absolute -bottom-8 -left-8 w-20 h-20 bg-secondary/10 rounded-full blur-lg"
+              animate={{
+                scale: [1.2, 1, 1.2],
+                opacity: [0.4, 0.2, 0.4]
+              }}
+              transition={{
+                duration: 5,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+            />
+          </motion.div>
+
+          {/* Right Column - Features and CTA */}
+          <div className="space-y-8 order-1 lg:order-2">
+            
+            {/* Features List */}
+            <div className="space-y-6">
+              {[
+                {
+                  icon: Camera,
+                  title: "Capture & Customize",
+                  description: "Upload your travel photos and customize every detail of your postcard."
+                },
+                {
+                  icon: Edit3,
+                  title: "Handwritten Messages",
+                  description: "Add personal messages that appear in beautiful handwritten script."
+                },
+                {
+                  icon: ArrowRight,
+                  title: "Share Instantly",
+                  description: "Send digital postcards or order physical prints delivered worldwide."
+                }
+              ].map((feature, index) => (
+                <motion.div
+                  key={index}
+                  className="flex items-start gap-4 p-4 bg-gray-50/50 rounded-xl border border-gray-100/50 hover:border-primary/20 hover:bg-gray-50 transition-all duration-300"
+                  initial={{ opacity: 0, x: 20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  viewport={{ once: true }}
+                >
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                    <feature.icon className="w-6 h-6 text-primary" />
+                  </div>
+                  
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-gray-900 mb-2">{feature.title}</h4>
+                    <p className="text-gray-600 leading-relaxed">{feature.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* CTA Section */}
+            <div className="space-y-4">
+              <Button 
+                onClick={handleCreatePostcard}
+                size="xl"
+                className="w-full md:w-auto h-14 px-8 rounded-xl bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 shadow-lg hover:shadow-xl transition-all duration-300 group"
+              >
+                <Camera className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
+                Create Your Postcard
+                <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
+              </Button>
+              
+              <p className="text-sm text-gray-500 leading-relaxed">
+                Turn your travel memories into timeless keepsakes. Click anywhere on the postcard above to start customizing.
+              </p>
+            </div>
+
+            {/* Interactive Hint */}
+            {!editingCard && (
+              <motion.div
+                className="flex items-center gap-2 text-sm text-primary/70 bg-primary/5 p-3 rounded-lg border border-primary/10"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 2 }}
+              >
+                <motion.div
+                  animate={{ scale: [1, 1.2, 1] }}
+                  transition={{ duration: 2, repeat: Infinity }}
+                >
+                  ✨
+                </motion.div>
+                <span>Hover over the postcard and click any element to edit it!</span>
+              </motion.div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/DealsPage.tsx b/src/components/DealsPage.tsx
new file mode 100644
index 0000000..5fe181b
--- /dev/null
+++ b/src/components/DealsPage.tsx
@@ -0,0 +1,1175 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { Search, Filter, X, Calendar, MapPin, Users, Clock, Star, Tag, Percent, Grid, List, Heart, GitCompare, Share2, Copy, Facebook, Twitter, MessageCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import { Checkbox } from './ui/checkbox';
+import { Slider } from './ui/slider';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from './ui/dialog';
+import { toast } from 'sonner@2.0.3';
+import Navbar from './Navbar';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { MobileAppSection } from './MobileAppSection';
+import { HowItWorks } from './HowItWorks';
+
+interface Deal {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+  originalPrice: number;
+  discountedPrice: number;
+  discountPercentage: number;
+  city: string;
+  category: string;
+  validUntil: string;
+  rating: number;
+  reviewsCount: number;
+  duration: string;
+  isPopular?: boolean;
+  isFeatured?: boolean;
+  attractions: number;
+}
+
+const deals: Deal[] = [
+  {
+    id: '1',
+    title: 'Melbourne Explorer Package',
+    description: '15% OFF on dining and dining on purchase over $200. Valid only today.',
+    image: 'https://images.unsplash.com/photo-1527264935190-1401c51b5bbc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBkZWFscyUyMGRpc2NvdW50JTIwcGFja2FnZXN8ZW58MXx8fHwxNzU3NjY0MzgyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 120,
+    discountedPrice: 102,
+    discountPercentage: 15,
+    city: 'Melbourne',
+    category: 'dining',
+    validUntil: '2024-01-15',
+    rating: 4.8,
+    reviewsCount: 245,
+    duration: '3-5 days',
+    isPopular: true,
+    attractions: 25
+  },
+  {
+    id: '2',
+    title: 'Sydney Harbour Special',
+    description: '20% OFF on dining and dining on purchase over $150. Valid for 7 days.',
+    image: 'https://images.unsplash.com/photo-1649633564453-358048b0663d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwdHJhdmVsJTIwb2ZmZXJzJTIwdmFjYXRpb258ZW58MXx8fHwxNzU3NjY0Mzg2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 150,
+    discountedPrice: 120,
+    discountPercentage: 20,
+    city: 'Sydney',
+    category: 'sightseeing',
+    validUntil: '2024-01-22',
+    rating: 4.7,
+    reviewsCount: 189,
+    duration: '2-4 days',
+    isFeatured: true,
+    attractions: 18
+  },
+  {
+    id: '3',
+    title: 'Paris City Pass Offer',
+    description: '25% OFF on dining and dining on purchase over $300. Limited time offer.',
+    image: 'https://images.unsplash.com/photo-1708885818420-584b7fdfeb96?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGVjaWFsJTIwb2ZmZXJzJTIwdG91cmlzbSUyMHNhdmluZ3N8ZW58MXx8fHwxNzU3NjY0MzkwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 200,
+    discountedPrice: 150,
+    discountPercentage: 25,
+    city: 'Paris',
+    category: 'culture',
+    validUntil: '2024-01-30',
+    rating: 4.9,
+    reviewsCount: 312,
+    duration: '4-6 days',
+    isPopular: true,
+    attractions: 35
+  },
+  {
+    id: '4',
+    title: 'London Heritage Bundle',
+    description: '18% OFF on dining and dining on purchase over $180. Weekend special.',
+    image: 'https://images.unsplash.com/photo-1486299267070-83823f5448dd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBiaWclMjBiZW58ZW58MXx8fHwxNzU3NjQ3OTYxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 180,
+    discountedPrice: 147,
+    discountPercentage: 18,
+    city: 'London',
+    category: 'heritage',
+    validUntil: '2024-01-20',
+    rating: 4.6,
+    reviewsCount: 156,
+    duration: '3-5 days',
+    attractions: 22
+  },
+  {
+    id: '5',
+    title: 'Tokyo Adventure Pack',
+    description: '30% OFF on dining and dining on purchase over $250. Flash sale ending soon.',
+    image: 'https://images.unsplash.com/photo-1588486691401-93624c48459b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGNpdHklMjBsYW5kc2NhcGV8ZW58MXx8fHwxNzU3NjYzNDk5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 250,
+    discountedPrice: 175,
+    discountPercentage: 30,
+    city: 'Tokyo',
+    category: 'adventure',
+    validUntil: '2024-01-18',
+    rating: 4.8,
+    reviewsCount: 278,
+    duration: '5-7 days',
+    isFeatured: true,
+    isPopular: true,
+    attractions: 42
+  },
+  {
+    id: '6',
+    title: 'Rome Classic Tour',
+    description: '22% OFF on dining and dining on purchase over $160. Early bird special.',
+    image: 'https://images.unsplash.com/photo-1706884027668-4b2a1a9701ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb21lJTIwY29sb3NzZXVtJTIwYW5jaWVudHxlbnwxfHx8fDE3NTc2Mzk3NDN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 160,
+    discountedPrice: 125,
+    discountPercentage: 22,
+    city: 'Rome',
+    category: 'culture',
+    validUntil: '2024-02-01',
+    rating: 4.7,
+    reviewsCount: 203,
+    duration: '3-4 days',
+    attractions: 28
+  },
+  {
+    id: '7',
+    title: 'Barcelona Arts Package',
+    description: '16% OFF on dining and dining on purchase over $140. Art lovers special.',
+    image: 'https://images.unsplash.com/photo-1539037116277-4db20889f2d4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxiYXJjZWxvbmElMjBjaXR5fGVufDF8fHx8MTc1NzY2MzUyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 140,
+    discountedPrice: 118,
+    discountPercentage: 16,
+    city: 'Barcelona',
+    category: 'culture',
+    validUntil: '2024-01-25',
+    rating: 4.5,
+    reviewsCount: 167,
+    duration: '2-4 days',
+    attractions: 19
+  },
+  {
+    id: '8',
+    title: 'New York City Lights',
+    description: '35% OFF on dining and dining on purchase over $400. Mega sale event.',
+    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwY2l0eXxlbnwxfHx8fDE3NTc2NjM1MzN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 400,
+    discountedPrice: 260,
+    discountPercentage: 35,
+    city: 'New York',
+    category: 'adventure',
+    validUntil: '2024-01-31',
+    rating: 4.9,
+    reviewsCount: 456,
+    duration: '5-8 days',
+    isPopular: true,
+    isFeatured: true,
+    attractions: 55
+  },
+  {
+    id: '9',
+    title: 'Amsterdam Canal Tour',
+    description: '12% OFF on dining and dining on purchase over $120. Seasonal discount.',
+    image: 'https://images.unsplash.com/photo-1534351590666-13e3e96b5017?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbXN0ZXJkYW0lMjBjYW5hbHN8ZW58MXx8fHwxNzU3NjY0NDI1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 120,
+    discountedPrice: 106,
+    discountPercentage: 12,
+    city: 'Amsterdam',
+    category: 'sightseeing',
+    validUntil: '2024-02-05',
+    rating: 4.4,
+    reviewsCount: 134,
+    duration: '2-3 days',
+    attractions: 15
+  },
+  {
+    id: '10',
+    title: 'Berlin History Walk',
+    description: '28% OFF on dining and dining on purchase over $200. History buffs delight.',
+    image: 'https://images.unsplash.com/photo-1587330979470-3595ac045ab1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxiZXJsaW4lMjBjaXR5fGVufDF8fHx8MTc1NzY2NDQyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 200,
+    discountedPrice: 144,
+    discountPercentage: 28,
+    city: 'Berlin',
+    category: 'heritage',
+    validUntil: '2024-01-28',
+    rating: 4.6,
+    reviewsCount: 198,
+    duration: '3-5 days',
+    attractions: 24
+  },
+  {
+    id: '11',
+    title: 'Prague Castle Experience',
+    description: '19% OFF on dining and dining on purchase over $110. Medieval charm package.',
+    image: 'https://images.unsplash.com/photo-1541849546-216549ae216d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcmFndWUlMjBjYXN0bGV8ZW58MXx8fHwxNzU3NjY0NDMzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 110,
+    discountedPrice: 89,
+    discountPercentage: 19,
+    city: 'Prague',
+    category: 'heritage',
+    validUntil: '2024-02-10',
+    rating: 4.7,
+    reviewsCount: 176,
+    duration: '2-4 days',
+    attractions: 17
+  },
+  {
+    id: '12',
+    title: 'Vienna Music & Arts',
+    description: '24% OFF on dining and dining on purchase over $190. Classical elegance deal.',
+    image: 'https://images.unsplash.com/photo-1516550893923-42d28e5677af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aWVubmElMjBjaXR5fGVufDF8fHx8MTc1NzY2NDQzN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+    originalPrice: 190,
+    discountedPrice: 144,
+    discountPercentage: 24,
+    city: 'Vienna',
+    category: 'culture',
+    validUntil: '2024-02-15',
+    rating: 4.8,
+    reviewsCount: 221,
+    duration: '3-5 days',
+    attractions: 26
+  }
+];
+
+interface DealsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCitiesClick: () => void;
+  onDealsClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onDealClick?: (dealId: string) => void;
+  currentPage: string;
+}
+
+export function DealsPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCitiesClick,
+  onDealsClick,
+  onCheckoutClick,
+  onSignInClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onDealClick,
+  currentPage
+}: DealsPageProps) {
+  const [timeRemaining, setTimeRemaining] = useState('24:59:32');
+
+  // Countdown timer effect
+  useEffect(() => {
+    const targetTime = new Date();
+    targetTime.setHours(23, 59, 59); // End of day
+    
+    const updateTimer = () => {
+      const now = new Date();
+      const diff = targetTime.getTime() - now.getTime();
+      
+      if (diff > 0) {
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+        
+        setTimeRemaining(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
+      } else {
+        setTimeRemaining('00:00:00');
+      }
+    };
+
+    const interval = setInterval(updateTimer, 1000);
+    updateTimer(); // Initial call
+
+    return () => clearInterval(interval);
+  }, []);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedCities, setSelectedCities] = useState<string[]>([]);
+  const [priceRange, setPriceRange] = useState([0, 500]);
+  const [discountRange, setDiscountRange] = useState([0, 40]);
+  const [sortBy, setSortBy] = useState('featured');
+  const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [itemsPerPage] = useState(9);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [favoriteDeals, setFavoriteDeals] = useState<string[]>([]);
+  const [compareMode, setCompareMode] = useState(false);
+  const [selectedDeals, setSelectedDeals] = useState<string[]>([]);
+  const [showShareModal, setShowShareModal] = useState(false);
+  const [selectedDealForShare, setSelectedDealForShare] = useState<string>('');
+
+  const categories = [
+    { value: 'dining', label: 'Dining', count: 3 },
+    { value: 'sightseeing', label: 'Sightseeing', count: 2 },
+    { value: 'culture', label: 'Culture', count: 4 },
+    { value: 'heritage', label: 'Heritage', count: 3 },
+    { value: 'adventure', label: 'Adventure', count: 2 }
+  ];
+
+  const cities = [
+    { value: 'Melbourne', label: 'Melbourne', count: 1 },
+    { value: 'Sydney', label: 'Sydney', count: 1 },
+    { value: 'Paris', label: 'Paris', count: 1 },
+    { value: 'London', label: 'London', count: 1 },
+    { value: 'Tokyo', label: 'Tokyo', count: 1 },
+    { value: 'Rome', label: 'Rome', count: 1 },
+    { value: 'Barcelona', label: 'Barcelona', count: 1 },
+    { value: 'New York', label: 'New York', count: 1 },
+    { value: 'Amsterdam', label: 'Amsterdam', count: 1 },
+    { value: 'Berlin', label: 'Berlin', count: 1 },
+    { value: 'Prague', label: 'Prague', count: 1 },
+    { value: 'Vienna', label: 'Vienna', count: 1 }
+  ];
+
+  const filteredDeals = deals.filter(deal => {
+    const matchesSearch = deal.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         deal.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         deal.city.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(deal.category);
+    const matchesCity = selectedCities.length === 0 || selectedCities.includes(deal.city);
+    const matchesPrice = deal.discountedPrice >= priceRange[0] && deal.discountedPrice <= priceRange[1];
+    const matchesDiscount = deal.discountPercentage >= discountRange[0] && deal.discountPercentage <= discountRange[1];
+    const matchesFavorites = !showFavoritesOnly || favoriteDeals.includes(deal.id);
+    
+    return matchesSearch && matchesCategory && matchesCity && matchesPrice && matchesDiscount && matchesFavorites;
+  });
+
+  // Sort deals
+  const sortedDeals = [...filteredDeals].sort((a, b) => {
+    switch (sortBy) {
+      case 'discount':
+        return b.discountPercentage - a.discountPercentage;
+      case 'price-low':
+        return a.discountedPrice - b.discountedPrice;
+      case 'price-high':
+        return b.discountedPrice - a.discountedPrice;
+      case 'rating':
+        return b.rating - a.rating;
+      case 'expiry':
+        return getDaysRemaining(a.validUntil) - getDaysRemaining(b.validUntil);
+      case 'featured':
+      default:
+        return (b.isFeatured ? 1 : 0) - (a.isFeatured ? 1 : 0) || (b.isPopular ? 1 : 0) - (a.isPopular ? 1 : 0);
+    }
+  });
+
+  // Pagination logic
+  const totalPages = Math.ceil(sortedDeals.length / itemsPerPage);
+  const startIndex = (pageNumber - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentDeals = sortedDeals.slice(startIndex, endIndex);
+  const totalItems = sortedDeals.length;
+  const showingFrom = totalItems > 0 ? startIndex + 1 : 0;
+  const showingTo = Math.min(endIndex, totalItems);
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setPageNumber(1);
+  }, [searchQuery, selectedCategories, selectedCities, priceRange, discountRange, sortBy]);
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories(prev => 
+      prev.includes(category) 
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const toggleCity = (city: string) => {
+    setSelectedCities(prev => 
+      prev.includes(city) 
+        ? prev.filter(c => c !== city)
+        : [...prev, city]
+    );
+  };
+
+  const clearAllFilters = () => {
+    setSelectedCategories([]);
+    setSelectedCities([]);
+    setPriceRange([0, 500]);
+    setDiscountRange([0, 40]);
+    setSearchQuery('');
+    setSortBy('featured');
+    setShowFavoritesOnly(false);
+  };
+
+  const toggleFavorite = (dealId: string) => {
+    setFavoriteDeals(prev => 
+      prev.includes(dealId) 
+        ? prev.filter(id => id !== dealId)
+        : [...prev, dealId]
+    );
+    toast.success(favoriteDeals.includes(dealId) ? 'Removed from favorites' : 'Added to favorites');
+  };
+
+  const toggleCompareSelection = (dealId: string) => {
+    if (selectedDeals.includes(dealId)) {
+      setSelectedDeals(prev => prev.filter(id => id !== dealId));
+    } else if (selectedDeals.length < 3) {
+      setSelectedDeals(prev => [...prev, dealId]);
+    } else {
+      toast.error('You can only compare up to 3 deals');
+    }
+  };
+
+  const shareDeal = (dealId: string, platform: string) => {
+    const deal = deals.find(d => d.id === dealId);
+    if (!deal) return;
+
+    const url = `${window.location.origin}/deals/${dealId}`;
+    const text = `Check out this amazing deal: ${deal.title} - ${deal.discountPercentage}% OFF!`;
+
+    switch (platform) {
+      case 'copy':
+        navigator.clipboard.writeText(url);
+        toast.success('Link copied to clipboard!');
+        break;
+      case 'facebook':
+        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
+        break;
+      case 'twitter':
+        window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
+        break;
+      case 'whatsapp':
+        window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
+        break;
+    }
+    setShowShareModal(false);
+  };
+
+  const getDaysRemaining = (validUntil: string) => {
+    const today = new Date();
+    const expiry = new Date(validUntil);
+    const diffTime = expiry.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return diffDays;
+  };
+
+  const FilterSidebar = ({ isMobile = false }) => (
+    <div className={`bg-white ${isMobile ? 'p-6' : 'p-6 sticky top-44'} rounded-lg border border-gray-100 h-fit`}>
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="font-semibold text-gray-900">Search by</h3>
+        {isMobile && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowMobileFilters(false)}
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Quick Filters */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Quick Filters</h4>
+        <div className="space-y-3">
+          <div className="flex items-center space-x-3">
+            <Checkbox
+              id="favorites-only"
+              checked={showFavoritesOnly}
+              onCheckedChange={(checked) => setShowFavoritesOnly(checked === true)}
+            />
+            <label
+              htmlFor="favorites-only"
+              className="text-sm text-gray-700 cursor-pointer flex-1 flex items-center gap-1"
+            >
+              <Heart className={`w-4 h-4 ${showFavoritesOnly ? 'fill-red-500 text-red-500' : ''}`} />
+              My Favorites ({favoriteDeals.length})
+            </label>
+          </div>
+          <div className="flex items-center space-x-3">
+            <Checkbox
+              id="expiring-soon"
+              checked={selectedCategories.includes('expiring-soon')}
+              onCheckedChange={() => {
+                // Filter deals expiring in 3 days or less
+                if (selectedCategories.includes('expiring-soon')) {
+                  setSelectedCategories(prev => prev.filter(c => c !== 'expiring-soon'));
+                } else {
+                  setSelectedCategories(prev => [...prev, 'expiring-soon']);
+                }
+              }}
+            />
+            <label
+              htmlFor="expiring-soon"
+              className="text-sm text-gray-700 cursor-pointer flex-1 flex items-center gap-1"
+            >
+              <Clock className="w-4 h-4 text-orange-600" />
+              Ending Soon
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {/* Category Filter */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Rating (5)</h4>
+        <div className="space-y-3">
+          {categories.map(category => (
+            <div key={category.value} className="flex items-center space-x-3">
+              <Checkbox
+                id={category.value}
+                checked={selectedCategories.includes(category.value)}
+                onCheckedChange={() => toggleCategory(category.value)}
+              />
+              <label
+                htmlFor={category.value}
+                className="text-sm text-gray-700 cursor-pointer flex-1 capitalize"
+              >
+                {category.label} ({category.count})
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* City Filter */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Brand (5)</h4>
+        <div className="space-y-3 max-h-48 overflow-y-auto">
+          {cities.map(city => (
+            <div key={city.value} className="flex items-center space-x-3">
+              <Checkbox
+                id={city.value}
+                checked={selectedCities.includes(city.value)}
+                onCheckedChange={() => toggleCity(city.value)}
+              />
+              <label
+                htmlFor={city.value}
+                className="text-sm text-gray-700 cursor-pointer flex-1"
+              >
+                {city.label} ({city.count})
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Price Range */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Price ($)</h4>
+        <div className="px-3">
+          <Slider
+            value={priceRange}
+            onValueChange={setPriceRange}
+            min={0}
+            max={500}
+            step={10}
+            className="mb-3"
+          />
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>${priceRange[0]}</span>
+            <span>${priceRange[1]}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Discount Range */}
+      <div className="mb-6">
+        <h4 className="font-medium text-gray-900 mb-3">Discount (%)</h4>
+        <div className="px-3">
+          <Slider
+            value={discountRange}
+            onValueChange={setDiscountRange}
+            min={0}
+            max={40}
+            step={1}
+            className="mb-3"
+          />
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>{discountRange[0]}%</span>
+            <span>{discountRange[1]}%</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Clear filters */}
+      <Button
+        variant="outline"
+        onClick={clearAllFilters}
+        className="w-full"
+      >
+        Clear All Filters
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCitiesClick={onCitiesClick}
+        onDealsClick={() => {}} // Already on deals page
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        currentPage="deals"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex flex-col lg:flex-row gap-8 pt-20">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:block lg:w-1/4">
+            <FilterSidebar />
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">
+            {/* Promotional Banner */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+              className="mb-8 bg-gradient-to-r from-primary to-secondary pt-16 px-6 pb-6 rounded-lg text-white relative overflow-hidden"
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-primary/90 to-secondary/90"></div>
+              <div className="relative z-10">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h2 className="text-2xl font-bold mb-2">⚡ Flash Sale Alert!</h2>
+                    <p className="text-white/90">Limited time offers ending soon - Save up to 35% on select city passes!</p>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-sm text-white/80 mb-1">Ends in</div>
+                    <div className="text-xl font-bold font-mono">{timeRemaining}</div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Header */}
+            <div className="mb-8">
+              <h1 className="mb-2">
+                <span className="font-light">Offers</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">for you</span>
+              </h1>
+              <p className="text-gray-600">
+                Showing {totalItems} of {deals.length} result(s)
+              </p>
+            </div>
+
+            {/* Search and Sort Controls */}
+            <div className="flex flex-col lg:flex-row gap-4 mb-8">
+              {/* Search Bar */}
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Input
+                  placeholder="Search offers..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 bg-white border-gray-200"
+                />
+              </div>
+
+              <div className="flex items-center gap-4">
+                {/* View Mode Toggle */}
+                <div className="flex items-center bg-gray-100 rounded-lg p-1">
+                  <Button
+                    variant={viewMode === 'grid' ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => setViewMode('grid')}
+                    className="px-3"
+                  >
+                    <Grid className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant={viewMode === 'list' ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => setViewMode('list')}
+                    className="px-3"
+                  >
+                    <List className="w-4 h-4" />
+                  </Button>
+                </div>
+
+                {/* Compare Mode Toggle */}
+                <Button
+                  variant={compareMode ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => {
+                    setCompareMode(!compareMode);
+                    if (!compareMode) {
+                      setSelectedDeals([]);
+                    }
+                  }}
+                  className="flex items-center gap-2"
+                >
+                  <GitCompare className="w-4 h-4" />
+                  Compare {selectedDeals.length > 0 && `(${selectedDeals.length})`}
+                </Button>
+
+                {/* Sort Dropdown */}
+                <Select value={sortBy} onValueChange={setSortBy}>
+                  <SelectTrigger className="w-40">
+                    <SelectValue placeholder="Sort by" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="featured">Featured</SelectItem>
+                    <SelectItem value="discount">Highest Discount</SelectItem>
+                    <SelectItem value="price-low">Price: Low to High</SelectItem>
+                    <SelectItem value="price-high">Price: High to Low</SelectItem>
+                    <SelectItem value="rating">Highest Rated</SelectItem>
+                    <SelectItem value="expiry">Ending Soon</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* Mobile Filter Button */}
+            <div className="lg:hidden mb-6">
+              <Button
+                variant="outline"
+                onClick={() => setShowMobileFilters(true)}
+                className="w-full"
+              >
+                <Filter className="w-4 h-4 mr-2" />
+                Filters ({selectedCategories.length + selectedCities.length})
+              </Button>
+            </div>
+
+            {/* Compare Bar */}
+            {compareMode && selectedDeals.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="mb-6 bg-primary/5 border border-primary/20 rounded-lg p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <GitCompare className="w-5 h-5 text-primary" />
+                    <span className="font-medium">
+                      {selectedDeals.length} deal{selectedDeals.length !== 1 ? 's' : ''} selected for comparison
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    {selectedDeals.length >= 2 && (
+                      <Button size="sm" className="bg-primary hover:bg-primary/90">
+                        Compare Selected
+                      </Button>
+                    )}
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => {
+                        setSelectedDeals([]);
+                        setCompareMode(false);
+                      }}
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Results Count */}
+            <div className="mb-6">
+              <p className="text-gray-600">
+                Showing {showingFrom}-{showingTo} of {totalItems} offer(s)
+              </p>
+            </div>
+
+            {/* Deals Grid */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className={viewMode === 'grid' 
+                ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" 
+                : "space-y-4"
+              }
+            >
+              {currentDeals.map((deal, index) => {
+                const daysRemaining = getDaysRemaining(deal.validUntil);
+                const isExpiringSoon = daysRemaining <= 3;
+                const isFavorite = favoriteDeals.includes(deal.id);
+                const isSelected = selectedDeals.includes(deal.id);
+                
+                return (
+                  <motion.div
+                    key={deal.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                  >
+                    <Card 
+                      className={`group cursor-pointer interactive-card h-full overflow-hidden relative ${
+                        isSelected ? 'ring-2 ring-primary ring-offset-2' : ''
+                      } ${viewMode === 'list' ? 'md:flex md:h-48' : ''}`}
+                      onClick={() => !compareMode && onDealClick?.(deal.id)}
+                    >
+                      <CardContent className="p-0">
+                        <div className={`relative ${viewMode === 'list' ? 'md:w-80 md:flex-shrink-0' : ''}`}>
+                          <ImageWithFallback
+                            src={deal.image}
+                            alt={deal.title}
+                            className={`w-full object-cover ${viewMode === 'list' ? 'h-48 md:h-full' : 'h-48'}`}
+                          />
+                          
+                          {/* Action Buttons */}
+                          <div className="absolute top-3 right-3 flex flex-col gap-2">
+                            {/* Favorite Button */}
+                            <Button
+                              size="sm"
+                              variant="secondary"
+                              className="w-8 h-8 p-0 bg-white/90 hover:bg-white"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                toggleFavorite(deal.id);
+                              }}
+                            >
+                              <Heart 
+                                className={`w-4 h-4 ${isFavorite ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} 
+                              />
+                            </Button>
+
+                            {/* Share Button */}
+                            <Dialog open={showShareModal && selectedDealForShare === deal.id} onOpenChange={setShowShareModal}>
+                              <DialogTrigger asChild>
+                                <Button
+                                  size="sm"
+                                  variant="secondary"
+                                  className="w-8 h-8 p-0 bg-white/90 hover:bg-white"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    setSelectedDealForShare(deal.id);
+                                    setShowShareModal(true);
+                                  }}
+                                >
+                                  <Share2 className="w-4 h-4 text-gray-600" />
+                                </Button>
+                              </DialogTrigger>
+                              <DialogContent className="sm:max-w-md">
+                                <DialogHeader>
+                                  <DialogTitle>Share this deal</DialogTitle>
+                                  <DialogDescription>
+                                    Choose how you'd like to share this deal with others.
+                                  </DialogDescription>
+                                </DialogHeader>
+                                <div className="flex flex-col gap-3">
+                                  <Button
+                                    variant="outline"
+                                    onClick={() => shareDeal(deal.id, 'copy')}
+                                    className="flex items-center gap-2 justify-start"
+                                  >
+                                    <Copy className="w-4 h-4" />
+                                    Copy Link
+                                  </Button>
+                                  <Button
+                                    variant="outline"
+                                    onClick={() => shareDeal(deal.id, 'facebook')}
+                                    className="flex items-center gap-2 justify-start"
+                                  >
+                                    <Facebook className="w-4 h-4" />
+                                    Share on Facebook
+                                  </Button>
+                                  <Button
+                                    variant="outline"
+                                    onClick={() => shareDeal(deal.id, 'twitter')}
+                                    className="flex items-center gap-2 justify-start"
+                                  >
+                                    <Twitter className="w-4 h-4" />
+                                    Share on Twitter
+                                  </Button>
+                                  <Button
+                                    variant="outline"
+                                    onClick={() => shareDeal(deal.id, 'whatsapp')}
+                                    className="flex items-center gap-2 justify-start"
+                                  >
+                                    <MessageCircle className="w-4 h-4" />
+                                    Share on WhatsApp
+                                  </Button>
+                                </div>
+                              </DialogContent>
+                            </Dialog>
+
+                            {/* Compare Checkbox */}
+                            {compareMode && (
+                              <Button
+                                size="sm"
+                                variant={isSelected ? "default" : "secondary"}
+                                className="w-8 h-8 p-0"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  toggleCompareSelection(deal.id);
+                                }}
+                              >
+                                <GitCompare className="w-4 h-4" />
+                              </Button>
+                            )}
+                          </div>
+                          
+                          {/* Discount Badge */}
+                          <Badge className="absolute top-3 left-3 bg-red-600 text-white font-bold px-3 py-1">
+                            -{deal.discountPercentage}% OFF
+                          </Badge>
+
+                          {/* Expiry Warning */}
+                          {isExpiringSoon && (
+                            <Badge className="absolute top-12 left-3 bg-orange-600 text-white text-xs px-2 py-1">
+                              {daysRemaining === 0 ? 'Expires Today!' : `${daysRemaining} days left`}
+                            </Badge>
+                          )}
+
+                          {/* Popular/Featured Badges */}
+                          <div className="absolute bottom-3 left-3 flex items-center gap-2">
+                            <div className="bg-white rounded-full px-2 py-1 shadow-sm">
+                              <div className="flex items-center gap-1">
+                                <Star className="w-3 h-3 fill-current text-yellow-500" />
+                                <span className="text-xs font-medium">{deal.rating}</span>
+                              </div>
+                            </div>
+                            {deal.isFeatured && (
+                              <Badge className="bg-orange-600 text-white text-xs">
+                                Featured
+                              </Badge>
+                            )}
+                            {deal.isPopular && (
+                              <Badge className="bg-primary text-white text-xs">
+                                Popular
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                        
+                        <div className={`p-4 ${viewMode === 'list' ? 'md:flex-1 md:flex md:flex-col md:justify-between' : ''}`}>
+                          <div className={viewMode === 'list' ? 'md:flex-1' : ''}>
+                            <div className="mb-3">
+                              <div className="flex items-center gap-2 mb-2">
+                                <MapPin className="w-4 h-4 text-gray-500" />
+                                <span className="text-sm text-gray-500">{deal.city}</span>
+                                <Badge variant="secondary" className="text-xs capitalize">
+                                  {deal.category}
+                                </Badge>
+                              </div>
+                              <h3 className="font-semibold text-gray-900 group-hover:text-primary transition-colors mb-1">
+                                {deal.title}
+                              </h3>
+                            </div>
+                            
+                            <p className="text-sm text-gray-600 mb-4 line-clamp-2">
+                              {deal.description}
+                            </p>
+                            
+                            <div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
+                              <div className="flex items-center gap-1">
+                                <Clock className="w-4 h-4" />
+                                <span>{deal.duration}</span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Users className="w-4 h-4" />
+                                <span>{deal.attractions} attractions</span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Calendar className="w-4 h-4" />
+                                <span className={isExpiringSoon ? 'text-red-600 font-medium' : ''}>
+                                  {daysRemaining === 0 ? 'Today' : `${daysRemaining} days`}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                          
+                          <div>
+                            <div className="flex items-center justify-between mb-4">
+                              <div className="flex items-center gap-2">
+                                <span className="text-lg font-bold text-gray-900">${deal.discountedPrice}</span>
+                                <span className="text-sm text-gray-500 line-through">${deal.originalPrice}</span>
+                                <Badge variant="outline" className="text-xs font-medium text-green-700 border-green-200">
+                                  Save ${deal.originalPrice - deal.discountedPrice}
+                                </Badge>
+                              </div>
+                              <div className="text-xs text-gray-500 text-right">
+                                <div>Valid until</div>
+                                <div className={isExpiringSoon ? 'text-red-600 font-medium' : ''}>
+                                  {new Date(deal.validUntil).toLocaleDateString()}
+                                </div>
+                              </div>
+                            </div>
+
+                            <div className="flex gap-2">
+                              <Button 
+                                className="flex-1 bg-gray-900 hover:bg-gray-800 text-white"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onDealClick?.(deal.id);
+                                }}
+                              >
+                                VIEW DEAL
+                              </Button>
+                              {viewMode === 'list' && (
+                                <Button 
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleFavorite(deal.id);
+                                  }}
+                                >
+                                  <Heart className={`w-4 h-4 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+
+            {totalItems === 0 && (
+              <div className="text-center py-12">
+                <p className="text-gray-500 mb-4">No deals found matching your criteria</p>
+                <Button onClick={clearAllFilters} variant="outline">
+                  Clear All Filters
+                </Button>
+              </div>
+            )}
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="text-sm text-gray-600">
+                  Page {pageNumber} of {totalPages}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
+                    disabled={pageNumber === 1}
+                    className="px-3 py-2"
+                  >
+                    Previous
+                  </Button>
+                  
+                  {/* Page numbers */}
+                  <div className="flex items-center gap-1">
+                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                      let pageNum;
+                      if (totalPages <= 5) {
+                        pageNum = i + 1;
+                      } else if (pageNumber <= 3) {
+                        pageNum = i + 1;
+                      } else if (pageNumber >= totalPages - 2) {
+                        pageNum = totalPages - 4 + i;
+                      } else {
+                        pageNum = pageNumber - 2 + i;
+                      }
+                      
+                      return (
+                        <Button
+                          key={pageNum}
+                          variant={pageNumber === pageNum ? "default" : "outline"}
+                          onClick={() => setPageNumber(pageNum)}
+                          className="px-3 py-2 min-w-[40px]"
+                        >
+                          {pageNum}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                  
+                  <Button
+                    variant="outline"
+                    onClick={() => setPageNumber(Math.min(totalPages, pageNumber + 1))}
+                    disabled={pageNumber === totalPages}
+                    className="px-3 py-2"
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Filter Modal */}
+      {showMobileFilters && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setShowMobileFilters(false)} />
+          <div className="fixed inset-y-0 left-0 w-80 bg-white overflow-y-auto">
+            <FilterSidebar isMobile />
+          </div>
+        </div>
+      )}
+
+      {/* Access all your city cards section */}
+      <MobileAppSection />
+
+      {/* How It Works Section */}
+      <HowItWorks />
+
+      {/* Customer Reviews Section */}
+      <EnhancedTestimonials />
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        currentPage={currentPage}
+      />
+
+      {/* Floating Favorites Button */}
+      {favoriteDeals.length > 0 && !showFavoritesOnly && (
+        <motion.div
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="fixed bottom-6 left-6 z-40"
+        >
+          <Button
+            onClick={() => setShowFavoritesOnly(true)}
+            className="bg-red-600 hover:bg-red-700 text-white rounded-full w-14 h-14 shadow-lg"
+          >
+            <div className="flex flex-col items-center">
+              <Heart className="w-5 h-5 fill-current" />
+              <span className="text-xs">{favoriteDeals.length}</span>
+            </div>
+          </Button>
+        </motion.div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/DownloadAppPage.tsx b/src/components/DownloadAppPage.tsx
new file mode 100644
index 0000000..7b0c1e0
--- /dev/null
+++ b/src/components/DownloadAppPage.tsx
@@ -0,0 +1,768 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, ChevronRight, QrCode, CreditCard, Calendar, MapPin, Star, CheckCircle, Sparkles, Users, Clock, Gift, Ticket } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface DownloadAppPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+export function DownloadAppPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: DownloadAppPageProps) {
+  // Card type state
+  const [cardType, setCardType] = useState<'unlimited' | 'selective'>('unlimited');
+
+  // Mock data for the current pass
+  const currentPass = {
+    name: 'Melbourne- Unlimited Card',
+    status: 'Active',
+    date: '22/12/2024',
+    duration: '2 Days',
+    adults: 3,
+    kids: 3
+  };
+
+  // Mock attractions data
+  const attractions = [
+    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
+    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
+    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
+    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
+    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' }
+  ];
+
+  // Mock user profiles
+  const userProfiles = [
+    'https://images.unsplash.com/photo-1494790108755-2616b332b467?w=60',
+    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60',
+    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60',
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60',
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=60'
+  ];
+
+  // Generate QR code pattern
+  const generateQRPattern = () => {
+    const size = 17;
+    const pattern = [];
+    
+    for (let i = 0; i < size * size; i++) {
+      const row = Math.floor(i / size);
+      const col = i % size;
+      
+      // Corner squares (5x5 for smaller QR)
+      const isCornerSquare = 
+        (row < 5 && col < 5) || // Top-left
+        (row < 5 && col >= 12) || // Top-right
+        (row >= 12 && col < 5); // Bottom-left
+      
+      // Finder patterns within corner squares
+      const isFinderPattern = isCornerSquare && (
+        (row === 0 || row === 4 || col === 0 || col === 4) ||
+        (row >= 2 && row <= 2 && col >= 2 && col <= 2)
+      );
+      
+      // Timing patterns
+      const isTimingPattern = (row === 4 && col >= 6 && col <= 10) || (col === 4 && row >= 6 && row <= 10);
+      
+      // Random data pattern for other areas
+      const isDataPattern = !isCornerSquare && !isTimingPattern && Math.random() > 0.4;
+      
+      pattern.push(isFinderPattern || isTimingPattern || isDataPattern);
+    }
+    
+    return pattern;
+  };
+
+  const qrPattern = generateQRPattern();
+
+  return (
+    <div className="min-h-screen bg-[#f8f8f8]">
+      <Navbar 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      <div className="container mx-auto px-4 pt-40 pb-6">
+        {/* Back Button */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          className="mb-6"
+        >
+          <Button
+            variant="ghost"
+            onClick={onBackClick}
+            className="p-0 hover:bg-transparent"
+          >
+            <div className="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center gap-2">
+              <ArrowLeft className="w-4 h-4" />
+              <span>Back</span>
+            </div>
+          </Button>
+        </motion.div>
+
+        {/* Pass Card - Redesigned */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <Card className="border-0 shadow-lg overflow-hidden">
+            {/* Gradient Header Bar */}
+            <div className="h-2 bg-gradient-to-r from-primary via-secondary to-primary"></div>
+            
+            <CardContent className="p-6">
+              {/* Card Header */}
+              <div className="flex items-start justify-between mb-6">
+                <div className="flex items-start gap-4">
+                  {/* Icon */}
+                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center flex-shrink-0">
+                    <Ticket className="w-7 h-7 text-primary" />
+                  </div>
+                  
+                  {/* Title and Status */}
+                  <div>
+                    <h2 className="font-merchant text-xl font-semibold text-gray-900 mb-2">
+                      {currentPass.name}
+                    </h2>
+                    <Badge className="bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-1 rounded-full">
+                      <div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
+                      {currentPass.status}
+                    </Badge>
+                  </div>
+                </div>
+                
+                {/* Date Badge */}
+                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 px-4 py-2 rounded-lg">
+                  <div className="flex items-center gap-2 text-primary">
+                    <Calendar className="w-4 h-4" />
+                    <span className="font-poppins font-medium text-sm">{currentPass.date}</span>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Stats Grid */}
+              <div className="grid grid-cols-3 gap-4">
+                {/* Duration */}
+                <div className="bg-gray-50 rounded-lg p-4 text-center">
+                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
+                    <Clock className="w-5 h-5 text-primary" />
+                  </div>
+                  <div className="font-poppins text-xs text-gray-500 mb-1">Duration</div>
+                  <div className="font-poppins font-semibold text-gray-900">{currentPass.duration}</div>
+                </div>
+                
+                {/* Adults */}
+                <div className="bg-gray-50 rounded-lg p-4 text-center">
+                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
+                    <Users className="w-5 h-5 text-primary" />
+                  </div>
+                  <div className="font-poppins text-xs text-gray-500 mb-1">Adults</div>
+                  <div className="font-poppins font-semibold text-gray-900">{currentPass.adults}</div>
+                </div>
+                
+                {/* Kids */}
+                <div className="bg-gray-50 rounded-lg p-4 text-center">
+                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
+                    <Star className="w-5 h-5 text-primary" />
+                  </div>
+                  <div className="font-poppins text-xs text-gray-500 mb-1">Kids</div>
+                  <div className="font-poppins font-semibold text-gray-900">{currentPass.kids}</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Attractions Section - Redesigned */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="mb-8"
+        >
+          <Card className="border-0 shadow-lg">
+            <CardContent className="p-6">
+              {/* Section Header */}
+              <div className="flex items-center justify-between mb-5">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+                    <MapPin className="w-5 h-5 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-merchant text-lg font-semibold text-gray-900">
+                      Included Attractions
+                    </h3>
+                    <p className="font-poppins text-xs text-gray-500">
+                      Explore amazing places
+                    </p>
+                  </div>
+                </div>
+                <Badge className="bg-primary/10 text-primary border-0 px-3 py-1">
+                  <span className="font-poppins font-medium">25+ Places</span>
+                </Badge>
+              </div>
+
+              {/* Attractions Scroll */}
+              <div className="flex items-center gap-4 overflow-x-auto pb-2 scrollbar-hide mb-4">
+                {attractions.map((attraction, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ delay: 0.1 * index }}
+                    className="flex-shrink-0"
+                  >
+                    <Card className="w-40 hover:shadow-lg transition-all duration-300 border-0 bg-gradient-to-br from-gray-50 to-white cursor-pointer group">
+                      <CardContent className="p-3">
+                        {/* Image */}
+                        <div className="w-full h-24 bg-gray-200 rounded-lg mb-3 overflow-hidden">
+                          <ImageWithFallback
+                            src={attraction.image}
+                            alt={attraction.name}
+                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
+                          />
+                        </div>
+                        
+                        {/* Info */}
+                        <div>
+                          <h4 className="font-poppins font-semibold text-sm text-gray-900 mb-1 truncate">
+                            {attraction.name}
+                          </h4>
+                          <div className="flex items-center gap-1 text-xs text-primary">
+                            <Ticket className="w-3 h-3" />
+                            <span className="font-poppins font-medium">{attraction.tours}</span>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+
+              {/* View All Button */}
+              <Button 
+                variant="outline" 
+                className="w-full border-2 border-dashed border-primary/30 hover:border-primary hover:bg-primary/5 text-primary font-poppins font-medium transition-all duration-300"
+                onClick={onAttractionsClick}
+              >
+                <span>View All Attractions</span>
+                <ChevronRight className="w-4 h-4 ml-2" />
+              </Button>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Special Benefits & Offers - Redesigned */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="mb-8"
+        >
+          <Card className="border-0 shadow-lg overflow-hidden bg-gradient-to-br from-primary/5 via-white to-secondary/5">
+            <CardContent className="p-6">
+              {/* Header */}
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+                    <Gift className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-merchant text-xl font-semibold text-gray-900">
+                      Exclusive Offers
+                    </h3>
+                    <p className="font-poppins text-sm text-gray-600 font-normal">
+                      50+ special deals for cardholders
+                    </p>
+                  </div>
+                </div>
+                <Badge className="bg-gradient-to-r from-green-500 to-green-600 text-white border-0 px-3 py-1">
+                  <Sparkles className="w-3 h-3 mr-1" />
+                  <span className="font-poppins font-medium">Limited Time</span>
+                </Badge>
+              </div>
+
+              {/* Featured Offers Grid */}
+              <div className="space-y-4 mb-5">
+                {/* Offer 1 - Restaurant Discount */}
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.1 }}
+                  className="bg-gradient-to-br from-orange-50 to-red-50 rounded-xl p-4 border border-orange-200 hover:border-orange-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
+                  onClick={onOffersClick}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center">
+                        <Gift className="w-5 h-5 text-white" />
+                      </div>
+                      <div>
+                        <h4 className="font-poppins font-semibold text-base text-gray-900">
+                          Restaurant Discounts
+                        </h4>
+                        <p className="font-poppins text-xs text-gray-600 font-normal">
+                          At partner restaurants
+                        </p>
+                      </div>
+                    </div>
+                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
+                      <span className="font-merchant text-2xl font-semibold text-orange-600">25%</span>
+                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="font-poppins text-xs text-gray-700 font-normal">
+                      Valid at 30+ dining locations
+                    </p>
+                    <ChevronRight className="w-4 h-4 text-orange-600 group-hover:translate-x-1 transition-transform" />
+                  </div>
+                </motion.div>
+
+                {/* Offer 2 - Hotel Savings */}
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                  className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-4 border border-blue-200 hover:border-blue-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
+                  onClick={onOffersClick}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
+                        <Star className="w-5 h-5 text-white" />
+                      </div>
+                      <div>
+                        <h4 className="font-poppins font-semibold text-base text-gray-900">
+                          Hotel Bookings
+                        </h4>
+                        <p className="font-poppins text-xs text-gray-600 font-normal">
+                          Premium accommodations
+                        </p>
+                      </div>
+                    </div>
+                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
+                      <span className="font-merchant text-2xl font-semibold text-blue-600">15%</span>
+                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="font-poppins text-xs text-gray-700 font-normal">
+                      Exclusive rates on 100+ hotels
+                    </p>
+                    <ChevronRight className="w-4 h-4 text-blue-600 group-hover:translate-x-1 transition-transform" />
+                  </div>
+                </motion.div>
+
+                {/* Offer 3 - Shopping Deals */}
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.3 }}
+                  className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200 hover:border-pink-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
+                  onClick={onOffersClick}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center">
+                        <Sparkles className="w-5 h-5 text-white" />
+                      </div>
+                      <div>
+                        <h4 className="font-poppins font-semibold text-base text-gray-900">
+                          Shopping Vouchers
+                        </h4>
+                        <p className="font-poppins text-xs text-gray-600 font-normal">
+                          Top retail stores
+                        </p>
+                      </div>
+                    </div>
+                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
+                      <span className="font-merchant text-2xl font-semibold text-pink-600">20%</span>
+                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="font-poppins text-xs text-gray-700 font-normal">
+                      Redeemable at 50+ stores
+                    </p>
+                    <ChevronRight className="w-4 h-4 text-pink-600 group-hover:translate-x-1 transition-transform" />
+                  </div>
+                </motion.div>
+              </div>
+
+              {/* View All Offers CTA */}
+              <div className="bg-gradient-to-r from-primary/10 via-secondary/10 to-primary/10 rounded-xl p-5 border border-primary/20">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {/* User Avatars - Social Proof */}
+                    <div className="flex items-center -space-x-2">
+                      {userProfiles.slice(0, 3).map((profile, index) => (
+                        <div 
+                          key={index} 
+                          className="w-9 h-9 rounded-full border-2 border-white bg-gray-200 overflow-hidden shadow-sm"
+                          style={{ zIndex: 10 - index }}
+                        >
+                          <ImageWithFallback
+                            src={profile}
+                            alt={`User ${index + 1}`}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      ))}
+                      <div className="w-9 h-9 rounded-full border-2 border-white bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-poppins font-semibold text-xs shadow-sm">
+                        +10K
+                      </div>
+                    </div>
+                    
+                    {/* Text */}
+                    <div>
+                      <h4 className="font-poppins font-semibold text-sm text-gray-900">
+                        10,000+ Users Saved
+                      </h4>
+                      <p className="font-poppins text-xs text-gray-600 font-normal">
+                        Over $2M in total savings
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* View All Offers Button */}
+                  <Button
+                    size="sm"
+                    onClick={onOffersClick}
+                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
+                  >
+                    View All 50+ Offers
+                    <ChevronRight className="w-4 h-4 ml-1" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Main Content Grid */}
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          {/* Left Content - Dynamic Card Selection */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.4 }}
+            className="space-y-8"
+          >
+            {/* Toggle between Unlimited and Selective */}
+            <div className="flex gap-3 mb-6">
+              <Button
+                variant={cardType === 'unlimited' ? 'default' : 'outline'}
+                onClick={() => setCardType('unlimited')}
+                className="flex-1 font-poppins font-medium"
+              >
+                Unlimited Card
+              </Button>
+              <Button
+                variant={cardType === 'selective' ? 'default' : 'outline'}
+                onClick={() => setCardType('selective')}
+                className="flex-1 font-poppins font-medium"
+              >
+                Selective Card
+              </Button>
+            </div>
+
+            {cardType === 'unlimited' ? (
+              <>
+                <div className="space-y-4">
+                  <h1 className="heading-dynamic font-merchant text-4xl lg:text-5xl leading-tight">
+                    <span className="font-normal">Get</span>{' '}
+                    <span className="font-semibold text-gradient-primary">Melbourne Unlimited Card</span>
+                  </h1>
+                  
+                  <p className="font-poppins text-lg text-gray-600 leading-relaxed font-normal">
+                    Unlimited access to 25+ top Melbourne attractions. Visit as many places as you want 
+                    with one simple card and save up to 40% compared to individual tickets.
+                  </p>
+                </div>
+
+                {/* Benefits List */}
+                <div className="space-y-4">
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <CreditCard className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">Unlimited Entries</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Visit all 25+ attractions as many times as you want</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <Calendar className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">7-Day Validity</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Explore at your own pace for 7 consecutive days</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <Star className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">Skip the Queue</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Fast-track entry at major attractions</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* CTA Buttons */}
+                <div className="flex gap-4">
+                  <Button 
+                    onClick={onPassesClick}
+                    className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold h-12"
+                  >
+                    Purchase Now
+                  </Button>
+                  <Button 
+                    variant="outline"
+                    onClick={onCityCardsClick}
+                    className="font-poppins font-medium"
+                  >
+                    Learn More
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="space-y-4">
+                  <h1 className="heading-dynamic font-merchant text-4xl lg:text-5xl leading-tight">
+                    <span className="font-normal">Get</span>{' '}
+                    <span className="font-semibold text-gradient-primary">Selective Card</span>{' '}
+                    <span className="font-normal">now</span>
+                  </h1>
+                  
+                  <p className="font-poppins text-lg text-gray-600 leading-relaxed font-normal">
+                    Choose your own adventure with 12 hand-picked attractions. Perfect for visitors 
+                    who want flexibility and great value for money.
+                  </p>
+                </div>
+
+                {/* Benefits List */}
+                <div className="space-y-4">
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <CheckCircle className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">12 Curated Attractions</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Choose from the best Melbourne has to offer</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <Calendar className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">Flexible 7-Day Period</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Plan your visits within a week</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+                      <Sparkles className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg font-medium mb-1">40% Savings</h3>
+                      <p className="font-poppins text-sm text-gray-600 font-normal">Save big on combined ticket prices</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* CTA Buttons */}
+                <div className="flex gap-4">
+                  <Button 
+                    onClick={onPassesClick}
+                    className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold h-12"
+                  >
+                    Purchase Now
+                  </Button>
+                  <Button 
+                    variant="outline"
+                    onClick={onAttractionsClick}
+                    className="font-poppins font-medium"
+                  >
+                    View Attractions
+                  </Button>
+                </div>
+              </>
+            )}
+          </motion.div>
+
+          {/* Right Content - Card Preview */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.5 }}
+            className="flex justify-center lg:justify-end"
+          >
+            <Card className="w-full max-w-md overflow-hidden border-2 border-primary/20 shadow-2xl">
+              <div className={`h-3 bg-gradient-to-r ${cardType === 'unlimited' ? 'from-yellow-400 via-primary to-secondary' : 'from-blue-400 via-primary to-purple-500'}`}></div>
+              <CardContent className="p-8 space-y-6">
+                {/* Card Header */}
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h3 className="font-merchant text-2xl font-semibold mb-2">
+                      {cardType === 'unlimited' ? 'Melbourne Unlimited' : 'Melbourne Selective'}
+                    </h3>
+                    <Badge className="bg-gradient-to-r from-primary to-secondary text-white">
+                      {cardType === 'unlimited' ? 'Most Popular' : 'Great Value'}
+                    </Badge>
+                  </div>
+                  <CreditCard className="w-12 h-12 text-primary" />
+                </div>
+
+                {/* Pricing */}
+                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-6 text-center">
+                  <div className="text-4xl font-merchant font-semibold text-primary mb-2">
+                    ${cardType === 'unlimited' ? '149' : '89'}
+                  </div>
+                  <div className="text-sm font-poppins text-gray-600 font-normal line-through mb-1">
+                    ${cardType === 'unlimited' ? '249' : '149'}
+                  </div>
+                  <Badge variant="secondary" className="font-poppins font-medium">
+                    Save {cardType === 'unlimited' ? '40' : '40'}%
+                  </Badge>
+                </div>
+
+                {/* Features */}
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
+                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span>{cardType === 'unlimited' ? '25+' : '12'} Amazing Attractions</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
+                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span>Valid for 7 Days</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
+                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span>{cardType === 'unlimited' ? 'Unlimited visits' : 'One visit per attraction'}</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
+                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
+                    <span>Digital & Physical Card</span>
+                  </div>
+                </div>
+
+                {/* Visual Decoration */}
+                <div className="flex justify-between items-center pt-4 border-t border-gray-200">
+                  <MapPin className="w-6 h-6 text-gray-400" />
+                  <div className="flex gap-2">
+                    <div className="w-8 h-8 rounded-full bg-primary/10"></div>
+                    <div className="w-8 h-8 rounded-full bg-secondary/10"></div>
+                    <div className="w-8 h-8 rounded-full bg-primary/20"></div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/EnhancedTestimonials.tsx b/src/components/EnhancedTestimonials.tsx
new file mode 100644
index 0000000..4dad832
--- /dev/null
+++ b/src/components/EnhancedTestimonials.tsx
@@ -0,0 +1,323 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+
+const QuoteStart = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.318.142-.686.238-1.028.466-.344.218-.738.411-1.091.746-.363.334-.738.632-1.062 1.004-.324.363-.61.747-.822 1.131-.424.199-.924.471-1.397.991C.598 7.391.047 8.26.01 9.444c-.037 1.218.5 2.407 1.351 3.202.851.794 2.024 1.203 3.197 1.116 1.173-.087 2.317-.68 3.035-1.603.718-.924.968-2.19.68-3.364-.287-1.174-1.239-2.206-2.474-2.583C5.799 5.787 4.74 6.27 4.027 7.104c-.712.834-.91 1.97-.537 2.972z"/>
+  </svg>
+);
+
+const QuoteEnd = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M17.5 14c.223 0 .437-.034.65-.065-.069.232-.14.468-.254.68-.114.308-.292.575-.469.844-.148.291-.409.488-.601.737-.201.242-.475.403-.692.604-.213.21-.492.315-.714.463-.232.133-.434.28-.65.35l-.539.222-.474.197.485 1.938.597-.144c.191-.048.424-.104.689-.171.271-.05.56-.187.882-.312.318-.142.686-.238 1.028-.466.344-.218.738-.411 1.091-.746.363-.334.738-.632 1.062-1.004.324-.363.61-.747.822-1.131.424-.199.924-.471 1.397-.991 1.019.388 1.57-1.481 1.607-2.665.037-1.218-.5-2.407-1.351-3.202-.851-.794-2.024-1.203-3.197-1.116-1.173.087-2.317.68-3.035 1.603-.718.924-.968 2.19-.68 3.364.287 1.174 1.239 2.206 2.474 2.583z"/>
+  </svg>
+);
+
+interface Testimonial {
+  id: number;
+  quote: string;
+  name: string;
+  company: string;
+  signature: string;
+}
+
+const testimonials: Testimonial[] = [
+  {
+    id: 1,
+    quote: "CityCards transformed our Melbourne trip into an unforgettable adventure. The seamless access to attractions and insider recommendations made every moment magical.",
+    name: "Sarah Chen",
+    company: "Travel Blogger",
+    signature: "Sarah"
+  },
+  {
+    id: 2,
+    quote: "As a frequent business traveler, CityCards saves me time and money. The convenience of having everything in one place is incredible - no more queuing or hassle!",
+    name: "Michael Torres",
+    company: "Business Executive", 
+    signature: "Michael"
+  },
+  {
+    id: 3,
+    quote: "The family pass was perfect for our vacation. Our kids loved the instant access to attractions, and we loved the savings. Highly recommended for family trips!",
+    name: "Emma Wilson", 
+    company: "Marketing Manager",
+    signature: "Emma"
+  },
+  {
+    id: 4,
+    quote: "CityCards made exploring Melbourne so easy and affordable. The local insights and recommendations helped us discover hidden gems we never would have found otherwise.",
+    name: "James Rodriguez",
+    company: "Photographer",
+    signature: "James"
+  },
+  {
+    id: 5,
+    quote: "Incredible value and convenience! The mobile app worked flawlessly, and having all attraction entries pre-paid meant we could focus on enjoying our honeymoon.",
+    name: "Lisa Thompson",
+    company: "Teacher",
+    signature: "Lisa"
+  }
+];
+
+export function EnhancedTestimonials() {
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
+
+  // Calculate dynamic card rotation and offset
+  const getCardStyle = (index: number) => {
+    const baseRotation = (index % 3 - 1) * 1.5; // -1.5, 0, 1.5 degrees
+    const hoverRotation = hoveredCard === testimonials[index].id ? 0 : baseRotation;
+    const cardRotation = hoverRotation + (Math.sin(index * 0.5) * 0.8);
+    const cardOffset = Math.cos(index * 0.7) * 2;
+    
+    return { cardRotation, cardOffset };
+  };
+
+  return (
+    <section className="py-20 lg:py-32 bg-gradient-to-b from-muted/20 to-background relative overflow-hidden">
+      {/* Background decorative elements */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="absolute top-20 left-20 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-20 right-20 w-40 h-40 bg-secondary/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Section Header */}
+        <motion.div
+          className="text-center mb-16 lg:mb-20"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <h2 className="text-4xl lg:text-5xl xl:text-6xl mb-6">
+            <span className="font-light">What our</span>{' '}
+            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic">
+              travelers
+            </span>{' '}
+            <span className="font-normal">say</span>
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+            Real stories from travelers who've discovered the magic of seamless city exploration with CityCards
+          </p>
+        </motion.div>
+
+        {/* Testimonials Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 max-w-4xl mx-auto">
+          {testimonials.slice(0, 2).map((testimonial, index) => {
+            const { cardRotation, cardOffset } = getCardStyle(index);
+            
+            return (
+              <motion.div
+                key={testimonial.id}
+                className="flex justify-center"
+                initial={{ opacity: 0, y: 40 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ 
+                  duration: 0.7, 
+                  delay: index * 0.1,
+                  ease: "easeOut" 
+                }}
+                onMouseEnter={() => setHoveredCard(testimonial.id)}
+                onMouseLeave={() => setHoveredCard(null)}
+              >
+                <div
+                  className="relative bg-white rounded-lg p-8"
+                  style={{
+                    transform: `rotate(${cardRotation}deg) translateY(${cardOffset}px)`,
+                    transformOrigin: 'center center',
+                    minHeight: '480px',
+                    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%),
+                      linear-gradient(145deg, #ffffff 0%, #fefefe 25%, #fdfdfd 50%, #fcfcfc 75%, #fbfbfb 100%)
+                    `,
+                    boxShadow: `
+                      0 8px 32px rgba(0, 0, 0, 0.12),
+                      0 4px 16px rgba(0, 0, 0, 0.08),
+                      0 2px 8px rgba(0, 0, 0, 0.06),
+                      inset 0 1px 0 rgba(255, 255, 255, 0.8),
+                      inset 0 -1px 0 rgba(0, 0, 0, 0.02)
+                    `,
+                    border: '1px solid rgba(0, 0, 0, 0.04)',
+                    filter: hoveredCard === testimonial.id ? 'brightness(1.02)' : 'brightness(1)',
+                    transition: 'all 0.3s ease'
+                  }}
+                >
+                  {/* Enhanced paper texture */}
+                  <div 
+                    className="absolute inset-0 rounded-lg opacity-40 pointer-events-none"
+                    style={{
+                      backgroundImage: `
+                        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f5f0e8' fill-opacity='0.4'%3E%3Cpath d='M10 10h1v1h-1zM20 15h1v1h-1zM30 25h1v1h-1zM40 30h1v1h-1zM50 40h1v1h-1zM15 50h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E"),
+                        radial-gradient(circle at 25% 75%, rgba(245, 240, 232, 0.3) 0%, transparent 40%),
+                        radial-gradient(circle at 75% 25%, rgba(250, 245, 235, 0.2) 0%, transparent 35%)
+                      `,
+                      mixBlendMode: 'multiply'
+                    }}
+                  />
+
+                  {/* Paper creases and folds */}
+                  <div 
+                    className="absolute inset-0 rounded-lg opacity-20 pointer-events-none"
+                    style={{
+                      background: `
+                        linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.02) 45%, rgba(0,0,0,0.01) 55%, transparent 60%),
+                        linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.015) 35%, transparent 40%)
+                      `
+                    }}
+                  />
+
+                  {/* Corner fold effect */}
+                  <div 
+                    className="absolute top-0 right-0 w-12 h-12 opacity-15 pointer-events-none"
+                    style={{
+                      background: `
+                        linear-gradient(-45deg, 
+                          transparent 40%, 
+                          rgba(0,0,0,0.08) 45%, 
+                          rgba(0,0,0,0.12) 50%, 
+                          rgba(0,0,0,0.08) 55%, 
+                          transparent 60%
+                        )
+                      `,
+                      borderTopRightRadius: '8px',
+                      clipPath: 'polygon(60% 0%, 100% 0%, 100% 60%)'
+                    }}
+                  />
+
+                  {/* Paperclip decoration */}
+                  <div 
+                    className="absolute -top-2 -right-2 w-8 h-12 opacity-60 pointer-events-none z-10"
+                    style={{
+                      background: `
+                        linear-gradient(145deg, #e0e0e0 0%, #d0d0d0 50%, #c8c8c8 100%)
+                      `,
+                      borderRadius: '2px 2px 4px 4px',
+                      boxShadow: `
+                        0 2px 4px rgba(0,0,0,0.1),
+                        inset 0 1px 0 rgba(255,255,255,0.5),
+                        inset 0 -1px 0 rgba(0,0,0,0.1)
+                      `,
+                      transform: 'rotate(8deg)'
+                    }}
+                  >
+                    <div 
+                      className="absolute inset-1 border border-gray-400 rounded-sm"
+                      style={{
+                        background: 'transparent',
+                        borderStyle: 'solid',
+                        borderWidth: '1px'
+                      }}
+                    />
+                  </div>
+
+                  {/* Tape effect on left edge */}
+                  <div 
+                    className="absolute -left-1 top-16 w-4 h-16 opacity-30 pointer-events-none"
+                    style={{
+                      background: `
+                        linear-gradient(90deg, 
+                          rgba(255,255,220,0.8) 0%, 
+                          rgba(255,255,220,0.6) 50%, 
+                          rgba(255,255,220,0.4) 100%
+                        )
+                      `,
+                      borderRadius: '2px',
+                      boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',
+                      transform: 'rotate(-2deg)'
+                    }}
+                  />
+
+                  {/* Enhanced quotation marks */}
+                  <div className="mb-6">
+                    <QuoteStart className="w-8 h-8 text-amber-700/30 mb-4" />
+                    <p 
+                      className="text-gray-700 leading-relaxed text-base relative z-10 font-poppins"
+                    >
+                      {testimonial.quote}
+                    </p>
+                    <div className="flex justify-end mt-2">
+                      <QuoteEnd className="w-6 h-6 text-amber-700/30" />
+                    </div>
+                  </div>
+
+                  {/* Enhanced Profile Section with sticker effect */}
+                  <div className="mb-8 relative z-10">
+                    <div className="font-semibold text-gray-900 text-lg font-poppins">
+                      {testimonial.name}
+                    </div>
+                    <div className="text-gray-600 text-sm font-poppins">
+                      {testimonial.company}
+                    </div>
+                  </div>
+
+                  {/* Enhanced signature with writing animation */}
+                  <div className="flex justify-end relative z-10">
+                    <motion.div 
+                      className="text-right transform -rotate-1"
+                      initial={{ pathLength: 0, opacity: 0 }}
+                      whileInView={{ 
+                        pathLength: 1, 
+                        opacity: 1,
+                        transition: { 
+                          pathLength: { duration: 2, delay: index * 0.1 },
+                          opacity: { duration: 0.5, delay: index * 0.1 }
+                        }
+                      }}
+                      viewport={{ once: true }}
+                      style={{
+                        fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+                        fontSize: '32px',
+                        color: 'rgba(101, 84, 63, 0.8)',
+                        textShadow: `
+                          1px 1px 2px rgba(0, 0, 0, 0.1),
+                          0 0 4px rgba(101, 84, 63, 0.2)
+                        `,
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))'
+                      }}
+                    >
+                      {testimonial.signature}
+                    </motion.div>
+                  </div>
+
+                  {/* Subtle aging spots */}
+                  <div 
+                    className="absolute w-3 h-3 rounded-full opacity-8 pointer-events-none"
+                    style={{
+                      background: 'radial-gradient(circle, rgba(160, 120, 80, 0.15) 0%, transparent 70%)',
+                      top: '15%',
+                      right: '20%'
+                    }}
+                  />
+                  <div 
+                    className="absolute w-2 h-2 rounded-full opacity-8 pointer-events-none"
+                    style={{
+                      background: 'radial-gradient(circle, rgba(140, 110, 70, 0.12) 0%, transparent 70%)',
+                      bottom: '25%',
+                      left: '15%'
+                    }}
+                  />
+
+                  {/* Pin shadow effect */}
+                  {index % 3 === 0 && (
+                    <div 
+                      className="absolute w-2 h-2 rounded-full opacity-20 pointer-events-none"
+                      style={{
+                        background: 'radial-gradient(circle, rgba(0,0,0,0.3) 0%, transparent 70%)',
+                        top: '8px',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        filter: 'blur(1px)'
+                      }}
+                    />
+                  )}
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/EsimsPage.tsx b/src/components/EsimsPage.tsx
new file mode 100644
index 0000000..6167d69
--- /dev/null
+++ b/src/components/EsimsPage.tsx
@@ -0,0 +1,1481 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  Search, Wifi, Globe, MapPin, Smartphone, Check, X, ChevronRight, 
+  Shield, Zap, Clock, Star, ChevronDown, Filter, SlidersHorizontal,
+  Signal, Plane, ArrowRight, Download, QrCode, Users, TrendingUp,
+  CheckCircle2, XCircle, AlertCircle, Plus, Minus, Phone, MessageSquare,
+  Headphones, ShoppingBag
+} from 'lucide-react';
+import Navbar from './Navbar';
+import { SubNavbar } from './SubNavbar';
+import { Footer } from './Footer';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from './ui/card';
+import { Badge } from './ui/badge';
+import { Separator } from './ui/separator';
+import { Slider } from './ui/slider';
+import { Checkbox } from './ui/checkbox';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+
+interface EsimsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user?: { email: string; name: string } | null;
+}
+
+// Mock data for eSIM plans
+const esimPlans = [
+  {
+    id: '1',
+    country: 'United States',
+    region: 'North America',
+    flag: '🇺🇸',
+    data: '10GB',
+    validity: '30 days',
+    price: 29,
+    originalPrice: 49,
+    discount: 41,
+    networks: ['AT&T', 'T-Mobile'],
+    coverage: '5G',
+    popular: true,
+    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Data rollover']
+  },
+  {
+    id: '2',
+    country: 'Europe (33 Countries)',
+    region: 'Europe',
+    flag: '🇪🇺',
+    data: '20GB',
+    validity: '30 days',
+    price: 39,
+    originalPrice: 69,
+    discount: 43,
+    networks: ['Vodafone', 'Orange'],
+    coverage: '5G',
+    popular: true,
+    features: ['Multi-country', 'Instant activation', 'No roaming charges', '24/7 support']
+  },
+  {
+    id: '3',
+    country: 'Japan',
+    region: 'Asia',
+    flag: '🇯🇵',
+    data: '8GB',
+    validity: '15 days',
+    price: 24,
+    originalPrice: 39,
+    discount: 38,
+    networks: ['NTT Docomo', 'SoftBank'],
+    coverage: '5G',
+    popular: false,
+    features: ['Instant activation', 'No roaming charges', '24/7 support']
+  },
+  {
+    id: '4',
+    country: 'Australia',
+    region: 'Oceania',
+    flag: '🇦🇺',
+    data: '15GB',
+    validity: '30 days',
+    price: 34,
+    originalPrice: 59,
+    discount: 42,
+    networks: ['Telstra', 'Optus'],
+    coverage: '5G',
+    popular: true,
+    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Hotspot enabled']
+  },
+  {
+    id: '5',
+    country: 'Global (150+ Countries)',
+    region: 'Global',
+    flag: '🌍',
+    data: '50GB',
+    validity: '90 days',
+    price: 89,
+    originalPrice: 149,
+    discount: 40,
+    networks: ['Multiple Partners'],
+    coverage: '4G/5G',
+    popular: true,
+    features: ['Multi-country', 'Instant activation', 'No roaming charges', '24/7 support', 'Data rollover']
+  },
+  {
+    id: '6',
+    country: 'United Kingdom',
+    region: 'Europe',
+    flag: '🇬🇧',
+    data: '12GB',
+    validity: '30 days',
+    price: 32,
+    originalPrice: 54,
+    discount: 41,
+    networks: ['EE', 'Vodafone'],
+    coverage: '5G',
+    popular: false,
+    features: ['Instant activation', 'No roaming charges', '24/7 support']
+  },
+  {
+    id: '7',
+    country: 'Canada',
+    region: 'North America',
+    flag: '🇨🇦',
+    data: '12GB',
+    validity: '30 days',
+    price: 31,
+    originalPrice: 52,
+    discount: 40,
+    networks: ['Rogers', 'Bell'],
+    coverage: '5G',
+    popular: false,
+    features: ['Instant activation', 'No roaming charges', '24/7 support']
+  },
+  {
+    id: '8',
+    country: 'Singapore',
+    region: 'Asia',
+    flag: '🇸🇬',
+    data: '10GB',
+    validity: '15 days',
+    price: 22,
+    originalPrice: 38,
+    discount: 42,
+    networks: ['Singtel', 'StarHub'],
+    coverage: '5G',
+    popular: false,
+    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Hotspot enabled']
+  }
+];
+
+const regions = ['All', 'Europe', 'North America', 'Asia', 'Oceania', 'Middle East', 'Global'];
+
+const deviceBrands = ['Apple', 'Samsung', 'Google', 'Huawei', 'OnePlus', 'Xiaomi', 'OPPO', 'Other'];
+
+const appleModels = [
+  'iPhone 15 Pro Max', 'iPhone 15 Pro', 'iPhone 15 Plus', 'iPhone 15',
+  'iPhone 14 Pro Max', 'iPhone 14 Pro', 'iPhone 14 Plus', 'iPhone 14',
+  'iPhone 13 Pro Max', 'iPhone 13 Pro', 'iPhone 13', 'iPhone 13 mini',
+  'iPhone 12 Pro Max', 'iPhone 12 Pro', 'iPhone 12', 'iPhone 12 mini',
+  'iPhone 11 Pro Max', 'iPhone 11 Pro', 'iPhone 11',
+  'iPhone XS Max', 'iPhone XS', 'iPhone XR'
+];
+
+const samsungModels = [
+  'Galaxy S24 Ultra', 'Galaxy S24+', 'Galaxy S24',
+  'Galaxy S23 Ultra', 'Galaxy S23+', 'Galaxy S23',
+  'Galaxy S22 Ultra', 'Galaxy S22+', 'Galaxy S22',
+  'Galaxy S21 Ultra', 'Galaxy S21+', 'Galaxy S21',
+  'Galaxy Z Fold 5', 'Galaxy Z Fold 4', 'Galaxy Z Flip 5', 'Galaxy Z Flip 4'
+];
+
+const faqs = [
+  {
+    question: 'What is an eSIM?',
+    answer: 'An eSIM is a digital SIM card that allows you to activate a cellular plan without using a physical SIM card. It\'s built into your device and can be activated instantly by scanning a QR code or through your device settings.'
+  },
+  {
+    question: 'How do I know if my device supports eSIM?',
+    answer: 'Most modern smartphones from iPhone XS/XR onwards, Google Pixel 3 and later, Samsung Galaxy S20 and newer models support eSIM. Use our compatibility checker above to verify your specific device model.'
+  },
+  {
+    question: 'How quickly can I activate my eSIM?',
+    answer: 'Activation is instant! Once you purchase, you\'ll receive a QR code via email within minutes. Simply scan the code with your device, and you\'ll be connected in 2-3 minutes.'
+  },
+  {
+    question: 'Can I use my eSIM in multiple countries?',
+    answer: 'Yes! Our regional and global eSIM plans work across multiple countries. Check the plan details to see which countries are included in your selected package.'
+  },
+  {
+    question: 'Will my eSIM work with my existing SIM card?',
+    answer: 'Absolutely! Most eSIM-compatible devices support dual SIM functionality, allowing you to keep your primary number active while using the eSIM for data.'
+  },
+  {
+    question: 'What happens if I run out of data?',
+    answer: 'You can easily top up your data through our app or website. Additional data packages can be added to your existing eSIM without needing a new QR code.'
+  },
+  {
+    question: 'Do I need to remove my physical SIM?',
+    answer: 'No, you don\'t need to remove your physical SIM card. Your device can run both simultaneously, and you can choose which one to use for data, calls, and messages in your settings.'
+  },
+  {
+    question: 'Is there a contract or commitment?',
+    answer: 'No contracts! All our eSIM plans are prepaid with no hidden fees or commitments. Pay only for what you need, when you need it.'
+  }
+];
+
+const testimonials = [
+  {
+    id: 1,
+    name: 'Sarah Johnson',
+    location: 'New York, USA',
+    rating: 5,
+    text: 'Used the Europe eSIM for my 2-week trip. Setup was instant and I had perfect connectivity everywhere!',
+    avatar: '👩'
+  },
+  {
+    id: 2,
+    name: 'Michael Chen',
+    location: 'Toronto, Canada',
+    rating: 5,
+    text: 'The global plan saved me so much money. No more ridiculous roaming charges!',
+    avatar: '👨'
+  },
+  {
+    id: 3,
+    name: 'Emma Williams',
+    location: 'London, UK',
+    rating: 5,
+    text: 'Customer support was amazing when I had questions. Highly recommend!',
+    avatar: '👩‍🦰'
+  }
+];
+
+export function EsimsPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: EsimsPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedRegion, setSelectedRegion] = useState('All');
+  const [showFilters, setShowFilters] = useState(false);
+  const [tripDuration, setTripDuration] = useState([30]);
+  const [selectedBrand, setSelectedBrand] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+  const [compatibilityResult, setCompatibilityResult] = useState<'compatible' | 'incompatible' | null>(null);
+  const [dataUsage, setDataUsage] = useState({ social: 2, maps: 1, video: 1, browsing: 2 });
+  const [showComparison, setShowComparison] = useState(false);
+  const [comparisonPlans, setComparisonPlans] = useState<string[]>([]);
+
+  const filteredPlans = esimPlans.filter(plan => {
+    const matchesSearch = plan.country.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesRegion = selectedRegion === 'All' || plan.region === selectedRegion;
+    return matchesSearch && matchesRegion;
+  });
+
+  const handleCheckCompatibility = () => {
+    if (selectedBrand && selectedModel) {
+      // Mock compatibility check - most modern devices are compatible
+      const compatible = Math.random() > 0.15; // 85% compatible
+      setCompatibilityResult(compatible ? 'compatible' : 'incompatible');
+    }
+  };
+
+  const calculateRecommendedData = () => {
+    const total = (dataUsage.social * 0.5) + (dataUsage.maps * 0.3) + (dataUsage.video * 2) + (dataUsage.browsing * 0.4);
+    return Math.ceil(total * tripDuration[0]);
+  };
+
+  const toggleComparison = (planId: string) => {
+    if (comparisonPlans.includes(planId)) {
+      setComparisonPlans(comparisonPlans.filter(id => id !== planId));
+    } else if (comparisonPlans.length < 3) {
+      setComparisonPlans([...comparisonPlans, planId]);
+    }
+  };
+
+  const getModelOptions = () => {
+    switch (selectedBrand) {
+      case 'Apple':
+        return appleModels;
+      case 'Samsung':
+        return samsungModels;
+      default:
+        return ['Select a brand first'];
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* SubNavbar for Products */}
+      <SubNavbar
+        activeTab="esims"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      {/* Hero Section */}
+      <section className="relative pt-52 pb-20 overflow-hidden">
+        {/* Background Image */}
+        <div className="absolute inset-0 z-0">
+          <ImageWithFallback
+            src="https://images.unsplash.com/photo-1759255260738-7691d52296eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwc2t5bGluZSUyMGNvbm5lY3Rpdml0eXxlbnwxfHx8fDE3NTkzMjAzOTR8MA&ixlib=rb-4.1.0&q=80&w=1080"
+            alt="City Connectivity"
+            className="w-full h-full object-cover opacity-5"
+          />
+        </div>
+        
+        {/* Decorative gradient overlays */}
+        <div className="absolute top-20 right-10 w-72 h-72 bg-gradient-to-br from-primary/20 to-blue-500/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-10 left-10 w-96 h-96 bg-gradient-to-tr from-blue-200/30 to-purple-200/30 rounded-full blur-3xl" />
+
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center max-w-4xl mx-auto"
+          >
+            <Badge className="mb-6 bg-gradient-to-r from-primary to-blue-500 text-white font-poppins font-medium px-4 py-2 min-h-[44px] inline-flex items-center">
+              <Wifi className="w-4 h-4 mr-2" />
+              Instant Connectivity Worldwide
+            </Badge>
+
+            <h1 className="font-merchant mb-6 leading-tight">
+              <span className="block text-3xl md:text-4xl lg:text-5xl font-light mb-2">Stay Connected with</span>
+              <span className="block text-4xl md:text-5xl lg:text-6xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                CityCards eSIMs
+              </span>
+            </h1>
+
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
+              Instant setup • Local rates • 5G coverage
+            </p>
+
+            {/* CTAs */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
+              <Button
+                onClick={() => {
+                  document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className="bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold px-8 py-6 min-h-[44px]"
+              >
+                Find Your Plan
+                <ChevronRight className="w-5 h-5 ml-2" />
+              </Button>
+              <Button
+                onClick={() => {
+                  document.getElementById('compatibility')?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                variant="outline"
+                className="border-2 border-primary text-primary hover:bg-primary/10 font-poppins font-medium px-8 py-6 min-h-[44px]"
+              >
+                <Smartphone className="w-5 h-5 mr-2" />
+                Check Compatibility
+              </Button>
+            </div>
+
+            {/* Trust badges */}
+            <div className="flex flex-wrap justify-center gap-8 items-center">
+              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
+                <Shield className="w-5 h-5 text-primary" />
+                <span>Secure Checkout</span>
+              </div>
+              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
+                <Zap className="w-5 h-5 text-primary" />
+                <span>Instant Delivery</span>
+              </div>
+              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
+                <Signal className="w-5 h-5 text-primary" />
+                <span>150+ Partner Networks</span>
+              </div>
+              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
+                <Clock className="w-5 h-5 text-primary" />
+                <span>24/7 Support</span>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Plan Finder Module */}
+      <section id="plan-finder" className="py-16 bg-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-6xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Find Your</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Perfect Plan
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+                Choose from our wide selection of eSIM plans for travelers
+              </p>
+            </div>
+
+            {/* Search Bar */}
+            <div className="mb-8">
+              <div className="relative max-w-2xl mx-auto">
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="text"
+                  placeholder="Search by country or region..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-12 pr-4 py-6 font-poppins leading-relaxed font-normal border-2 border-gray-200 focus:border-primary rounded-xl min-h-[44px]"
+                />
+              </div>
+            </div>
+
+            {/* Quick Selection Chips */}
+            <div className="flex flex-wrap justify-center gap-3 mb-8">
+              {regions.map((region) => (
+                <button
+                  key={region}
+                  onClick={() => setSelectedRegion(region)}
+                  className={`px-6 py-3 rounded-full font-poppins font-medium transition-all duration-200 min-h-[44px] ${
+                    selectedRegion === region
+                      ? 'bg-gradient-to-r from-primary to-blue-500 text-white shadow-lg scale-105'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
+                >
+                  {region}
+                </button>
+              ))}
+            </div>
+
+            {/* Filter Toggle */}
+            <div className="flex justify-center mb-8">
+              <Button
+                onClick={() => setShowFilters(!showFilters)}
+                variant="outline"
+                className="font-poppins font-medium min-h-[44px]"
+              >
+                <SlidersHorizontal className="w-4 h-4 mr-2" />
+                {showFilters ? 'Hide Filters' : 'Show Filters'}
+              </Button>
+            </div>
+
+            {/* Advanced Filters */}
+            <AnimatePresence>
+              {showFilters && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.3 }}
+                  className="mb-8 p-6 bg-gray-50 rounded-xl"
+                >
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                      <label className="font-poppins font-medium mb-3 block">
+                        Trip Duration (days)
+                      </label>
+                      <Slider
+                        value={tripDuration}
+                        onValueChange={setTripDuration}
+                        max={90}
+                        min={1}
+                        step={1}
+                        className="mb-2"
+                      />
+                      <p className="font-poppins leading-relaxed font-normal text-gray-600">{tripDuration[0]} days</p>
+                    </div>
+                    <div>
+                      <label className="font-poppins font-medium mb-3 block">
+                        Coverage Type
+                      </label>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Checkbox id="5g" />
+                          <label htmlFor="5g" className="font-poppins leading-relaxed font-normal">5G Coverage</label>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Checkbox id="4g" />
+                          <label htmlFor="4g" className="font-poppins leading-relaxed font-normal">4G/LTE Coverage</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            {/* Plan Cards Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 pt-4">
+              {filteredPlans.map((plan, index) => (
+                <motion.div
+                  key={plan.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: index * 0.1 }}
+                >
+                  <Card className="relative overflow-visible hover:shadow-2xl transition-shadow duration-300 h-full flex flex-col">
+                    {plan.popular && (
+                      <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10">
+                        <Badge className="bg-gradient-to-r from-orange-500 to-red-500 text-white font-poppins font-semibold shadow-lg px-3 py-1 whitespace-nowrap">
+                          <Star className="w-3 h-3 mr-1" />
+                          Most Popular
+                        </Badge>
+                      </div>
+                    )}
+                    
+                    <CardHeader>
+                      <div className="flex items-center gap-3 mb-3">
+                        <span className="text-4xl">{plan.flag}</span>
+                        <div className="flex-1">
+                          <CardTitle className="font-merchant font-semibold mb-1">
+                            {plan.country}
+                          </CardTitle>
+                          <CardDescription className="font-poppins leading-relaxed font-normal">
+                            {plan.region}
+                          </CardDescription>
+                        </div>
+                      </div>
+
+                      <div className="flex items-baseline gap-2 mb-2">
+                        <span className="font-poppins font-semibold text-primary">
+                          ${plan.price}
+                        </span>
+                        <span className="font-poppins leading-relaxed font-normal text-gray-400 line-through">
+                          ${plan.originalPrice}
+                        </span>
+                        <Badge variant="outline" className="ml-auto font-poppins font-normal">
+                          -{plan.discount}%
+                        </Badge>
+                      </div>
+                    </CardHeader>
+
+                    <CardContent className="flex-1">
+                      <div className="space-y-3">
+                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                          <Download className="w-4 h-4 text-primary" />
+                          <span className="font-medium">{plan.data}</span>
+                          <span className="text-gray-500">Data</span>
+                        </div>
+                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                          <Clock className="w-4 h-4 text-primary" />
+                          <span className="font-medium">{plan.validity}</span>
+                          <span className="text-gray-500">Validity</span>
+                        </div>
+                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                          <Signal className="w-4 h-4 text-primary" />
+                          <span className="font-medium">{plan.coverage}</span>
+                          <span className="text-gray-500">Coverage</span>
+                        </div>
+                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                          <Wifi className="w-4 h-4 text-primary" />
+                          <span className="font-medium">{plan.networks.join(', ')}</span>
+                        </div>
+                      </div>
+
+                      <Separator className="my-4" />
+
+                      <div className="space-y-2">
+                        {plan.features.slice(0, 3).map((feature, idx) => (
+                          <div key={idx} className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
+                            <Check className="w-3 h-3 text-green-600" />
+                            <span>{feature}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+
+                    <CardFooter className="flex flex-col gap-2">
+                      <Button
+                        onClick={onCheckoutClick}
+                        className="w-full bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
+                      >
+                        Add to Cart
+                        <ArrowRight className="w-4 h-4 ml-2" />
+                      </Button>
+                      <Button
+                        onClick={() => toggleComparison(plan.id)}
+                        variant="outline"
+                        className="w-full font-poppins font-medium min-h-[44px]"
+                        disabled={!comparisonPlans.includes(plan.id) && comparisonPlans.length >= 3}
+                      >
+                        {comparisonPlans.includes(plan.id) ? (
+                          <>
+                            <Check className="w-4 h-4 mr-2" />
+                            Added to Compare
+                          </>
+                        ) : (
+                          'Compare'
+                        )}
+                      </Button>
+                    </CardFooter>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Comparison Bar */}
+            <AnimatePresence>
+              {comparisonPlans.length > 0 && (
+                <motion.div
+                  initial={{ opacity: 0, y: 50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 50 }}
+                  className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40 bg-white shadow-2xl rounded-full px-8 py-4 border border-gray-200"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="font-poppins font-medium">
+                      {comparisonPlans.length} {comparisonPlans.length === 1 ? 'plan' : 'plans'} selected
+                    </span>
+                    <Button
+                      onClick={() => setShowComparison(true)}
+                      className="bg-gradient-to-r from-primary to-blue-500 text-white font-poppins font-semibold min-h-[44px]"
+                      disabled={comparisonPlans.length < 2}
+                    >
+                      Compare Plans
+                    </Button>
+                    <Button
+                      onClick={() => setComparisonPlans([])}
+                      variant="ghost"
+                      className="font-poppins font-medium min-h-[44px]"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Featured Plans Section */}
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Trending</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  This Month
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                Most popular destinations and bundle deals
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+              {/* Bundle Card 1 */}
+              <Card className="bg-gradient-to-br from-blue-600 to-purple-600 text-white border-0 overflow-hidden relative">
+                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
+                <CardHeader>
+                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
+                    <TrendingUp className="w-3 h-3 mr-1" />
+                    Multi-Country
+                  </Badge>
+                  <CardTitle className="font-merchant font-semibold mb-2">
+                    Europe Explorer
+                  </CardTitle>
+                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
+                    Perfect for European adventures
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="mb-4">
+                    <span className="font-poppins font-semibold">$89</span>
+                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$149</span>
+                  </div>
+                  <div className="space-y-2 mb-6">
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>50GB across 33 countries</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>90-day validity</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>5G where available</span>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={onCheckoutClick}
+                    className="w-full bg-white text-blue-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
+                  >
+                    Get Bundle Deal
+                  </Button>
+                </CardContent>
+              </Card>
+
+              {/* Bundle Card 2 */}
+              <Card className="bg-gradient-to-br from-orange-500 to-red-500 text-white border-0 overflow-hidden relative">
+                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
+                <CardHeader>
+                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
+                    <Users className="w-3 h-3 mr-1" />
+                    Family Plan
+                  </Badge>
+                  <CardTitle className="font-merchant font-semibold mb-2">
+                    Family Share
+                  </CardTitle>
+                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
+                    Save 30% for 3+ travelers
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="mb-4">
+                    <span className="font-poppins font-semibold">$149</span>
+                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$214</span>
+                  </div>
+                  <div className="space-y-2 mb-6">
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>100GB shared data pool</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>3-5 connected devices</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>Valid for 60 days</span>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={onCheckoutClick}
+                    className="w-full bg-white text-orange-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
+                  >
+                    Get Family Plan
+                  </Button>
+                </CardContent>
+              </Card>
+
+              {/* Bundle Card 3 */}
+              <Card className="bg-gradient-to-br from-green-500 to-teal-500 text-white border-0 overflow-hidden relative">
+                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
+                <CardHeader>
+                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
+                    <Plane className="w-3 h-3 mr-1" />
+                    Business Travel
+                  </Badge>
+                  <CardTitle className="font-merchant font-semibold mb-2">
+                    Global Professional
+                  </CardTitle>
+                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
+                    For frequent business travelers
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="mb-4">
+                    <span className="font-poppins font-semibold">$199</span>
+                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$299</span>
+                  </div>
+                  <div className="space-y-2 mb-6">
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>Unlimited data in 80+ countries</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>Priority support</span>
+                    </div>
+                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
+                      <Check className="w-4 h-4" />
+                      <span>90-day validity</span>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={onCheckoutClick}
+                    className="w-full bg-white text-green-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
+                  >
+                    Get Business Plan
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Coverage Map Section */}
+      <section className="py-16 bg-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-6xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Global</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Coverage Map
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                See where our eSIMs work worldwide
+              </p>
+            </div>
+
+            <Card className="overflow-hidden">
+              <CardContent className="p-0">
+                <div className="relative">
+                  <ImageWithFallback
+                    src="https://images.unsplash.com/photo-1589395937920-07cce323acba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3b3JsZCUyMG1hcCUyMHRyYXZlbHxlbnwxfHx8fDE3NTkyNTkyNTN8MA&ixlib=rb-4.1.0&q=80&w=1080"
+                    alt="World Coverage Map"
+                    className="w-full h-[400px] md:h-[500px] object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+                  
+                  {/* Legend */}
+                  <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-sm rounded-xl p-6">
+                    <h3 className="font-merchant font-semibold mb-4">Coverage Types</h3>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-green-500" />
+                        <span className="font-poppins leading-relaxed font-normal">5G Available</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-blue-500" />
+                        <span className="font-poppins leading-relaxed font-normal">4G/LTE</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-yellow-500" />
+                        <span className="font-poppins leading-relaxed font-normal">3G</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-gray-300" />
+                        <span className="font-poppins leading-relaxed font-normal">Not Covered</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Stats Row */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8">
+              <Card>
+                <CardContent className="p-6 text-center">
+                  <div className="font-merchant font-semibold text-primary mb-2">150+</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Countries Covered</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6 text-center">
+                  <div className="font-merchant font-semibold text-primary mb-2">500+</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Network Partners</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6 text-center">
+                  <div className="font-merchant font-semibold text-primary mb-2">99.9%</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Uptime</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-6 text-center">
+                  <div className="font-merchant font-semibold text-primary mb-2">24/7</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Customer Support</p>
+                </CardContent>
+              </Card>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Device Compatibility Checker */}
+      <section id="compatibility" className="py-16 bg-gradient-to-br from-gray-50 to-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-4xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Check Device</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Compatibility
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                Make sure your device supports eSIM technology
+              </p>
+            </div>
+
+            <Card className="p-8">
+              <CardContent className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">Device Brand</label>
+                    <Select value={selectedBrand} onValueChange={setSelectedBrand}>
+                      <SelectTrigger className="w-full font-poppins leading-relaxed font-normal min-h-[44px]">
+                        <SelectValue placeholder="Select your device brand" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {deviceBrands.map((brand) => (
+                          <SelectItem key={brand} value={brand} className="font-poppins leading-relaxed font-normal">
+                            {brand}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">Device Model</label>
+                    <Select 
+                      value={selectedModel} 
+                      onValueChange={setSelectedModel}
+                      disabled={!selectedBrand}
+                    >
+                      <SelectTrigger className="w-full font-poppins leading-relaxed font-normal min-h-[44px]">
+                        <SelectValue placeholder={selectedBrand ? "Select your device model" : "Select brand first"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {getModelOptions().map((model) => (
+                          <SelectItem key={model} value={model} className="font-poppins leading-relaxed font-normal">
+                            {model}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <Button
+                  onClick={handleCheckCompatibility}
+                  disabled={!selectedBrand || !selectedModel}
+                  className="w-full bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
+                >
+                  <Smartphone className="w-4 h-4 mr-2" />
+                  Check Compatibility
+                </Button>
+
+                <AnimatePresence>
+                  {compatibilityResult && (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      className={`p-6 rounded-xl border-2 ${
+                        compatibilityResult === 'compatible'
+                          ? 'bg-green-50 border-green-500'
+                          : 'bg-red-50 border-red-500'
+                      }`}
+                    >
+                      <div className="flex items-start gap-4">
+                        {compatibilityResult === 'compatible' ? (
+                          <CheckCircle2 className="w-8 h-8 text-green-600 flex-shrink-0" />
+                        ) : (
+                          <XCircle className="w-8 h-8 text-red-600 flex-shrink-0" />
+                        )}
+                        <div className="flex-1">
+                          <h3 className="font-merchant font-semibold mb-2">
+                            {compatibilityResult === 'compatible' 
+                              ? '✓ Your device is compatible!' 
+                              : '✗ Device not compatible'}
+                          </h3>
+                          <p className="font-poppins leading-relaxed font-normal text-gray-700 mb-4">
+                            {compatibilityResult === 'compatible'
+                              ? `Great news! Your ${selectedBrand} ${selectedModel} supports eSIM technology. You can proceed with purchasing any of our eSIM plans.`
+                              : `Unfortunately, your ${selectedBrand} ${selectedModel} doesn't support eSIM technology. Please check our list of compatible devices or contact support for alternatives.`}
+                          </p>
+                          {compatibilityResult === 'compatible' && (
+                            <Button
+                              onClick={() => {
+                                document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
+                              }}
+                              className="bg-green-600 hover:bg-green-700 text-white font-poppins font-semibold min-h-[44px]"
+                            >
+                              Browse Plans
+                              <ArrowRight className="w-4 h-4 ml-2" />
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-16 bg-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-6xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">How It</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Works
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                Get connected in just 2-3 minutes
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {[
+                {
+                  step: '01',
+                  title: 'Choose Your Plan',
+                  description: 'Select the eSIM plan that matches your destination and data needs',
+                  icon: <Globe className="w-8 h-8" />
+                },
+                {
+                  step: '02',
+                  title: 'Complete Purchase',
+                  description: 'Secure checkout with instant email delivery of your QR code',
+                  icon: <ShoppingBag className="w-8 h-8" />
+                },
+                {
+                  step: '03',
+                  title: 'Scan QR Code',
+                  description: 'Open your camera app and scan the QR code to install the eSIM',
+                  icon: <QrCode className="w-8 h-8" />
+                },
+                {
+                  step: '04',
+                  title: 'Stay Connected',
+                  description: 'Activate your eSIM and enjoy seamless connectivity worldwide',
+                  icon: <Signal className="w-8 h-8" />
+                }
+              ].map((step, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: index * 0.1 }}
+                >
+                  <Card className="text-center h-full hover:shadow-lg transition-shadow duration-300">
+                    <CardContent className="p-6">
+                      <div className="mb-4 inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-primary/20 to-blue-500/20">
+                        <div className="text-primary">{step.icon}</div>
+                      </div>
+                      <div className="font-merchant font-semibold text-primary mb-3">{step.step}</div>
+                      <h3 className="font-merchant font-semibold mb-3">{step.title}</h3>
+                      <p className="font-poppins leading-relaxed font-normal text-gray-600">{step.description}</p>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Visual Guide */}
+            <div className="mt-16 relative">
+              <Card className="overflow-hidden">
+                <CardContent className="p-0">
+                  <div className="grid grid-cols-1 md:grid-cols-2">
+                    <div className="p-8 md:p-12 flex flex-col justify-center">
+                      <h3 className="font-merchant font-semibold mb-4">Installation Guide</h3>
+                      <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-6">
+                        Follow our step-by-step setup guide to install your eSIM in minutes. Available for both iOS and Android devices.
+                      </p>
+                      <div className="space-y-4">
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start font-poppins font-medium min-h-[44px]"
+                        >
+                          <Phone className="w-4 h-4 mr-2" />
+                          iOS Setup Guide
+                          <ChevronRight className="w-4 h-4 ml-auto" />
+                        </Button>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start font-poppins font-medium min-h-[44px]"
+                        >
+                          <Smartphone className="w-4 h-4 mr-2" />
+                          Android Setup Guide
+                          <ChevronRight className="w-4 h-4 ml-auto" />
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="relative h-64 md:h-auto">
+                      <ImageWithFallback
+                        src="https://images.unsplash.com/photo-1690264695884-f62022341c8f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydHBob25lJTIwUVIlMjBjb2RlfGVufDF8fHx8MTc1OTMyMDM5NXww&ixlib=rb-4.1.0&q=80&w=1080"
+                        alt="QR Code Setup"
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Data Calculator Tool */}
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-4xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Data</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Calculator
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                Find out how much data you'll need for your trip
+              </p>
+            </div>
+
+            <Card className="p-8">
+              <CardContent className="space-y-8">
+                <div className="space-y-6">
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">
+                      Social Media (hours per day)
+                    </label>
+                    <div className="flex items-center gap-4">
+                      <Slider
+                        value={[dataUsage.social]}
+                        onValueChange={(value) => setDataUsage({...dataUsage, social: value[0]})}
+                        max={10}
+                        min={0}
+                        step={0.5}
+                        className="flex-1"
+                      />
+                      <span className="font-poppins font-semibold text-primary w-16 text-right">
+                        {dataUsage.social}h
+                      </span>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">
+                      Maps & Navigation (hours per day)
+                    </label>
+                    <div className="flex items-center gap-4">
+                      <Slider
+                        value={[dataUsage.maps]}
+                        onValueChange={(value) => setDataUsage({...dataUsage, maps: value[0]})}
+                        max={5}
+                        min={0}
+                        step={0.5}
+                        className="flex-1"
+                      />
+                      <span className="font-poppins font-semibold text-primary w-16 text-right">
+                        {dataUsage.maps}h
+                      </span>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">
+                      Video Streaming (hours per day)
+                    </label>
+                    <div className="flex items-center gap-4">
+                      <Slider
+                        value={[dataUsage.video]}
+                        onValueChange={(value) => setDataUsage({...dataUsage, video: value[0]})}
+                        max={10}
+                        min={0}
+                        step={0.5}
+                        className="flex-1"
+                      />
+                      <span className="font-poppins font-semibold text-primary w-16 text-right">
+                        {dataUsage.video}h
+                      </span>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="font-poppins font-medium mb-3 block">
+                      Web Browsing (hours per day)
+                    </label>
+                    <div className="flex items-center gap-4">
+                      <Slider
+                        value={[dataUsage.browsing]}
+                        onValueChange={(value) => setDataUsage({...dataUsage, browsing: value[0]})}
+                        max={10}
+                        min={0}
+                        step={0.5}
+                        className="flex-1"
+                      />
+                      <span className="font-poppins font-semibold text-primary w-16 text-right">
+                        {dataUsage.browsing}h
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="bg-gradient-to-r from-primary/10 to-blue-500/10 p-6 rounded-xl">
+                  <div className="text-center">
+                    <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-2">
+                      Recommended data for your {tripDuration[0]}-day trip:
+                    </p>
+                    <div className="font-merchant font-semibold text-primary mb-4">
+                      {calculateRecommendedData()}GB
+                    </div>
+                    <Button
+                      onClick={() => {
+                        document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
+                      }}
+                      className="bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
+                    >
+                      Find Matching Plans
+                      <ArrowRight className="w-4 h-4 ml-2" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Social Proof Block */}
+      <section className="py-16 bg-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-6xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Trusted by</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Travelers
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                See what our customers say about their experience
+              </p>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
+              <Card className="text-center">
+                <CardContent className="p-6">
+                  <Star className="w-8 h-8 text-yellow-500 mx-auto mb-2" />
+                  <div className="font-merchant font-semibold text-primary mb-1">4.9/5</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Average Rating</p>
+                </CardContent>
+              </Card>
+              <Card className="text-center">
+                <CardContent className="p-6">
+                  <Users className="w-8 h-8 text-primary mx-auto mb-2" />
+                  <div className="font-merchant font-semibold text-primary mb-1">500K+</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Happy Travelers</p>
+                </CardContent>
+              </Card>
+              <Card className="text-center">
+                <CardContent className="p-6">
+                  <Globe className="w-8 h-8 text-primary mx-auto mb-2" />
+                  <div className="font-merchant font-semibold text-primary mb-1">150+</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Countries</p>
+                </CardContent>
+              </Card>
+              <Card className="text-center">
+                <CardContent className="p-6">
+                  <Headphones className="w-8 h-8 text-primary mx-auto mb-2" />
+                  <div className="font-merchant font-semibold text-primary mb-1">24/7</div>
+                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Support</p>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Testimonials */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {testimonials.map((testimonial, index) => (
+                <motion.div
+                  key={testimonial.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: index * 0.1 }}
+                >
+                  <Card className="h-full hover:shadow-lg transition-shadow duration-300">
+                    <CardContent className="p-6">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="text-4xl">{testimonial.avatar}</div>
+                        <div>
+                          <h4 className="font-merchant font-semibold">{testimonial.name}</h4>
+                          <p className="font-poppins leading-relaxed font-normal text-gray-500">{testimonial.location}</p>
+                        </div>
+                      </div>
+                      <div className="flex gap-1 mb-3">
+                        {Array.from({ length: testimonial.rating }).map((_, i) => (
+                          <Star key={i} className="w-4 h-4 fill-yellow-500 text-yellow-500" />
+                        ))}
+                      </div>
+                      <p className="font-poppins leading-relaxed font-normal text-gray-600">"{testimonial.text}"</p>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* FAQ Accordion */}
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="max-w-4xl mx-auto"
+          >
+            <div className="text-center mb-12">
+              <h2 className="font-merchant mb-4 leading-tight">
+                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Frequently Asked</span>{' '}
+                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
+                  Questions
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
+                Everything you need to know about eSIMs
+              </p>
+            </div>
+
+            <Card>
+              <CardContent className="p-6">
+                <Accordion type="single" collapsible className="w-full">
+                  {faqs.map((faq, index) => (
+                    <AccordionItem key={index} value={`item-${index}`}>
+                      <AccordionTrigger className="font-merchant font-medium text-left hover:no-underline">
+                        {faq.question}
+                      </AccordionTrigger>
+                      <AccordionContent className="font-poppins leading-relaxed font-normal text-gray-600">
+                        {faq.answer}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </CardContent>
+            </Card>
+
+            <div className="mt-8 text-center">
+              <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-4">
+                Still have questions? We're here to help!
+              </p>
+              <Button
+                variant="outline"
+                className="font-poppins font-medium min-h-[44px]"
+              >
+                <MessageSquare className="w-4 h-4 mr-2" />
+                Contact Support
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <Footer
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
+
+export default EsimsPage;
\ No newline at end of file
diff --git a/src/components/FAQPage.tsx b/src/components/FAQPage.tsx
new file mode 100644
index 0000000..af29019
--- /dev/null
+++ b/src/components/FAQPage.tsx
@@ -0,0 +1,511 @@
+import { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Search, ChevronDown, ChevronUp } from 'lucide-react';
+import { Input } from './ui/input';
+import { Badge } from './ui/badge';
+import { Card, CardContent } from './ui/card';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { Footer } from './Footer';
+import { MobileAppSection } from './MobileAppSection';
+import { WhyChooseCityCards } from './WhyChooseCityCards';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { ReviewsSection } from './ReviewsSection';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface FAQPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+}
+
+const categories = [
+  'General',
+  'Bookings',
+  'Passes',
+  'Mobile App',
+  'Payment',
+  'Cancellation',
+  'Support'
+];
+
+const faqData: FAQItem[] = [
+  {
+    id: '1',
+    question: 'How can I book my CityCards pass?',
+    answer: 'You can easily book your CityCards pass through our website or mobile app. Simply select your preferred city, choose between our Selective or Unlimited pass options, and complete your purchase with instant digital delivery. Your pass will be available immediately for use.',
+    category: 'Bookings'
+  },
+  {
+    id: '2',
+    question: 'What\'s the difference between Selective and Unlimited passes?',
+    answer: 'Our Selective pass allows you to choose specific attractions you want to visit, perfect for targeted exploration. The Unlimited pass gives you access to all participating attractions in the city during your pass validity period, ideal for comprehensive city discovery.',
+    category: 'Passes'
+  },
+  {
+    id: '3',
+    question: 'How do I use my digital pass at attractions?',
+    answer: 'Simply show your digital pass on your mobile device at the attraction entrance. Each pass includes a unique QR code that attraction staff will scan for quick and easy entry. No printed tickets required - it\'s all digital and hassle-free.',
+    category: 'Mobile App'
+  },
+  {
+    id: '4',
+    question: 'Can I cancel or refund my CityCards pass?',
+    answer: 'Yes, we offer flexible cancellation policies. Unused passes can be cancelled within 24 hours of purchase for a full refund. For passes used partially, refund eligibility depends on the specific terms of your pass type and usage.',
+    category: 'Cancellation'
+  },
+  {
+    id: '5',
+    question: 'Which cities are currently available?',
+    answer: 'We currently offer comprehensive CityCards experiences in Melbourne, with more exciting destinations coming soon. Each city features carefully curated attractions, local experiences, and insider recommendations to help you make the most of your visit.',
+    category: 'General'
+  },
+  {
+    id: '6',
+    question: 'What payment methods do you accept?',
+    answer: 'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are secured with industry-standard encryption to protect your payment information.',
+    category: 'Payment'
+  },
+  {
+    id: '7',
+    question: 'How long are CityCards passes valid?',
+    answer: 'Pass validity varies by type and city. Most passes are valid for 30 days from the date of first use, giving you plenty of flexibility to explore at your own pace. Check your specific pass details for exact validity periods.',
+    category: 'Passes'
+  },
+  {
+    id: '8',
+    question: 'Do I need an internet connection to use my pass?',
+    answer: 'While an internet connection is recommended for the best experience, our mobile app includes offline functionality. You can download your pass and attraction information for offline use, ensuring access even without internet connectivity.',
+    category: 'Mobile App'
+  },
+  {
+    id: '9',
+    question: 'Can I share my pass with friends or family?',
+    answer: 'CityCards passes are non-transferable and designed for individual use only. Each pass is linked to the purchaser\'s account and cannot be shared. For group visits, each person needs their own pass.',
+    category: 'General'
+  },
+  {
+    id: '10',
+    question: 'What if I have issues with my booking?',
+    answer: 'Our customer support team is available 24/7 to help with any booking issues or questions. Contact us through the app, website chat, email, or phone, and we\'ll resolve your concern quickly and efficiently.',
+    category: 'Support'
+  },
+  {
+    id: '11',
+    question: 'Are there any additional fees or hidden costs?',
+    answer: 'No hidden fees! The price you see is the price you pay. Your CityCards pass includes all listed attractions and experiences with no additional booking fees or surprise charges at the attractions.',
+    category: 'Payment'
+  },
+  {
+    id: '12',
+    question: 'How do I get customer support while traveling?',
+    answer: 'Access 24/7 customer support directly through our mobile app, website chat, or by calling our support hotline. Our team is always ready to assist with any questions or issues during your city exploration.',
+    category: 'Support'
+  }
+];
+
+export function FAQPage({
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: FAQPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+  const [expandedFAQs, setExpandedFAQs] = useState<Set<string>>(new Set());
+
+  const toggleFAQ = (id: string) => {
+    const newExpanded = new Set(expandedFAQs);
+    if (newExpanded.has(id)) {
+      newExpanded.delete(id);
+    } else {
+      newExpanded.add(id);
+    }
+    setExpandedFAQs(newExpanded);
+  };
+
+  const filteredFAQs = useMemo(() => {
+    return faqData.filter(faq => {
+      const matchesSearch = faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory = selectedCategory === 'All' || faq.category === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, selectedCategory]);
+
+  // Group FAQs into pairs for 2-column layout
+  const faqPairs = [];
+  for (let i = 0; i < filteredFAQs.length; i += 2) {
+    faqPairs.push(filteredFAQs.slice(i, i + 2));
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navigation */}
+      <Navbar 
+        activeCity="Melbourne"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+      
+      <CitySubmenu 
+        currentPage={currentPage}
+        onClose={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      <div className="container mx-auto px-4 pt-52 pb-12">
+        {/* Page Header */}
+        <motion.div 
+          className="text-center mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <motion.div
+            className="text-sm tracking-wider text-primary mb-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.4, delay: 0.2 }}
+          >
+            GET STARTED NOW
+          </motion.div>
+          
+          <h1 className="font-merchant font-light text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
+            Frequently Asked{' '}
+            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Questions
+            </span>
+          </h1>
+          
+          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
+            Find answers to the most common questions about CityCards, bookings, and your city exploration experience
+          </p>
+        </motion.div>
+
+        {/* Search and Filter Section */}
+        <motion.div 
+          className="mb-12 max-w-4xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+        >
+          {/* Search Bar */}
+          <div className="relative mb-8">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <Input
+              type="text"
+              placeholder="Search for questions..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 pr-4 py-6 text-lg bg-white border-2 border-gray-200 rounded-2xl focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all duration-200"
+            />
+          </div>
+
+          {/* Category Tags */}
+          <div className="flex flex-wrap gap-3 justify-center">
+            <Badge
+              variant={selectedCategory === 'All' ? 'default' : 'secondary'}
+              className={`px-6 py-3 text-sm cursor-pointer transition-all duration-200 hover:scale-105 ${
+                selectedCategory === 'All' 
+                  ? 'bg-primary text-white shadow-lg' 
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+              onClick={() => setSelectedCategory('All')}
+            >
+              All
+            </Badge>
+            {categories.map((category) => (
+              <Badge
+                key={category}
+                variant={selectedCategory === category ? 'default' : 'secondary'}
+                className={`px-6 py-3 text-sm cursor-pointer transition-all duration-200 hover:scale-105 ${
+                  selectedCategory === category 
+                    ? 'bg-primary text-white shadow-lg' 
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </Badge>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* FAQ Content */}
+        <div className="w-full">
+          {faqPairs.length === 0 ? (
+            <motion.div 
+              className="text-center py-12"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.4 }}
+            >
+              <p className="font-poppins text-xl leading-relaxed font-normal text-gray-500">No questions found matching your search.</p>
+            </motion.div>
+          ) : (
+            <div className="space-y-8">
+              {faqPairs.map((pair, pairIndex) => (
+                <motion.div
+                  key={pairIndex}
+                  className="grid grid-cols-1 lg:grid-cols-2 gap-8"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: pairIndex * 0.1 }}
+                >
+                  {pair.map((faq) => {
+                    const isExpanded = expandedFAQs.has(faq.id);
+                    
+                    return (
+                      <div
+                        key={faq.id}
+                        className="faq-card bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 relative overflow-hidden"
+                      >
+                        <button
+                          onClick={() => toggleFAQ(faq.id)}
+                          className="w-full p-8 text-left hover:bg-gray-100/50 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary/10"
+                        >
+                          <div className="flex items-start gap-4 mb-4">
+                            <span className="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">
+                              {faq.id}
+                            </span>
+                            <div className="flex-1">
+                              <h3 className="font-merchant font-medium text-xl text-gray-900 leading-tight mb-2">
+                                {faq.question}
+                              </h3>
+                              <div className="flex items-center justify-between">
+                                <Badge variant="secondary" className="text-xs px-3 py-1 bg-gray-100 text-gray-600">
+                                  {faq.category}
+                                </Badge>
+                                <div className="flex-shrink-0">
+                                  {isExpanded ? (
+                                    <ChevronUp className="w-5 h-5 text-primary" />
+                                  ) : (
+                                    <ChevronDown className="w-5 h-5 text-gray-400" />
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </button>
+
+                        {/* Answer Content */}
+                        <AnimatePresence>
+                          {isExpanded && (
+                            <motion.div
+                              initial={{ height: 0, opacity: 0 }}
+                              animate={{ height: 'auto', opacity: 1 }}
+                              exit={{ height: 0, opacity: 0 }}
+                              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+                              className="overflow-hidden"
+                            >
+                              <div className="px-8 pb-8">
+                                <div className="border-t border-gray-200 pt-6">
+                                  <p className="text-gray-600 leading-relaxed">
+                                    {faq.answer}
+                                  </p>
+                                </div>
+                              </div>
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    );
+                  })}
+                  
+                  {/* If odd number of FAQs, add empty space for the last row */}
+                  {pair.length === 1 && (
+                    <div className="hidden lg:block" />
+                  )}
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Pagination Section */}
+        <motion.div
+          className="mt-16 flex flex-col items-center gap-6"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+        >
+          <div className="text-center text-muted-foreground">
+            Showing 1-12 of 24 item(s)
+          </div>
+          <button className="bg-gradient-to-r from-primary to-secondary text-white px-12 py-4 rounded-full hover:shadow-lg hover:shadow-primary/25 transition-all duration-300 font-medium text-base hover:-translate-y-0.5">
+            Load More
+          </button>
+        </motion.div>
+
+        {/* Mobile App Section */}
+        <motion.div
+          className="mt-20"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.5 }}
+        >
+          <div className="bg-muted/30 relative overflow-hidden rounded-3xl">
+            {/* Subtle Background Elements */}
+            <div className="absolute inset-0">
+              <div className="absolute top-1/3 left-1/6 w-64 h-64 bg-primary/3 rounded-full blur-3xl"></div>
+              <div className="absolute bottom-1/2 right-1/6 w-48 h-48 bg-secondary/3 rounded-full blur-3xl"></div>
+            </div>
+
+            <MobileAppSection />
+          </div>
+        </motion.div>
+
+        {/* Why Choose Us Section */}
+        <motion.div
+          className="mt-20"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6 }}
+        >
+          <WhyChooseCityCards />
+        </motion.div>
+
+        {/* Enhanced Testimonials Section */}
+        <motion.div
+          className="mt-20"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.65 }}
+        >
+          <EnhancedTestimonials />
+        </motion.div>
+
+        {/* Customer Reviews Section */}
+        <motion.div
+          className="mt-20"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.7 }}
+        >
+          <ReviewsSection />
+        </motion.div>
+
+        {/* Contact Support Section */}
+        <motion.div 
+          className="mt-20 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6 }}
+        >
+          <Card className="max-w-2xl mx-auto bg-gradient-to-br from-primary/5 to-secondary/5 border-2 border-primary/20 rounded-3xl p-8">
+            <CardContent className="p-0">
+              <h3 className="font-merchant font-medium text-2xl text-gray-900 mb-4">
+                Still have questions?
+              </h3>
+              <p className="text-gray-600 mb-6 leading-relaxed">
+                Our support team is available 24/7 to help you with any questions or concerns about your CityCards experience.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <a
+                  href="mailto:support@citycards.com"
+                  className="px-8 py-3 bg-primary text-white rounded-xl hover:bg-primary/90 transition-colors duration-200 font-medium"
+                >
+                  Email Support
+                </a>
+                <a
+                  href="tel:+1-800-CITYCARD"
+                  className="px-8 py-3 bg-white text-primary border-2 border-primary rounded-xl hover:bg-primary/5 transition-colors duration-200 font-medium"
+                >
+                  Call Us
+                </a>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
+
+export default FAQPage;
\ No newline at end of file
diff --git a/src/components/FeaturedCities.tsx b/src/components/FeaturedCities.tsx
new file mode 100644
index 0000000..af12b3c
--- /dev/null
+++ b/src/components/FeaturedCities.tsx
@@ -0,0 +1,246 @@
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import { ChevronLeft, ChevronRight, MapPin, Star, Clock } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface City {
+  id: string;
+  name: string;
+  country: string;
+  image: string;
+  attractions: number;
+  rating: number;
+  duration: string;
+  startingPrice: number;
+  popular?: boolean;
+  description: string;
+}
+
+const cities: City[] = [
+  {
+    id: 'paris',
+    name: 'Paris',
+    country: 'France',
+    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?q=80&w=600&auto=format&fit=crop',
+    attractions: 45,
+    rating: 4.9,
+    duration: '3-7 days',
+    startingPrice: 49,
+    popular: true,
+    description: 'City of Light with world-famous landmarks and art'
+  },
+  {
+    id: 'london',
+    name: 'London',
+    country: 'United Kingdom',
+    image: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?q=80&w=600&auto=format&fit=crop',
+    attractions: 38,
+    rating: 4.8,
+    duration: '3-7 days',
+    startingPrice: 55,
+    description: 'Historic capital with royal palaces and modern culture'
+  },
+  {
+    id: 'tokyo',
+    name: 'Tokyo',
+    country: 'Japan',
+    image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=600&auto=format&fit=crop',
+    attractions: 52,
+    rating: 4.9,
+    duration: '5-10 days',
+    startingPrice: 68,
+    popular: true,
+    description: 'Vibrant metropolis blending tradition with innovation'
+  },
+  {
+    id: 'barcelona',
+    name: 'Barcelona',
+    country: 'Spain',
+    image: 'https://images.unsplash.com/photo-1539037116277-4db20889f2d4?q=80&w=600&auto=format&fit=crop',
+    attractions: 29,
+    rating: 4.7,
+    duration: '3-5 days',
+    startingPrice: 42,
+    description: 'Architectural wonder with beaches and vibrant culture'
+  },
+  {
+    id: 'rome',
+    name: 'Rome',
+    country: 'Italy',
+    image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?q=80&w=600&auto=format&fit=crop',
+    attractions: 34,
+    rating: 4.8,
+    duration: '3-6 days',
+    startingPrice: 45,
+    description: 'Eternal city with ancient history and timeless beauty'
+  },
+  {
+    id: 'new-york',
+    name: 'New York',
+    country: 'United States',
+    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?q=80&w=600&auto=format&fit=crop',
+    attractions: 67,
+    rating: 4.6,
+    duration: '4-8 days',
+    startingPrice: 75,
+    description: 'The city that never sleeps with iconic skyline'
+  }
+];
+
+export function FeaturedCities() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  
+  const itemsPerSlide = 3;
+  const totalSlides = Math.ceil(cities.length / itemsPerSlide);
+  
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  };
+  
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+  
+  const visibleCities = cities.slice(
+    currentSlide * itemsPerSlide,
+    (currentSlide + 1) * itemsPerSlide
+  );
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between mb-12">
+          <div className="space-y-2">
+            <h2 className="text-3xl md:text-4xl font-bold">
+              Featured Destinations
+            </h2>
+            <p className="text-muted-foreground">
+              Discover the world's most incredible cities with our curated passes
+            </p>
+          </div>
+          
+          <div className="hidden md:flex items-center space-x-2">
+            <Button 
+              variant="outline" 
+              className="w-16 h-16"
+              onClick={prevSlide}
+              disabled={currentSlide === 0}
+            >
+              <ChevronLeft className="w-8 h-8" />
+            </Button>
+            <Button 
+              variant="outline" 
+              className="w-16 h-16"
+              onClick={nextSlide}
+              disabled={currentSlide === totalSlides - 1}
+            >
+              <ChevronRight className="w-8 h-8" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Desktop Grid */}
+        <div className="hidden md:grid md:grid-cols-3 gap-6 mb-8">
+          {visibleCities.map((city) => (
+            <CityCard key={city.id} city={city} />
+          ))}
+        </div>
+
+        {/* Mobile Carousel */}
+        <div className="md:hidden">
+          <div className="overflow-hidden">
+            <div 
+              className="flex transition-transform duration-300 ease-in-out"
+              style={{ transform: `translateX(-${currentSlide * 100}%)` }}
+            >
+              {cities.map((city) => (
+                <div key={city.id} className="w-full flex-shrink-0 px-2">
+                  <CityCard city={city} />
+                </div>
+              ))}
+            </div>
+          </div>
+          
+          {/* Mobile Navigation */}
+          <div className="flex items-center justify-center space-x-2 mt-6">
+            {Array.from({ length: cities.length }).map((_, index) => (
+              <button
+                key={index}
+                onClick={() => setCurrentSlide(index)}
+                className={`w-2 h-2 rounded-full transition-colors ${
+                  index === currentSlide ? 'bg-primary' : 'bg-muted'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="text-center mt-8">
+          <Button size="lg" variant="outline" className="h-14">
+            View All Cities
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CityCard({ city }: { city: City }) {
+  return (
+    <Card className="group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+      <div className="relative overflow-hidden rounded-t-lg">
+        {city.popular && (
+          <Badge className="absolute top-3 left-3 z-10 bg-gradient-to-r from-primary to-secondary text-white">
+            Popular
+          </Badge>
+        )}
+        
+        <ImageWithFallback
+          src={city.image}
+          alt={`${city.name}, ${city.country}`}
+          className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
+        />
+        
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+        
+        <div className="absolute bottom-3 left-3 text-white">
+          <h3 className="font-semibold">{city.name}</h3>
+          <p className="text-sm opacity-90">{city.country}</p>
+        </div>
+      </div>
+      
+      <CardContent className="p-4 space-y-3">
+        <p className="text-sm text-muted-foreground">{city.description}</p>
+        
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center space-x-1">
+            <MapPin className="w-4 h-4 text-muted-foreground" />
+            <span>{city.attractions} attractions</span>
+          </div>
+          
+          <div className="flex items-center space-x-1">
+            <Star className="w-4 h-4 text-yellow-500" />
+            <span>{city.rating}</span>
+          </div>
+        </div>
+        
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center space-x-1">
+            <Clock className="w-4 h-4 text-muted-foreground" />
+            <span>{city.duration}</span>
+          </div>
+          
+          <div className="font-semibold">
+            From €{city.startingPrice}
+          </div>
+        </div>
+        
+        <Button className="w-full h-14" variant="outline">
+          Explore {city.name}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..3aa0787
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,97 @@
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { FooterBrand } from './FooterBrand';
+import { FooterNavigation } from './FooterNavigation';
+import { FooterBottom } from './FooterBottom';
+
+interface FooterProps {
+  onHomeClick?: () => void;
+  onMelbourneClick?: () => void;
+  onPassesClick?: () => void;
+  onSignInClick?: () => void;
+  onAttractionsClick?: () => void;
+  onBlogsClick?: () => void;
+  onHowItWorksClick?: () => void;
+  onFAQClick?: () => void;
+  onPrivacyPolicyClick?: () => void;
+  onAboutUsClick?: () => void;
+  onContactUsClick?: () => void;
+  currentPage?: string;
+}
+
+export function Footer({ 
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onSignInClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onContactUsClick,
+  currentPage 
+}: FooterProps) {
+  return (
+    <>
+      {/* Footer with Nature Background */}
+      <footer className="relative text-white overflow-hidden">
+        {/* Background Image */}
+        <div className="absolute inset-0 z-0">
+          <ImageWithFallback
+            src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1920&h=1080&fit=crop&q=80"
+            alt="Beautiful mountain landscape with lake and forest - travel destination"
+            className="w-full h-full object-cover"
+          />
+          
+          {/* Enhanced White Gradient Overlay at Top */}
+          <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-white via-white/95 via-white/80 via-white/60 via-white/40 to-transparent z-10" />
+          
+          {/* Additional Smooth Transition Layer */}
+          <div className="absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-white via-white/90 to-white/70 z-10" />
+          
+          {/* Dark overlay for text readability */}
+          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/70 z-20" />
+          
+          {/* Additional atmospheric effects */}
+          <div className="absolute inset-0 z-15">
+            <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+            <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-primary/10 rounded-full blur-3xl" />
+          </div>
+        </div>
+
+        {/* Content Overlay */}
+        <div className="relative z-30 py-24">
+          <div className="container mx-auto px-4">
+            {/* Footer Content Grid */}
+            <div className="w-full mt-48 bg-primary/10 backdrop-blur-lg rounded-[10px] border border-white/10 p-12">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
+              {/* Logo and Description - Left Side */}
+              <FooterBrand />
+
+              {/* Navigation Links - Center to Right */}
+              <FooterNavigation 
+                onHomeClick={onHomeClick}
+                onMelbourneClick={onMelbourneClick}
+                onPassesClick={onPassesClick}
+                onSignInClick={onSignInClick}
+                onAttractionsClick={onAttractionsClick}
+                onBlogsClick={onBlogsClick}
+                onHowItWorksClick={onHowItWorksClick}
+                onFAQClick={onFAQClick}
+                onPrivacyPolicyClick={onPrivacyPolicyClick}
+                onAboutUsClick={onAboutUsClick}
+                onContactUsClick={onContactUsClick}
+                currentPage={currentPage}
+              />
+            </div>
+
+              {/* Bottom Section - Copyright, Legal Links, and Social Icons */}
+              <FooterBottom onPrivacyPolicyClick={onPrivacyPolicyClick} />
+            </div>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/FooterBottom.tsx b/src/components/FooterBottom.tsx
new file mode 100644
index 0000000..f11d8ca
--- /dev/null
+++ b/src/components/FooterBottom.tsx
@@ -0,0 +1,72 @@
+import { motion } from 'motion/react';
+import { Facebook, Twitter, Instagram, Youtube } from 'lucide-react';
+
+interface FooterBottomProps {
+  onPrivacyPolicyClick?: () => void;
+}
+
+export function FooterBottom({ onPrivacyPolicyClick }: FooterBottomProps) {
+  return (
+    <motion.div 
+      className="border-t border-white/20 pt-8"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.6, delay: 0.5 }}
+    >
+      <div className="flex flex-col lg:flex-row justify-between items-center space-y-6 lg:space-y-0">
+        {/* Copyright */}
+        <p className="text-white/60 text-sm">
+          © 2024 CityCards. All rights reserved.
+        </p>
+        
+        {/* Right Section - Legal Links and Social Icons */}
+        <div className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
+          {/* Legal Links */}
+          <div className="flex space-x-6 text-sm">
+            <motion.button 
+              onClick={onPrivacyPolicyClick}
+              className="text-white/70 hover:text-white transition-colors duration-200"
+              whileHover={{ y: -1 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Privacy Policy
+            </motion.button>
+            <motion.a 
+              href="#" 
+              className="text-white/70 hover:text-white transition-colors duration-200"
+              whileHover={{ y: -1 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Terms of Service
+            </motion.a>
+            <motion.a 
+              href="#" 
+              className="text-white/70 hover:text-white transition-colors duration-200"
+              whileHover={{ y: -1 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Cookie Policy
+            </motion.a>
+          </div>
+          
+          {/* Social Icons - Horizontal Layout */}
+          <div className="flex space-x-3">
+            {[Facebook, Twitter, Instagram, Youtube].map((Icon, index) => (
+              <motion.a 
+                key={index}
+                href="#" 
+                className="text-white/70 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-white/10"
+                whileHover={{ scale: 1.1, y: -2 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ duration: 0.2, delay: index * 0.05 }}
+              >
+                <Icon className="w-5 h-5" />
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/FooterBrand.tsx b/src/components/FooterBrand.tsx
new file mode 100644
index 0000000..01d1799
--- /dev/null
+++ b/src/components/FooterBrand.tsx
@@ -0,0 +1,68 @@
+import image_bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6 from '../assets/bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6.png';
+import { motion } from 'motion/react';
+import { Apple, Play } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import cityCardsLogo from 'figma:asset/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png';
+
+export function FooterBrand() {
+  return (
+    <motion.div 
+      className="lg:col-span-4 space-y-4"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="flex items-center">
+        <img
+          src={image_bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6}
+          alt="CityCards Logo"
+          className="h-12 w-auto"
+        />
+      </div>
+      <p className="font-poppins text-white/80 text-sm leading-relaxed font-normal max-w-xs">
+        Discover the best of every city with our curated experiences and attractions. 
+        Your gateway to unforgettable urban adventures.
+      </p>
+      
+      {/* Get Application Section */}
+      <div className="pt-4">
+        <div className="flex items-center space-x-4">
+          <p className="font-poppins text-white/80 text-sm font-normal whitespace-nowrap">Get Application:</p>
+          
+          <div className="flex space-x-3">
+            {/* iOS App Store Button */}
+            <motion.a 
+              href="#" 
+              className="flex items-center justify-center w-12 h-12 bg-white/15 rounded-full hover:bg-white/25 transition-all duration-300 border border-white/20 hover:border-white/40 relative group"
+              whileHover={{ scale: 1.1, y: -2 }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              title="Download for iOS"
+            >
+              <Apple className="w-6 h-6 text-white fill-current" />
+              <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                iOS
+              </div>
+            </motion.a>
+            
+            {/* Android App Store Button */}
+            <motion.a 
+              href="#" 
+              className="flex items-center justify-center w-12 h-12 bg-white/15 rounded-full hover:bg-white/25 transition-all duration-300 border border-white/20 hover:border-white/40 relative group"
+              whileHover={{ scale: 1.1, y: -2 }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              title="Download for Android"
+            >
+              <Play className="w-6 h-6 text-white fill-current" />
+              <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                Android
+              </div>
+            </motion.a>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/FooterNavigation.tsx b/src/components/FooterNavigation.tsx
new file mode 100644
index 0000000..f05d37d
--- /dev/null
+++ b/src/components/FooterNavigation.tsx
@@ -0,0 +1,97 @@
+import { motion } from 'motion/react';
+import { footerSections } from '../utils/footerConstants';
+
+interface FooterNavigationProps {
+  onHomeClick?: () => void;
+  onMelbourneClick?: () => void;
+  onPassesClick?: () => void;
+  onSignInClick?: () => void;
+  onAttractionsClick?: () => void;
+  onBlogsClick?: () => void;
+  onHowItWorksClick?: () => void;
+  onFAQClick?: () => void;
+  onPrivacyPolicyClick?: () => void;
+  onAboutUsClick?: () => void;
+  onContactUsClick?: () => void;
+  currentPage?: string;
+}
+
+export function FooterNavigation({ 
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onSignInClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onContactUsClick,
+  currentPage
+}: FooterNavigationProps) {
+  return (
+    <div className="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
+      {Object.entries(footerSections).map(([key, section]) => (
+        <motion.div 
+          key={key}
+          className="space-y-4"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ 
+            duration: 0.5, 
+            delay: Object.keys(footerSections).indexOf(key) * 0.1 + 0.1
+          }}
+        >
+          <h4 className="font-semibold text-white">{section.title}</h4>
+          <ul className="space-y-3">
+            {section.links.map((link, index) => {
+              const getClickHandler = () => {
+                switch (link) {
+                  case 'Home': return onHomeClick;
+                  case 'Melbourne': return onMelbourneClick;
+                  case 'Passes': return onPassesClick;
+                  case 'Sign In': return onSignInClick;
+                  case 'Attractions': return onAttractionsClick;
+                  case 'Blog': return onBlogsClick;
+                  case 'How It Works': return onHowItWorksClick;
+                  case 'FAQ': return onFAQClick;
+                  case 'Privacy Policy': return onPrivacyPolicyClick;
+                  case 'Contact Us': return onContactUsClick;
+                  default: return undefined;
+                }
+              };
+
+              const clickHandler = getClickHandler();
+
+              return (
+                <li key={link}>
+                  {clickHandler ? (
+                    <motion.button 
+                      onClick={(e) => {
+                        e.preventDefault();
+                        clickHandler();
+                      }}
+                      className="text-white/80 hover:text-white transition-colors duration-200 text-sm text-left"
+                      whileHover={{ x: 4 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      {link}
+                    </motion.button>
+                  ) : (
+                    <motion.span
+                      className="text-white/80 cursor-default text-sm"
+                    >
+                      {link}
+                    </motion.span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </motion.div>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HandwrittenText.tsx b/src/components/HandwrittenText.tsx
new file mode 100644
index 0000000..2951137
--- /dev/null
+++ b/src/components/HandwrittenText.tsx
@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+
+interface HandwrittenTextProps {
+  text: string;
+  className?: string;
+  style?: React.CSSProperties;
+  speed?: number; // Characters per second
+  startDelay?: number; // Delay before animation starts (ms)
+  onComplete?: () => void;
+  autoStart?: boolean;
+}
+
+export function HandwrittenText({ 
+  text, 
+  className = "", 
+  style = {}, 
+  speed = 8, 
+  startDelay = 0,
+  onComplete,
+  autoStart = true
+}: HandwrittenTextProps) {
+  const [displayedText, setDisplayedText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isWriting, setIsWriting] = useState(false);
+  const [showCursor, setShowCursor] = useState(false);
+
+  // Split text into characters, preserving line breaks
+  const characters = text.split('');
+
+  useEffect(() => {
+    if (!autoStart) return;
+
+    const startTimer = setTimeout(() => {
+      setIsWriting(true);
+      setShowCursor(true);
+    }, startDelay);
+
+    return () => clearTimeout(startTimer);
+  }, [autoStart, startDelay]);
+
+  useEffect(() => {
+    if (!isWriting || currentIndex >= characters.length) {
+      if (currentIndex >= characters.length) {
+        // Hide cursor after a delay
+        const cursorTimer = setTimeout(() => {
+          setShowCursor(false);
+          setIsWriting(false);
+          onComplete?.();
+        }, 800);
+        return () => clearTimeout(cursorTimer);
+      }
+      return;
+    }
+
+    const char = characters[currentIndex];
+    const baseDelay = 1000 / speed;
+    
+    // Variable delays for more natural writing
+    let delay = baseDelay;
+    
+    if (char === ' ') {
+      delay = baseDelay * 0.5; // Spaces are quicker
+    } else if (char === '\n') {
+      delay = baseDelay * 2; // Line breaks take longer
+    } else if (['.', '!', '?'].includes(char)) {
+      delay = baseDelay * 1.5; // Punctuation takes a bit longer
+    } else if ([',', ';', ':'].includes(char)) {
+      delay = baseDelay * 1.2;
+    } else {
+      // Add some randomness to letter timing
+      delay = baseDelay * (0.8 + Math.random() * 0.4);
+    }
+
+    const timer = setTimeout(() => {
+      setDisplayedText(prev => prev + char);
+      setCurrentIndex(prev => prev + 1);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [isWriting, currentIndex, characters, speed, onComplete]);
+
+  // Reset function for external control
+  const reset = () => {
+    setDisplayedText('');
+    setCurrentIndex(0);
+    setIsWriting(false);
+    setShowCursor(false);
+  };
+
+  const start = () => {
+    reset();
+    setTimeout(() => {
+      setIsWriting(true);
+      setShowCursor(true);
+    }, startDelay);
+  };
+
+  // Expose control methods
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      (window as any).handwrittenTextControls = { reset, start };
+    }
+  }, []);
+
+  return (
+    <div className={`relative w-fit h-fit inline-block ${className}`} style={style}>
+      {/* Main text with character-by-character animation */}
+      <motion.div
+        className="relative"
+        style={{ whiteSpace: 'pre-line' }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+      >
+        {displayedText.split('').map((char, index) => (
+          <motion.span
+            key={`${index}-${char}`}
+            initial={{ 
+              opacity: 0, 
+              scale: 0.8,
+              y: 2
+            }}
+            animate={{ 
+              opacity: 1, 
+              scale: 1,
+              y: 0
+            }}
+            transition={{
+              duration: 0.2,
+              ease: "easeOut",
+              delay: 0
+            }}
+            style={{
+              display: char === '\n' ? 'block' : 'inline',
+              width: char === '\n' ? '100%' : 'auto',
+              height: char === '\n' ? '0' : 'auto'
+            }}
+          >
+            {char === '\n' ? '' : char}
+          </motion.span>
+        ))}
+        
+        {/* Writing cursor/pen effect */}
+        <AnimatePresence>
+          {showCursor && (
+            <motion.span
+              className="inline-block"
+              initial={{ opacity: 0, scale: 0 }}
+              animate={{ 
+                opacity: [0.3, 1, 0.3],
+                scale: [0.8, 1.1, 0.8],
+                rotate: [0, 2, -2, 0]
+              }}
+              exit={{ opacity: 0, scale: 0 }}
+              transition={{
+                opacity: {
+                  duration: 0.8,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                },
+                scale: {
+                  duration: 0.8,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                },
+                rotate: {
+                  duration: 1.2,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              }}
+              style={{
+                color: 'rgba(85, 70, 50, 0.6)',
+                marginLeft: '1px'
+              }}
+            >
+              |
+            </motion.span>
+          )}
+        </AnimatePresence>
+      </motion.div>
+
+      {/* Ink flow effect */}
+      <motion.div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background: `
+            radial-gradient(ellipse at 20% 30%, rgba(85, 70, 50, 0.05) 0%, transparent 60%),
+            radial-gradient(ellipse at 80% 70%, rgba(101, 84, 63, 0.04) 0%, transparent 50%)
+          `,
+          filter: 'blur(2px)',
+          borderRadius: '4px'
+        }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: isWriting ? 0.3 : 0 }}
+        transition={{ duration: 0.5 }}
+      />
+    </div>
+  );
+}
+
+// Hook for controlling the animation externally
+export function useHandwrittenText(autoStart = true) {
+  const [isComplete, setIsComplete] = useState(false);
+  
+  const reset = () => {
+    setIsComplete(false);
+    if (typeof window !== 'undefined' && (window as any).handwrittenTextControls) {
+      (window as any).handwrittenTextControls.reset();
+    }
+  };
+
+  const start = () => {
+    setIsComplete(false);
+    if (typeof window !== 'undefined' && (window as any).handwrittenTextControls) {
+      (window as any).handwrittenTextControls.start();
+    }
+  };
+
+  return {
+    isComplete,
+    reset,
+    start,
+    onComplete: () => setIsComplete(true)
+  };
+}
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..7a2ab67
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
+import { Search, Menu, MapPin } from 'lucide-react';
+
+interface HeaderProps {
+  activeCity?: string;
+  onCityChange?: (city: string) => void;
+}
+
+export function Header({ activeCity, onCityChange }: HeaderProps) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const cities = [
+    'Paris', 'London', 'New York', 'Tokyo', 'Barcelona', 'Rome'
+  ];
+
+  const filteredCities = cities.filter(city =>
+    city.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleCitySelect = (city: string) => {
+    onCityChange?.(city);
+    setSearchQuery('');
+    setIsSearchOpen(false);
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between px-4">
+        {/* Logo */}
+        <div className="flex items-center space-x-2">
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
+              <MapPin className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-merchant text-lg font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              CityCards
+            </span>
+          </div>
+        </div>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center space-x-6">
+          <a href="#" className="hover:text-primary transition-colors">Cities</a>
+          <a href="#" className="hover:text-primary transition-colors">Passes</a>
+          <a href="#" className="hover:text-primary transition-colors">How it Works</a>
+          <a href="#" className="hover:text-primary transition-colors">Support</a>
+        </nav>
+
+        {/* Search and Actions */}
+        <div className="flex items-center space-x-3">
+          {/* City Search */}
+          <div className="relative hidden md:block">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <Input
+                placeholder="Search cities..."
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  setIsSearchOpen(e.target.value.length > 0);
+                }}
+                onFocus={() => setIsSearchOpen(true)}
+                className="pl-10 w-64"
+              />
+            </div>
+            
+            {isSearchOpen && (
+              <div className="absolute top-full mt-1 w-full bg-popover border rounded-md shadow-lg z-50">
+                {filteredCities.length > 0 ? (
+                  filteredCities.map((city) => (
+                    <button
+                      key={city}
+                      onClick={() => handleCitySelect(city)}
+                      className="w-full text-left px-4 py-2 hover:bg-accent transition-colors first:rounded-t-md last:rounded-b-md"
+                    >
+                      {city}
+                    </button>
+                  ))
+                ) : (
+                  <div className="px-4 py-2 text-muted-foreground">No cities found</div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <Button variant="outline" className="hidden md:inline-flex">
+            Sign In
+          </Button>
+          <Button className="hidden md:inline-flex bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90">
+            Get Started
+          </Button>
+
+          {/* Mobile Menu */}
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline" size="icon" className="md:hidden">
+                <Menu className="h-4 w-4" />
+                <span className="sr-only">Toggle menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-80">
+              <div className="flex flex-col space-y-4 mt-6">
+                {/* Mobile Search */}
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                  <Input placeholder="Search cities..." className="pl-10" />
+                </div>
+                
+                {/* Mobile Navigation */}
+                <nav className="flex flex-col space-y-3">
+                  <a href="#" className="py-2 hover:text-primary transition-colors">Cities</a>
+                  <a href="#" className="py-2 hover:text-primary transition-colors">Passes</a>
+                  <a href="#" className="py-2 hover:text-primary transition-colors">How it Works</a>
+                  <a href="#" className="py-2 hover:text-primary transition-colors">Support</a>
+                </nav>
+                
+                <div className="flex flex-col space-y-2 pt-4 border-t">
+                  <Button variant="outline">Sign In</Button>
+                  <Button className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90">
+                    Get Started
+                  </Button>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
new file mode 100644
index 0000000..8c0b59d
--- /dev/null
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,713 @@
+import { useState, useEffect, useRef, forwardRef } from "react";
+import {
+  Star,
+  Menu,
+  X,
+  ShoppingBag,
+  ChevronDown,
+  Globe,
+} from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+import { Button } from "./ui/button";
+import { CitySubmenu } from "./CitySubmenu";
+import imgRectangle4429 from "figma:asset/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png";
+import cityCardsLogo from "figma:asset/e961451f70697dd054c4240fc1dcad81e08ce31e.png";
+
+// City list data for right sidebar
+const cityList = [
+  {
+    id: 1,
+    name: "Sydney",
+    attractions: 65,
+    image:
+      "https://images.unsplash.com/photo-1695018228065-2e0026c654af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBoYXJib3IlMjBicmlkZ2UlMjBvcGVyYSUyMGhvdXNlfGVufDF8fHx8MTc1NjEyNDA2NXww&ixlib=rb-4.1.0&q=80&w=1080",
+  },
+  {
+    id: 2,
+    name: "Melbourne",
+    attractions: 48,
+    image:
+      "https://images.unsplash.com/photo-1679731980101-503d93bbec27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBsYW5ld2F5c3xlbnwxfHx8fDE3NTYxMjQwNzN8MA&ixlib=rb-4.1.0&q=80&w=1080",
+  },
+  {
+    id: 3,
+    name: "Brisbane",
+    attractions: 32,
+    image:
+      "https://images.unsplash.com/photo-1548661625-a30d197ce439?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxicmlzYmFuZSUyMHJpdmVyJTIwY2l0eSUyMHNreWxpbmV8ZW58MXx8fHwxNzU2MTI0MDc3fDA&ixlib=rb-4.1.0&q=80&w=1080",
+  },
+];
+
+// Interface for dropdown items
+interface DropdownItem {
+  id: string;
+  label: string;
+  badge?: string;
+  icon?: React.ReactNode;
+  action?: () => void;
+}
+
+// Forward ref for dropdown component
+const Dropdown = forwardRef<
+  HTMLDivElement,
+  {
+    isOpen: boolean;
+    onToggle: () => void;
+    items: DropdownItem[];
+    title: string;
+    trigger: React.ReactNode;
+  }
+>(({ isOpen, onToggle, items, title, trigger }, ref) => {
+  return (
+    <div ref={ref} className="relative">
+      <div onClick={onToggle}>{trigger}</div>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{
+              duration: 0.15,
+              ease: [0.25, 0.1, 0.25, 1],
+            }}
+            className="absolute right-0 mt-2 w-64 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 py-2 z-50"
+          >
+            <div className="px-4 py-2 border-b border-gray-200/50">
+              <h3 className="font-poppins font-medium text-gray-900 text-sm">
+                {title}
+              </h3>
+            </div>
+            {items.map((item) => (
+              <div
+                key={item.id}
+                onClick={item.action}
+                className="px-4 py-3 hover:bg-gray-50/50 cursor-pointer transition-colors duration-150 flex items-center justify-between"
+              >
+                <div className="flex items-center gap-2">
+                  {item.icon}
+                  <span className="font-poppins text-gray-700 text-sm font-normal">
+                    {item.label}
+                  </span>
+                </div>
+                {item.badge && (
+                  <span className="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full font-medium">
+                    {item.badge}
+                  </span>
+                )}
+              </div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+Dropdown.displayName = "Dropdown";
+
+interface HeroSectionProps {
+  onSignInClick?: () => void;
+  onPassesClick?: () => void;
+  onMelbourneClick?: () => void;
+  onAttractionsClick?: () => void;
+  onHomeClick?: () => void;
+  onBlogsClick?: () => void;
+  onHowItWorksClick?: () => void;
+  currentPage?: string;
+}
+
+export function HeroSection({
+  onSignInClick,
+  onPassesClick,
+  onMelbourneClick,
+  onAttractionsClick,
+  onHomeClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  currentPage,
+}: HeroSectionProps) {
+  const [hoveredCity, setHoveredCity] = useState<number | null>(
+    null,
+  );
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [activeLanguageDropdown, setActiveLanguageDropdown] =
+    useState(false);
+  const [activeCartDropdown, setActiveCartDropdown] =
+    useState(false);
+  const [scrollY, setScrollY] = useState(0);
+
+  // Refs for dropdowns and parallax
+  const languageRef = useRef<HTMLDivElement>(null);
+  const cartRef = useRef<HTMLDivElement>(null);
+  const heroRef = useRef<HTMLDivElement>(null);
+
+  // Sample cart data
+  const [cartItems] = useState([
+    {
+      id: "1",
+      name: "Melbourne City Card",
+      price: "$49",
+      quantity: 1,
+    },
+    {
+      id: "2",
+      name: "Sydney City Card",
+      price: "$59",
+      quantity: 1,
+    },
+  ]);
+
+  const cartTotal = cartItems.reduce(
+    (sum, item) =>
+      sum + parseFloat(item.price.replace("$", "")),
+    0,
+  );
+
+  // Language options
+  const languages = [
+    {
+      id: "en",
+      label: "English",
+      action: () => console.log("English selected"),
+    },
+    {
+      id: "es",
+      label: "Español",
+      action: () => console.log("Spanish selected"),
+    },
+    {
+      id: "fr",
+      label: "Français",
+      action: () => console.log("French selected"),
+    },
+    {
+      id: "de",
+      label: "Deutsch",
+      action: () => console.log("German selected"),
+    },
+  ];
+
+  // Navigation handlers
+  const handleNavClick = (action: string) => {
+    switch (action) {
+      case "about":
+        console.log("Navigate to About Us");
+        break;
+      case "products":
+        console.log("Navigate to Cities");
+        break;
+
+      case "attractions":
+        if (onAttractionsClick) {
+          onAttractionsClick();
+        }
+        break;
+      case "card":
+        if (onPassesClick) onPassesClick();
+        break;
+      case "offer":
+        console.log("Navigate to Deals");
+        break;
+      default:
+        break;
+    }
+  };
+
+  const isNavItemActive = (action: string) => {
+    if (action === "card" && currentPage === "passes")
+      return true;
+    if (action === "about" && currentPage === "home")
+      return true;
+    if (action === "attractions" && currentPage === "attractions")
+      return true;
+
+    return false;
+  };
+
+  // Handle scroll effects with parallax (throttled for performance)
+  useEffect(() => {
+    let ticking = false;
+
+    const handleScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY;
+          setIsScrolled(currentScrollY > 20);
+          setScrollY(currentScrollY);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll, {
+      passive: true,
+    });
+    return () =>
+      window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  // Calculate parallax values
+  const scrollProgress = Math.min(
+    scrollY / window.innerHeight,
+    1,
+  );
+  const backgroundScale = 1.2 - scrollProgress * 0.2; // Scale from 1.2 to 1
+  const backgroundY = scrollY * 0.5; // Parallax movement
+  const borderOpacity = 1 - scrollProgress * 0.3; // Border fade effect
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        languageRef.current &&
+        !languageRef.current.contains(event.target as Node)
+      ) {
+        setActiveLanguageDropdown(false);
+      }
+      if (
+        cartRef.current &&
+        !cartRef.current.contains(event.target as Node)
+      ) {
+        setActiveCartDropdown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () =>
+      document.removeEventListener(
+        "mousedown",
+        handleClickOutside,
+      );
+  }, []);
+
+  return (
+    <div
+      ref={heroRef}
+      className="bg-[#ffffff] relative min-h-screen overflow-hidden"
+      data-name="MacBook Pro 14' - 2"
+    >
+      {/* Background Image with Parallax */}
+      <motion.div
+        className="absolute bg-[position:50%_50%] bg-size-cover h-full left-0 top-0 w-full origin-center"
+        style={{
+          backgroundImage: `url('${imgRectangle4429}')`,
+          scale: backgroundScale,
+          y: backgroundY,
+          willChange: "transform",
+        }}
+      />
+
+      {/* Black Gradient Overlay */}
+      <div className="absolute h-full left-0 top-0 w-full bg-gradient-to-b from-black/0 to-black/55" />
+
+      {/* Main Content Frame with Border Animation */}
+      <motion.div
+        className="absolute h-[840.118px] rounded-[56px] top-[100.11px] translate-x-[-50%] w-[1449.56px] max-w-[95vw]"
+        style={{ left: "calc(50% + 7.086px)" }}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          duration: 1.2,
+          ease: [0.25, 0.1, 0.25, 1],
+        }}
+      >
+        <motion.div
+          aria-hidden="true"
+          className="absolute border-2 border-[#ffffff] border-solid inset-0 pointer-events-none rounded-[56px]"
+          style={{
+            opacity: borderOpacity,
+            willChange: "opacity",
+          }}
+          initial={{
+            clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)", // Start from top-left
+          }}
+          animate={{
+            clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", // Expand to full
+          }}
+          transition={{
+            duration: 1.2,
+            ease: [0.25, 0.1, 0.25, 1],
+            delay: 0.3,
+          }}
+        />
+      </motion.div>
+
+      {/* Glassmorphism Navigation Bar with Menu */}
+      <motion.nav
+        className="absolute top-[17.79px] left-[38.31px] right-[38.31px] z-40"
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{
+          duration: 0.6,
+          ease: [0.25, 0.1, 0.25, 1],
+          delay: 0.2,
+        }}
+      >
+        <motion.div
+          className="backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.2)] h-[66.549px] rounded-[33.275px] w-full px-8 py-4 shadow-lg shadow-black/5 border border-white/20"
+          animate={{
+            scale: isScrolled ? 0.98 : 1,
+            y: isScrolled ? 2 : 0,
+            boxShadow: isScrolled
+              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)",
+          }}
+          transition={{
+            duration: 0.3,
+            ease: [0.25, 0.1, 0.25, 1],
+          }}
+        >
+          {/* Navigation Content */}
+          <div className="flex items-center justify-between w-full h-full">
+            {/* CityCards Logo Section */}
+            <motion.div
+              className="flex items-center cursor-pointer flex-shrink-0"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => onHomeClick?.()}
+            >
+              <img
+                src={cityCardsLogo}
+                alt="CityCards"
+                className="h-10 w-auto"
+              />
+            </motion.div>
+
+            {/* Navigation Links */}
+            <div className="hidden md:flex items-center gap-[30px] lg:gap-[51px]">
+              {[
+                { label: "About Us", action: "about" },
+                { label: "Cities", action: "products" },
+                { label: "Attractions", action: "attractions" },
+                { label: "Your Card", action: "card" },
+                { label: "Deals", action: "offer" },
+              ].map((item) => (
+                <motion.button
+                  key={item.action}
+                  onClick={() => handleNavClick(item.action)}
+                  className={`relative px-0 py-2 text-base font-medium transition-all duration-200 whitespace-nowrap group capitalize ${
+                    isNavItemActive(item.action)
+                      ? "text-white"
+                      : "text-white/80 hover:text-white"
+                  }`}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  {item.label}
+
+                  {/* Active indicator */}
+                  <motion.div
+                    className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-secondary rounded-full"
+                    initial={{ width: 0 }}
+                    animate={{
+                      width: isNavItemActive(item.action)
+                        ? "100%"
+                        : 0,
+                      opacity: isNavItemActive(item.action)
+                        ? 1
+                        : 0,
+                    }}
+                    whileHover={{
+                      width: "100%",
+                      opacity: 1,
+                    }}
+                    transition={{ duration: 0.2 }}
+                  />
+
+                  {/* Hover background */}
+                  <motion.div
+                    className="absolute inset-0 bg-white/10 rounded-lg -z-10"
+                    initial={{ scale: 0, opacity: 0 }}
+                    whileHover={{ scale: 1, opacity: 0.5 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                </motion.button>
+              ))}
+            </div>
+
+            {/* Right Section */}
+            <div className="flex items-center gap-5">
+              {/* Language Dropdown */}
+              <div className="hidden lg:block">
+                <Dropdown
+                  ref={languageRef}
+                  isOpen={activeLanguageDropdown}
+                  onToggle={() =>
+                    setActiveLanguageDropdown(
+                      !activeLanguageDropdown,
+                    )
+                  }
+                  items={languages}
+                  title="Select Language"
+                  trigger={
+                    <div className="flex items-center space-x-2 text-white/80 hover:text-white px-0 py-2 text-base font-medium transition-colors duration-200 cursor-pointer rounded-lg hover:bg-white/10 uppercase">
+                      <Globe className="w-5 h-5" />
+                      <span>ENG</span>
+                      <ChevronDown
+                        className={`w-4 h-4 transition-transform duration-200 ${activeLanguageDropdown ? "rotate-180" : ""}`}
+                      />
+                    </div>
+                  }
+                />
+              </div>
+
+              {/* Shopping Cart */}
+              <div className="hidden lg:block">
+                <Dropdown
+                  ref={cartRef}
+                  isOpen={activeCartDropdown}
+                  onToggle={() =>
+                    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: <ShoppingBag className="w-4 h-4" />,
+                    },
+                    {
+                      id: "checkout",
+                      label: "Proceed to Checkout",
+                      action: () => console.log("Checkout"),
+                    },
+                  ]}
+                  title="Shopping Cart"
+                  trigger={
+                    <div className="relative text-white/80 hover:text-white p-0 transition-colors duration-200 rounded-lg hover:bg-white/10 cursor-pointer">
+                      <ShoppingBag className="w-7 h-7" />
+                      <motion.div
+                        className="absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center"
+                        animate={{ scale: [1, 1.1, 1] }}
+                        transition={{
+                          duration: 2,
+                          repeat: Infinity,
+                          ease: "easeInOut",
+                        }}
+                      >
+                        <span className="text-xs text-primary-foreground font-bold">
+                          {cartItems.length}
+                        </span>
+                      </motion.div>
+                    </div>
+                  }
+                />
+              </div>
+
+              {/* Mobile Menu Button */}
+              <div className="md:hidden">
+                <button
+                  onClick={() => console.log('Mobile menu toggled')}
+                  className="text-white/80 hover:text-white p-2"
+                >
+                  <Menu className="w-6 h-6" />
+                </button>
+              </div>
+
+              {/* CTA Button */}
+              <Button
+                onClick={onSignInClick}
+                withShine={true}
+                className="hidden md:block h-[52px] min-w-[120px] lg:min-w-[180px] px-4 lg:px-6 py-4 rounded-full text-white font-medium bg-gradient-to-r from-primary to-secondary text-sm lg:text-base"
+              >
+                GET A CITY CARD
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </motion.nav>
+
+      {/* City Submenu */}
+      <CitySubmenu 
+        onClose={() => {}} // Empty function since it's always shown on homepage
+        currentPage={currentPage}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      {/* Main Content Container */}
+      <div className="relative z-10 min-h-screen flex items-center">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-12">
+          <div className="flex justify-between items-center w-full">
+            {/* Left Content */}
+            <div className="max-w-4xl xl:max-w-5xl 2xl:max-w-6xl flex-1">
+              {/* Main Headline */}
+              <motion.div
+                className="absolute content-stretch flex flex-col gap-7 items-start justify-start leading-[0] left-[91.29px] not-italic top-[582px] w-[849.639px] max-w-[70vw]"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.8,
+                  delay: 0.5,
+                  ease: [0.25, 0.1, 0.25, 1],
+                }}
+                style={{
+                  y: scrollY * -0.1, // Subtle counter-parallax for content
+                  willChange: "transform",
+                }}
+              >
+                <div className="font-merchant leading-[64px] relative shrink-0 text-[#ffffff] text-[48px] sm:text-[52px] md:text-[60px] lg:text-[64px] w-[771.315px] max-w-full">
+                  <p className="mb-0">
+                    <span className="font-light">Melbourne</span>{' '}
+                    <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">City</span>{' '}
+                    <span className="font-normal">Card.</span>
+                  </p>
+                  <p>
+                    <span className="font-light">See</span>{' '}
+                    <span className="font-semibold text-emphasis">More</span>{', '}
+                    <span className="font-light">Spend</span>{' '}
+                    <span className="font-bold">Less</span>{'.'}
+                  </p>
+                </div>
+                <div
+                  className="font-poppins font-normal min-w-full relative shrink-0 text-[22px] sm:text-[18px] md:text-[20px] lg:text-[22px] text-[rgba(255,255,255,0.74)]"
+                  style={{ width: "min-content" }}
+                >
+                  <p className="leading-[40px]">
+                    Instant QR access to 40+ attractions,
+                    exclusive perks, and savings up to 30%
+                  </p>
+                </div>
+              </motion.div>
+
+              {/* CTA Button */}
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.8,
+                  delay: 0.7,
+                  ease: [0.25, 0.1, 0.25, 1],
+                }}
+                className="absolute left-[91.29px] top-[834.87px]"
+                style={{
+                  y: scrollY * -0.05, // Minimal counter-parallax for button
+                  willChange: "transform",
+                }}
+              >
+                <Button
+                  withShine={true}
+                  className="font-poppins font-semibold h-[61.805px] min-w-[262.349px] px-8 py-4 rounded-full text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 transition-all duration-200 text-[20px]"
+                >
+                  Explore Melbourne
+                </Button>
+              </motion.div>
+            </div>
+
+            {/* Right Side City List */}
+            <div className="hidden xl:block absolute right-[100px] top-[640px]">
+              <motion.div
+                className="space-y-6"
+                initial={{ opacity: 0, x: 30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{
+                  duration: 0.8,
+                  delay: 0.6,
+                  ease: [0.25, 0.1, 0.25, 1],
+                }}
+                style={{
+                  y: scrollY * -0.08, // Subtle counter-parallax for city list
+                  willChange: "transform",
+                }}
+              >
+                {cityList.map((city, index) => (
+                  <motion.div
+                    key={city.id}
+                    className="relative"
+                    onMouseEnter={() => setHoveredCity(city.id)}
+                    onMouseLeave={() => setHoveredCity(null)}
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{
+                      duration: 0.6,
+                      delay: 0.6 + index * 0.1,
+                    }}
+                  >
+                    {/* City Name */}
+                    <div className="flex items-center cursor-pointer group">
+                      <span className="font-poppins text-white/90 group-hover:text-white transition-colors duration-300 text-lg font-semibold">
+                        — {city.name}
+                      </span>
+                    </div>
+
+                    {/* Hover Card */}
+                    <AnimatePresence>
+                      {hoveredCity === city.id && (
+                        <motion.div
+                          className="absolute right-full top-0 mr-6 z-30"
+                          initial={{
+                            opacity: 0,
+                            scale: 0.9,
+                            x: 10,
+                          }}
+                          animate={{
+                            opacity: 1,
+                            scale: 1,
+                            x: 0,
+                          }}
+                          exit={{
+                            opacity: 0,
+                            scale: 0.9,
+                            x: 10,
+                          }}
+                          transition={{
+                            duration: 0.2,
+                            ease: [0.16, 1, 0.3, 1],
+                          }}
+                        >
+                          <div className="bg-white/95 backdrop-blur-md rounded-2xl p-4 shadow-2xl border border-white/20 min-w-64">
+                            {/* Image */}
+                            <div className="relative h-32 mb-3 rounded-xl 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/30 to-transparent" />
+                            </div>
+
+                            {/* Content */}
+                            <div className="space-y-2">
+                              <h4 className="text-lg font-semibold text-gray-900">
+                                {city.name}
+                              </h4>
+                              <div className="flex items-center gap-2 text-sm text-gray-600">
+                                <Star className="w-4 h-4 text-primary fill-current" />
+                                <span className="font-medium">
+                                  {city.attractions} attractions
+                                </span>
+                              </div>
+                              <p className="text-xs text-gray-500">
+                                Discover the best experiences
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* Arrow Pointer */}
+                          <div className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-2">
+                            <div className="w-0 h-0 border-t-8 border-b-8 border-l-8 border-transparent border-l-white/95" />
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </motion.div>
+                ))}
+              </motion.div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 0000000..7b181e7
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,108 @@
+import { motion, useScroll, useSpring, useTransform } from 'motion/react';
+import { HeroSection } from './HeroSection';
+import { WhyChooseCityCards } from './WhyChooseCityCards';
+import { VarietyOfAdventures } from './VarietyOfAdventures';
+
+import { MobileAppSection } from './MobileAppSection';
+import { MagicItinerary } from './MagicItinerary';
+import { ScrollAnimatedJourney } from './ScrollAnimatedJourney';
+import { CustomPostcards } from './CustomPostcards';
+import { BookAttractionSection } from './BookAttractionSection';
+import { UpcomingCities } from './UpcomingCities';
+import { TrustSection } from './TrustSection';
+import { Footer } from './Footer';
+import { SectionWrapper } from './SectionWrapper';
+import { sectionsConfig } from '../utils/sections';
+import {
+  heroVariants,
+  staggerContainer,
+  backgroundVariants
+} from '../utils/animations';
+
+interface HomePageProps {
+  isMobile: boolean;
+  onSignInClick?: () => void;
+  onPassesClick?: () => void;
+  currentPage?: string;
+}
+
+export function HomePage({ isMobile, onSignInClick, onPassesClick, currentPage }: HomePageProps) {
+  // Smooth scroll progress for global effects
+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  });
+
+  // Parallax effect for scroll progress
+  const progressOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+
+  const sectionComponents = [
+    WhyChooseCityCards,
+    VarietyOfAdventures,
+    ScrollAnimatedJourney,
+    MagicItinerary,
+    BookAttractionSection,
+    CustomPostcards,
+    UpcomingCities,
+    TrustSection,
+    MobileAppSection
+  ];
+
+  return (
+    <>
+      {/* Scroll Progress Indicator */}
+      <motion.div
+        className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary origin-left z-40"
+        style={{ 
+          scaleX,
+          opacity: progressOpacity
+        }}
+      />
+
+      {/* Main Content - No padding needed as capsule navbar floats */}
+      <main>
+        {/* 1. Hero Section - Immediate Load Animation */}
+        <motion.section
+          id="hero-section"
+          initial="hidden"
+          animate="visible"
+          variants={staggerContainer}
+          className="relative overflow-hidden"
+        >
+          <motion.div variants={backgroundVariants}>
+            <motion.div variants={heroVariants}>
+              <HeroSection 
+                onSignInClick={onSignInClick}
+                onPassesClick={onPassesClick}
+                currentPage={currentPage}
+              />
+            </motion.div>
+          </motion.div>
+        </motion.section>
+
+        {/* 2-10. All Other Sections */}
+        {sectionsConfig.map((config, index) => {
+          const Component = sectionComponents[index];
+          return (
+            <SectionWrapper
+              key={config.id}
+              id={config.id}
+              containerType={config.containerType}
+              backgroundGradient={config.backgroundGradient}
+              className={config.className}
+              variantType={config.variantType}
+              isMobile={isMobile}
+            >
+              <Component />
+            </SectionWrapper>
+          );
+        })}
+      </main>
+
+      {/* 11. Footer */}
+      <Footer />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HorizontalHowItWorksPage.tsx b/src/components/HorizontalHowItWorksPage.tsx
new file mode 100644
index 0000000..f2fb5c1
--- /dev/null
+++ b/src/components/HorizontalHowItWorksPage.tsx
@@ -0,0 +1 @@
+// This file has been removed - consolidated into HowItWorksPage.tsx
\ No newline at end of file
diff --git a/src/components/HotelDiscountsPage.tsx b/src/components/HotelDiscountsPage.tsx
new file mode 100644
index 0000000..e7bd2bd
--- /dev/null
+++ b/src/components/HotelDiscountsPage.tsx
@@ -0,0 +1,875 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { 
+  Search, 
+  MapPin, 
+  Calendar, 
+  Users, 
+  ChevronRight, 
+  ChevronLeft,
+  Star,
+  Wifi,
+  Utensils,
+  Car,
+  Dumbbell,
+  Waves,
+  X,
+  Check,
+  Crown,
+  UserPlus,
+  Mail,
+  Smartphone,
+  BadgePercent,
+  Clock,
+  Shield,
+  ChevronDown,
+  SlidersHorizontal
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Input } from './ui/input';
+import { Badge } from './ui/badge';
+import { Slider } from './ui/slider';
+import { Checkbox } from './ui/checkbox';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import Navbar from './Navbar';
+import { SubNavbar } from './SubNavbar';
+import { Footer } from './Footer';
+
+interface HotelDiscountsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage?: string;
+  user?: { email: string; name: string } | null;
+}
+
+interface HotelDeal {
+  id: string;
+  name: string;
+  location: string;
+  image: string;
+  discount: number;
+  originalPrice: number;
+  salePrice: number;
+  rating: number;
+  reviews: number;
+  features: string[];
+  category: string;
+}
+
+interface City {
+  name: string;
+  image: string;
+  fromPrice: number;
+}
+
+export function HotelDiscountsPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: HotelDiscountsPageProps) {
+  const [selectedCategory, setSelectedCategory] = useState<string>('flash-sales');
+  const [featuredScrollPosition, setFeaturedScrollPosition] = useState(0);
+  const [priceRange, setPriceRange] = useState([50, 500]);
+  const [selectedStars, setSelectedStars] = useState<number[]>([]);
+  const [selectedAmenities, setSelectedAmenities] = useState<string[]>([]);
+  const [selectedFilter, setSelectedFilter] = useState('popular');
+  const [showFilters, setShowFilters] = useState(false);
+
+  const hotelDeals: HotelDeal[] = [
+    {
+      id: '1',
+      name: 'The Grand Palace Hotel',
+      location: 'Paris, France',
+      image: 'https://images.unsplash.com/photo-1694433053047-247d40a5f31b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGhvdGVsJTIwZWlmZmVsfGVufDF8fHx8MTc1OTMyNDY0OHww&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 60,
+      originalPrice: 450,
+      salePrice: 180,
+      rating: 4.8,
+      reviews: 1234,
+      features: ['Free WiFi', 'Pool', 'Spa', 'Restaurant'],
+      category: 'luxury'
+    },
+    {
+      id: '2',
+      name: 'Tokyo Skyline Suites',
+      location: 'Tokyo, Japan',
+      image: 'https://images.unsplash.com/photo-1706985003864-43b6a85103ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGhvdGVsJTIwc2t5bGluZXxlbnwxfHx8fDE3NTkzMjQ2NTF8MA&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 45,
+      originalPrice: 320,
+      salePrice: 176,
+      rating: 4.9,
+      reviews: 892,
+      features: ['City View', 'Gym', 'WiFi', 'Parking'],
+      category: 'business'
+    },
+    {
+      id: '3',
+      name: 'Manhattan Luxury Resort',
+      location: 'New York, USA',
+      image: 'https://images.unsplash.com/photo-1479502806991-251c94be6b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwaG90ZWx8ZW58MXx8fHwxNzU5MzI0NjU0fDA&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 35,
+      originalPrice: 550,
+      salePrice: 358,
+      rating: 4.7,
+      reviews: 2103,
+      features: ['Rooftop Bar', 'Spa', 'Restaurant', 'WiFi'],
+      category: 'luxury'
+    },
+    {
+      id: '4',
+      name: 'London Thames View Hotel',
+      location: 'London, UK',
+      image: 'https://images.unsplash.com/photo-1500025188590-2faf31cc956c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBob3RlbCUyMHZpZXd8ZW58MXx8fHwxNzU5MzI0NjU2fDA&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 50,
+      originalPrice: 380,
+      salePrice: 190,
+      rating: 4.6,
+      reviews: 1567,
+      features: ['River View', 'Breakfast', 'WiFi', 'Bar'],
+      category: 'boutique'
+    },
+    {
+      id: '5',
+      name: 'Resort Paradise Retreat',
+      location: 'Bali, Indonesia',
+      image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 55,
+      originalPrice: 280,
+      salePrice: 126,
+      rating: 4.9,
+      reviews: 3421,
+      features: ['Beach Access', 'Pool', 'Spa', 'All-Inclusive'],
+      category: 'family'
+    },
+    {
+      id: '6',
+      name: 'Boutique Central Hotel',
+      location: 'Melbourne, Australia',
+      image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080',
+      discount: 40,
+      originalPrice: 220,
+      salePrice: 132,
+      rating: 4.8,
+      reviews: 756,
+      features: ['City Center', 'WiFi', 'Breakfast', 'Gym'],
+      category: 'boutique'
+    }
+  ];
+
+  const cities: City[] = [
+    { name: 'Paris', image: 'https://images.unsplash.com/photo-1694433053047-247d40a5f31b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGhvdGVsJTIwZWlmZmVsfGVufDF8fHx8MTc1OTMyNDY0OHww&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 120 },
+    { name: 'Tokyo', image: 'https://images.unsplash.com/photo-1706985003864-43b6a85103ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGhvdGVsJTIwc2t5bGluZXxlbnwxfHx8fDE3NTkzMjQ2NTF8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 150 },
+    { name: 'New York', image: 'https://images.unsplash.com/photo-1479502806991-251c94be6b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwaG90ZWx8ZW58MXx8fHwxNzU5MzI0NjU0fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 200 },
+    { name: 'London', image: 'https://images.unsplash.com/photo-1500025188590-2faf31cc956c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBob3RlbCUyMHZpZXd8ZW58MXx8fHwxNzU5MzI0NjU2fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 180 },
+    { name: 'Bali', image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 80 },
+    { name: 'Melbourne', image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 110 },
+    { name: 'Dubai', image: 'https://images.unsplash.com/photo-1655292912612-bb5b1bda9355?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBob3RlbCUyMGJlZHJvb218ZW58MXx8fHwxNzU5MzIxNDI4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 220 },
+    { name: 'Singapore', image: 'https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 160 },
+    { name: 'Barcelona', image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 130 },
+    { name: 'Rome', image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 140 },
+    { name: 'Amsterdam', image: 'https://images.unsplash.com/photo-1655292912612-bb5b1bda9355?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBob3RlbCUyMGJlZHJvb218ZW58MXx8fHwxNzU5MzIxNDI4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 170 },
+    { name: 'Bangkok', image: 'https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 70 }
+  ];
+
+  const dealCategories = [
+    { id: 'flash-sales', name: 'Flash Sales', icon: BadgePercent, count: 45 },
+    { id: 'last-minute', name: 'Last Minute', icon: Clock, count: 32 },
+    { id: 'early-bird', name: 'Early Bird', icon: Calendar, count: 28 },
+    { id: 'weekend', name: 'Weekend Getaways', icon: Star, count: 51 },
+    { id: 'member', name: 'Member Exclusive', icon: Crown, count: 19 },
+    { id: 'package', name: 'Package Deals', icon: Shield, count: 37 },
+    { id: 'long-stay', name: 'Long Stay', icon: Calendar, count: 24 },
+    { id: 'group', name: 'Group Bookings', icon: Users, count: 16 }
+  ];
+
+  const amenities = [
+    { id: 'wifi', name: 'Free WiFi', icon: Wifi },
+    { id: 'pool', name: 'Swimming Pool', icon: Waves },
+    { id: 'gym', name: 'Fitness Center', icon: Dumbbell },
+    { id: 'parking', name: 'Free Parking', icon: Car },
+    { id: 'restaurant', name: 'Restaurant', icon: Utensils }
+  ];
+
+  const scrollFeatured = (direction: 'left' | 'right') => {
+    const container = document.getElementById('featured-deals-container');
+    if (container) {
+      const scrollAmount = 400;
+      const newPosition = direction === 'left' 
+        ? Math.max(0, featuredScrollPosition - scrollAmount)
+        : Math.min(container.scrollWidth - container.clientWidth, featuredScrollPosition + scrollAmount);
+      
+      container.scrollTo({ left: newPosition, behavior: 'smooth' });
+      setFeaturedScrollPosition(newPosition);
+    }
+  };
+
+  const toggleAmenity = (amenityId: string) => {
+    setSelectedAmenities(prev =>
+      prev.includes(amenityId)
+        ? prev.filter(id => id !== amenityId)
+        : [...prev, amenityId]
+    );
+  };
+
+  const toggleStar = (stars: number) => {
+    setSelectedStars(prev =>
+      prev.includes(stars)
+        ? prev.filter(s => s !== stars)
+        : [...prev, stars]
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Sub Navbar */}
+      <SubNavbar
+        activePage="hotel-discounts"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      {/* Hero Section */}
+      <section className="relative pt-64 pb-20 overflow-hidden">
+        {/* Background Image with Overlay */}
+        <div className="absolute inset-0 z-0">
+          <ImageWithFallback
+            src="https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080"
+            alt="Hotel Cityscape"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-background" />
+        </div>
+
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center mb-12"
+          >
+            <h1 className="font-merchant mb-4">
+              <span className="text-white block text-4xl md:text-5xl lg:text-6xl leading-tight">
+                Exclusive Hotel Deals in Every City
+              </span>
+            </h1>
+            <p className="font-poppins text-xl text-white/90 max-w-2xl mx-auto font-normal">
+              Save up to 60% on handpicked accommodations
+            </p>
+          </motion.div>
+
+          {/* Search Widget */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <Card className="max-w-4xl mx-auto shadow-2xl">
+              <CardContent className="p-6">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                  {/* Destination */}
+                  <div className="relative">
+                    <label className="font-poppins text-sm mb-2 block font-normal">Destination</label>
+                    <div className="relative">
+                      <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                      <Select>
+                        <SelectTrigger className="pl-10 h-12 font-poppins font-normal">
+                          <SelectValue placeholder="Select city" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {cities.map((city) => (
+                            <SelectItem key={city.name} value={city.name.toLowerCase()} className="font-poppins font-normal">
+                              {city.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* Check-in Date */}
+                  <div>
+                    <label className="font-poppins text-sm mb-2 block font-normal">Check-in</label>
+                    <div className="relative">
+                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                      <Input type="date" className="pl-10 h-12 font-poppins font-normal" />
+                    </div>
+                  </div>
+
+                  {/* Check-out Date */}
+                  <div>
+                    <label className="font-poppins text-sm mb-2 block font-normal">Check-out</label>
+                    <div className="relative">
+                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                      <Input type="date" className="pl-10 h-12 font-poppins font-normal" />
+                    </div>
+                  </div>
+
+                  {/* Guests */}
+                  <div>
+                    <label className="font-poppins text-sm mb-2 block font-normal">Guests</label>
+                    <div className="relative">
+                      <Users className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                      <Select>
+                        <SelectTrigger className="pl-10 h-12 font-poppins font-normal">
+                          <SelectValue placeholder="2 adults" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="1" className="font-poppins font-normal">1 adult</SelectItem>
+                          <SelectItem value="2" className="font-poppins font-normal">2 adults</SelectItem>
+                          <SelectItem value="3" className="font-poppins font-normal">3 adults</SelectItem>
+                          <SelectItem value="4" className="font-poppins font-normal">4+ adults</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                <Button className="w-full mt-6 h-12 font-poppins font-semibold bg-primary hover:bg-primary/90">
+                  <Search className="w-5 h-5 mr-2" />
+                  Search Deals
+                </Button>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Featured Deals Carousel */}
+      <section className="py-16 bg-gray-50">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h2 className="font-merchant text-3xl md:text-4xl mb-2">
+                <span className="font-medium">Featured</span>{' '}
+                <span className="font-semibold text-primary">Deals</span>
+              </h2>
+              <div className="flex gap-2 mt-4">
+                {['flash-sales', 'last-minute', 'early-bird', 'weekend'].map((cat) => {
+                  const category = dealCategories.find(c => c.id === cat);
+                  return (
+                    <Button
+                      key={cat}
+                      variant={selectedCategory === cat ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => setSelectedCategory(cat)}
+                      className="font-poppins font-medium"
+                    >
+                      {category?.name}
+                    </Button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => scrollFeatured('left')}
+                className="rounded-full"
+              >
+                <ChevronLeft className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => scrollFeatured('right')}
+                className="rounded-full"
+              >
+                <ChevronRight className="w-5 h-5" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Carousel */}
+          <div
+            id="featured-deals-container"
+            className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
+            onScroll={(e) => setFeaturedScrollPosition(e.currentTarget.scrollLeft)}
+          >
+            {hotelDeals.map((deal, index) => (
+              <motion.div
+                key={deal.id}
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="flex-shrink-0 w-80"
+              >
+                <Card className="overflow-hidden h-full hover:shadow-xl transition-shadow duration-300">
+                  <div className="relative h-48">
+                    <ImageWithFallback
+                      src={deal.image}
+                      alt={deal.name}
+                      className="w-full h-full object-cover"
+                    />
+                    {/* Discount Badge */}
+                    <div className="absolute top-4 right-4">
+                      <div className="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center shadow-lg">
+                        <div className="text-center">
+                          <div className="font-poppins font-bold">{deal.discount}%</div>
+                          <div className="font-poppins text-xs">OFF</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <CardContent className="p-4">
+                    <h3 className="font-merchant text-xl mb-1 font-medium font-bold font-normal">{deal.name}</h3>
+                    <p className="font-poppins text-sm text-gray-600 mb-3 font-normal flex items-center gap-1">
+                      <MapPin className="w-4 h-4" />
+                      {deal.location}
+                    </p>
+
+                    {/* Rating */}
+                    <div className="flex items-center gap-2 mb-3">
+                      <div className="flex">
+                        {[...Array(5)].map((_, i) => (
+                          <Star
+                            key={i}
+                            className={`w-4 h-4 ${i < Math.floor(deal.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
+                          />
+                        ))}
+                      </div>
+                      <span className="font-poppins text-sm font-normal text-gray-600">
+                        {deal.rating} ({deal.reviews} reviews)
+                      </span>
+                    </div>
+
+                    {/* Features */}
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {deal.features.slice(0, 3).map((feature) => (
+                        <Badge key={feature} variant="secondary" className="font-poppins text-xs font-normal">
+                          {feature}
+                        </Badge>
+                      ))}
+                    </div>
+
+                    {/* Price */}
+                    <div className="flex items-end justify-between">
+                      <div>
+                        <p className="font-poppins text-sm text-gray-500 line-through font-normal">
+                          ${deal.originalPrice}
+                        </p>
+                        <p className="font-poppins text-2xl font-bold text-primary">
+                          ${deal.salePrice}
+                          <span className="text-sm font-normal text-gray-600">/night</span>
+                        </p>
+                      </div>
+                      <Button className="font-poppins font-semibold">Book Now</Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Deal Categories Grid */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <h2 className="font-merchant text-3xl md:text-4xl mb-8 text-center">
+            <span className="font-medium">Browse by</span>{' '}
+            <span className="font-semibold text-primary">Category</span>
+          </h2>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
+            {dealCategories.map((category, index) => (
+              <motion.div
+                key={category.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.05 }}
+              >
+                <Card className="cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-300 h-full">
+                  <CardContent className="p-6 text-center">
+                    <category.icon className="w-12 h-12 mx-auto mb-3 text-primary" />
+                    <h3 className="font-merchant text-lg mb-2 font-medium">{category.name}</h3>
+                    <p className="font-poppins text-sm text-gray-600 font-normal">{category.count} deals</p>
+                    <Button variant="ghost" className="mt-3 w-full font-poppins font-medium">
+                      View Deals
+                      <ChevronRight className="w-4 h-4 ml-1" />
+                    </Button>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Destination Spotlight */}
+      <section className="py-16 bg-gray-50">
+        <div className="container mx-auto px-4">
+          <h2 className="font-merchant text-3xl md:text-4xl mb-2 text-center">
+            <span className="font-medium">Destination</span>{' '}
+            <span className="font-semibold text-primary">Spotlight</span>
+          </h2>
+          <p className="font-poppins text-center text-gray-600 mb-8 font-normal">
+            Discover amazing hotel deals in top destinations worldwide
+          </p>
+
+          {/* Filter Chips */}
+          <div className="flex flex-wrap justify-center gap-2 mb-8">
+            {['popular', 'seasonal', 'hidden-gems', 'city-pass'].map((filter) => (
+              <Button
+                key={filter}
+                variant={selectedFilter === filter ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setSelectedFilter(filter)}
+                className="font-poppins font-medium capitalize"
+              >
+                {filter.replace('-', ' ')}
+              </Button>
+            ))}
+          </div>
+
+          {/* Cities Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {cities.map((city, index) => (
+              <motion.div
+                key={city.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: "-100px" }}
+                transition={{ 
+                  duration: 0.4, 
+                  delay: Math.min(index * 0.05, 0.3),
+                  ease: [0.23, 1, 0.32, 1]
+                }}
+              >
+                <Card className="overflow-hidden cursor-pointer group h-full shadow-md hover:shadow-2xl transition-shadow duration-300">
+                  <div className="relative h-48 overflow-hidden">
+                    <ImageWithFallback
+                      src={city.image}
+                      alt={city.name}
+                      className="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+                    <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
+                      <h3 className="font-merchant text-xl mb-1 font-medium">{city.name}</h3>
+                      <p className="font-poppins text-sm font-normal">From ${city.fromPrice}/night</p>
+                    </div>
+                  </div>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Filter & Results Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="font-merchant text-3xl md:text-4xl">
+              <span className="font-medium">All</span>{' '}
+              <span className="font-semibold text-primary">Hotel Deals</span>
+            </h2>
+
+            {/* Mobile Filter Toggle */}
+            <Button
+              variant="outline"
+              onClick={() => setShowFilters(!showFilters)}
+              className="md:hidden font-poppins font-medium"
+            >
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              Filters
+            </Button>
+          </div>
+
+          <div className="grid md:grid-cols-4 gap-8">
+            {/* Filters Sidebar */}
+            <div className={`${showFilters ? 'block' : 'hidden'} md:block`}>
+              <Card className="sticky top-24">
+                <CardContent className="p-6 space-y-6">
+                  {/* Mobile Close Button */}
+                  <div className="flex items-center justify-between md:hidden">
+                    <h3 className="font-merchant text-xl font-medium">Filters</h3>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setShowFilters(false)}
+                    >
+                      <X className="w-5 h-5" />
+                    </Button>
+                  </div>
+
+                  {/* Price Range */}
+                  <div>
+                    <h3 className="font-poppins font-semibold mb-4">Price Range</h3>
+                    <Slider
+                      value={priceRange}
+                      onValueChange={setPriceRange}
+                      min={0}
+                      max={1000}
+                      step={10}
+                      className="mb-2"
+                    />
+                    <div className="flex justify-between font-poppins text-sm font-normal text-gray-600">
+                      <span>${priceRange[0]}</span>
+                      <span>${priceRange[1]}</span>
+                    </div>
+                  </div>
+
+                  {/* Star Rating */}
+                  <div>
+                    <h3 className="font-poppins font-semibold mb-4">Star Rating</h3>
+                    <div className="space-y-2">
+                      {[5, 4, 3, 2].map((stars) => (
+                        <div key={stars} className="flex items-center gap-2">
+                          <Checkbox
+                            checked={selectedStars.includes(stars)}
+                            onCheckedChange={() => toggleStar(stars)}
+                          />
+                          <div className="flex">
+                            {[...Array(stars)].map((_, i) => (
+                              <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Amenities */}
+                  <div>
+                    <h3 className="font-poppins font-semibold mb-4">Amenities</h3>
+                    <div className="space-y-3">
+                      {amenities.map((amenity) => (
+                        <div key={amenity.id} className="flex items-center gap-2">
+                          <Checkbox
+                            checked={selectedAmenities.includes(amenity.id)}
+                            onCheckedChange={() => toggleAmenity(amenity.id)}
+                          />
+                          <amenity.icon className="w-4 h-4 text-gray-600" />
+                          <span className="font-poppins text-sm font-normal">{amenity.name}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <Button className="w-full font-poppins font-semibold">Apply Filters</Button>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Results Grid */}
+            <div className="md:col-span-3">
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {hotelDeals.map((deal, index) => (
+                  <motion.div
+                    key={deal.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                  >
+                    <Card className="overflow-hidden h-full hover:shadow-xl transition-all duration-300 group">
+                      <div className="relative h-48">
+                        <ImageWithFallback
+                          src={deal.image}
+                          alt={deal.name}
+                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
+                        />
+                        <div className="absolute top-3 right-3">
+                          <div className="bg-primary text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg">
+                            <div className="text-center">
+                              <div className="font-poppins font-bold text-sm">{deal.discount}%</div>
+                              <div className="font-poppins text-xs">OFF</div>
+                            </div>
+                          </div>
+                        </div>
+                        <Badge className="absolute bottom-3 left-3 bg-green-500 font-poppins text-xs font-normal">
+                          Free Cancellation
+                        </Badge>
+                      </div>
+
+                      <CardContent className="p-4">
+                        <h3 className="font-merchant text-lg mb-1 font-medium">{deal.name}</h3>
+                        <p className="font-poppins text-sm text-gray-600 mb-2 font-normal flex items-center gap-1">
+                          <MapPin className="w-4 h-4" />
+                          {deal.location}
+                        </p>
+
+                        <div className="flex items-center gap-2 mb-3">
+                          <div className="flex">
+                            {[...Array(5)].map((_, i) => (
+                              <Star
+                                key={i}
+                                className={`w-3 h-3 ${i < Math.floor(deal.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
+                              />
+                            ))}
+                          </div>
+                          <span className="font-poppins text-xs font-normal text-gray-600">
+                            ({deal.reviews})
+                          </span>
+                        </div>
+
+                        <div className="flex flex-wrap gap-1 mb-3">
+                          {deal.features.slice(0, 2).map((feature) => (
+                            <Badge key={feature} variant="secondary" className="font-poppins text-xs font-normal">
+                              {feature}
+                            </Badge>
+                          ))}
+                        </div>
+
+                        <div className="flex items-end justify-between pt-3 border-t">
+                          <div>
+                            <p className="font-poppins text-xs text-gray-500 line-through font-normal">
+                              ${deal.originalPrice}
+                            </p>
+                            <p className="font-poppins text-xl font-bold text-primary">
+                              ${deal.salePrice}
+                              <span className="text-xs font-normal text-gray-600">/night</span>
+                            </p>
+                          </div>
+                          <Button size="sm" className="font-poppins font-semibold">View Deal</Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Special Offers Section */}
+      <section className="py-16 bg-gradient-to-br from-primary/5 to-secondary/5">
+        <div className="container mx-auto px-4">
+          <h2 className="font-merchant text-3xl md:text-4xl mb-12 text-center">
+            <span className="font-medium">Special</span>{' '}
+            <span className="font-semibold text-primary">Offers</span>
+          </h2>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+            {[
+              { icon: Crown, title: 'Member Exclusive', description: 'Extra 10% off for members', color: 'from-yellow-400 to-orange-500' },
+              { icon: UserPlus, title: 'Refer Friends', description: 'Get $50 credit per referral', color: 'from-blue-400 to-purple-500' },
+              { icon: Mail, title: 'Newsletter Deals', description: 'Exclusive subscriber offers', color: 'from-green-400 to-emerald-500' },
+              { icon: Smartphone, title: 'App-Only Sales', description: 'Flash deals on mobile app', color: 'from-pink-400 to-rose-500' }
+            ].map((offer, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Card className="h-full hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer">
+                  <CardContent className="p-6 text-center">
+                    <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br ${offer.color} flex items-center justify-center`}>
+                      <offer.icon className="w-8 h-8 text-white" />
+                    </div>
+                    <h3 className="font-merchant text-xl mb-2 font-medium">{offer.title}</h3>
+                    <p className="font-poppins text-sm text-gray-600 mb-4 font-normal">{offer.description}</p>
+                    <Button variant="outline" className="w-full font-poppins font-medium">
+                      Learn More
+                    </Button>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <Footer
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
new file mode 100644
index 0000000..35c4691
--- /dev/null
+++ b/src/components/HowItWorks.tsx
@@ -0,0 +1,2224 @@
+import { CreditCard, MapPin, Calendar, Zap, ChevronLeft, ChevronRight, Smartphone, Heart } from 'lucide-react';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+const steps = [
+  {
+    id: 1,
+    title: 'Choose Your City',
+    subtitle: 'Select Your Destination',
+    description: 'Browse our collection of amazing cities and pick the perfect destination for your next adventure. Each city offers unique experiences and attractions.',
+    icon: MapPin
+  },
+  {
+    id: 2,
+    title: 'Select Your Pass',
+    subtitle: 'Pick Your Perfect Plan',
+    description: 'Choose from our flexible pass options that match your travel style and duration. From 1-day express to 7-day explorer passes.',
+    icon: CreditCard
+  },
+  {
+    id: 3,
+    title: 'Plan Your Itinerary',
+    subtitle: 'Create Your Schedule',
+    description: 'Use our smart planning tools to create the perfect itinerary with skip-the-line access to your favorite attractions and experiences.',
+    icon: Calendar
+  },
+  {
+    id: 4,
+    title: 'Download the App',
+    subtitle: 'Get Mobile Access',
+    description: 'Download our mobile app to have instant access to your digital pass, maps, and real-time updates wherever you go.',
+    icon: Smartphone
+  },
+  {
+    id: 5,
+    title: 'Enjoy Your Adventure',
+    subtitle: 'Explore & Discover',
+    description: 'Show your digital pass and enjoy instant access to attractions, tours, and experiences. No more waiting in long ticket lines.',
+    icon: Zap
+  },
+  {
+    id: 6,
+    title: 'Create Memories',
+    subtitle: 'Share Your Journey',
+    description: 'Capture amazing moments and share your experiences with friends. Rate attractions and help future travelers discover the best spots.',
+    icon: Heart
+  }
+];
+
+export function HowItWorks() {
+  const [activeStep, setActiveStep] = useState(0); // Start with first step active
+
+  const nextStep = () => {
+    setActiveStep((prev) => (prev + 1) % steps.length);
+  };
+
+  const prevStep = () => {
+    setActiveStep((prev) => (prev - 1 + steps.length) % steps.length);
+  };
+
+  const goToStep = (index: number) => {
+    setActiveStep(index);
+  };
+
+  const currentStep = steps[activeStep];
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-green-50/30 to-blue-50/30">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
+            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Simple Process
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
+            <span className="font-light">How Your</span>{' '}
+            <span className="font-normal">Melbourne</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">City Card</span>{' '}
+            <span className="font-light">Works.</span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            One purchase. One card. Unlimited experiences.
+          </p>
+        </div>
+
+        {/* Main Content */}
+        <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">
+
+
+                {/* Current Step Details */}
+                <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm h-[400px] flex flex-col">
+                  <div className="flex items-center gap-4 mb-4">
+                    <div className="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
+                      <span className="text-white font-bold">{currentStep.id}</span>
+                    </div>
+                    <span className="font-medium text-gray-500">
+                      Step {currentStep.id} of {steps.length}
+                    </span>
+                  </div>
+
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={activeStep}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <div className="w-16 h-16 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
+                        {currentStep.id === 1 && (
+                          // Choose Your City - Multiple city selection animation (larger version)
+                          <div className="relative scale-125">
+                            {/* World map background */}
+                            <div className="w-8 h-6 bg-primary/10 rounded border border-primary/20 relative overflow-hidden">
+                              {/* Animated cities appearing sequentially */}
+                              {[0, 1, 2].map((cityIndex) => (
+                                <motion.div
+                                  key={cityIndex}
+                                  className="absolute w-1.5 h-1.5 rounded-full bg-primary"
+                                  style={{
+                                    left: `${20 + cityIndex * 25}%`,
+                                    top: `${30 + (cityIndex % 2) * 30}%`,
+                                  }}
+                                  animate={{
+                                    scale: [0, 1.5, 1],
+                                    opacity: [0, 1, 0.7],
+                                  }}
+                                  transition={{
+                                    duration: 1.5,
+                                    repeat: Infinity,
+                                    delay: cityIndex * 0.5,
+                                    ease: "easeOut"
+                                  }}
+                                />
+                              ))}
+                              
+                              {/* Selection wave effect */}
+                              <motion.div
+                                className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/20 to-transparent"
+                                animate={{
+                                  x: ['-100%', '100%'],
+                                }}
+                                transition={{
+                                  duration: 2.5,
+                                  repeat: Infinity,
+                                  ease: "linear"
+                                }}
+                              />
+                            </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"
+                              animate={{
+                                scaleX: [0.5, 1, 0.5],
+                                opacity: [0.6, 1, 0.6],
+                              }}
+                              transition={{
+                                duration: 2,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            />
+                          </div>
+                        )}
+                        
+                        {currentStep.id === 2 && (
+                          // Select Pass - Card selection animation (larger version)
+                          <div className="relative scale-150">
+                            <motion.div
+                              className="w-5 h-3 rounded-sm bg-primary"
+                              animate={{
+                                rotateY: [0, 180, 360],
+                              }}
+                              transition={{
+                                duration: 3,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            />
+                            <motion.div
+                              className="absolute top-0.5 left-0.5 w-1 h-0.5 rounded-full bg-primary/60"
+                              animate={{
+                                opacity: [1, 0.3, 1],
+                              }}
+                              transition={{
+                                duration: 3,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            />
+                          </div>
+                        )}
+                        
+                        {currentStep.id === 3 && (
+                          // Plan Journey - Calendar animation (larger version)
+                          <div className="relative scale-150">
+                            <motion.div
+                              className="w-5 h-4 rounded border border-primary bg-primary/20"
+                            />
+                            <div className="absolute top-0 left-1 right-1 grid grid-cols-3 gap-0.5 mt-1">
+                              {[0, 1, 2].map((dot, idx) => (
+                                <motion.div
+                                  key={dot}
+                                  className="w-0.5 h-0.5 rounded-full bg-primary"
+                                  animate={{
+                                    scale: [1, 1.5, 1],
+                                    opacity: [0.5, 1, 0.5],
+                                  }}
+                                  transition={{
+                                    duration: 1.5,
+                                    repeat: Infinity,
+                                    delay: idx * 0.3,
+                                    ease: "easeInOut"
+                                  }}
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {currentStep.id === 4 && (
+                          // Download App - Complete app download experience
+                          <div className="relative scale-125">
+                            {/* App Store Interface */}
+                            <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" />
+                                <div className="flex-1">
+                                  <div className="h-0.5 bg-primary/30 rounded mb-0.5" />
+                                  <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"
+                                animate={{
+                                  backgroundColor: ['rgba(99,102,241,0.1)', 'rgba(99,102,241,0.3)', 'rgba(99,102,241,0.1)'],
+                                  borderColor: ['rgba(99,102,241,0.3)', 'rgba(99,102,241,0.8)', 'rgba(99,102,241,0.3)'],
+                                }}
+                                transition={{
+                                  duration: 2,
+                                  repeat: Infinity,
+                                  ease: "easeInOut"
+                                }}
+                              >
+                                <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"
+                              animate={{
+                                opacity: [0, 1, 1, 0],
+                              }}
+                              transition={{
+                                duration: 4,
+                                repeat: Infinity,
+                                times: [0, 0.3, 0.8, 1],
+                                ease: "easeInOut"
+                              }}
+                            >
+                              <motion.div
+                                className="h-full bg-primary rounded-full"
+                                animate={{
+                                  scaleX: [0, 0.3, 0.6, 1],
+                                }}
+                                transition={{
+                                  duration: 4,
+                                  repeat: Infinity,
+                                  ease: "easeOut"
+                                }}
+                                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 */}
+                              <div className="absolute inset-0.5 bg-primary/5 rounded-sm">
+                                {/* App Icon Installing */}
+                                <motion.div
+                                  className="absolute top-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-sm border border-primary/50 bg-primary/20"
+                                  animate={{
+                                    scale: [0, 1.2, 1],
+                                    opacity: [0, 1, 0.8],
+                                    rotate: [0, 360, 0],
+                                  }}
+                                  transition={{
+                                    duration: 3,
+                                    repeat: Infinity,
+                                    delay: 1,
+                                    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"
+                                  animate={{
+                                    opacity: [1, 0],
+                                    scale: [1, 1.5],
+                                  }}
+                                  transition={{
+                                    duration: 3,
+                                    repeat: Infinity,
+                                    delay: 1,
+                                    ease: "easeOut"
+                                  }}
+                                />
+                              </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"
+                              animate={{
+                                scale: [0, 3, 0],
+                                opacity: [0, 0.6, 0],
+                                borderColor: ['rgba(99,102,241,0.3)', 'rgba(34,197,94,0.8)', 'rgba(99,102,241,0.3)'],
+                              }}
+                              transition={{
+                                duration: 2,
+                                repeat: Infinity,
+                                delay: 3,
+                                ease: "easeOut"
+                              }}
+                            />
+                            
+                            {/* Download Arrow */}
+                            <motion.div
+                              className="absolute -top-2 left-1/2 transform -translate-x-1/2 text-primary"
+                              animate={{
+                                y: [-1, 1, -1],
+                                opacity: [0.4, 1, 0.4],
+                              }}
+                              transition={{
+                                duration: 1.5,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              <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"/>
+                              </svg>
+                            </motion.div>
+                            
+                            {/* Success Particles */}
+                            {[...Array(4)].map((_, idx) => (
+                              <motion.div
+                                key={idx}
+                                className="absolute w-0.5 h-0.5 bg-primary rounded-full"
+                                animate={{
+                                  x: [0, Math.cos(idx * 90 * Math.PI / 180) * 6],
+                                  y: [0, Math.sin(idx * 90 * Math.PI / 180) * 6],
+                                  opacity: [0, 0.8, 0],
+                                  scale: [0, 1, 0],
+                                }}
+                                transition={{
+                                  duration: 1.5,
+                                  repeat: Infinity,
+                                  delay: 3.5 + idx * 0.1,
+                                  repeatDelay: 2,
+                                  ease: "easeOut"
+                                }}
+                                style={{
+                                  left: '50%',
+                                  top: '50%',
+                                  transform: 'translate(-50%, -50%)'
+                                }}
+                              />
+                            ))}
+                          </div>
+                        )}
+                        
+                        {currentStep.id === 5 && (
+                          // Explore & Enjoy - Floating heart (larger version)
+                          <div className="relative scale-150">
+                            <motion.div
+                              animate={{
+                                y: [-2, 2, -2],
+                                scale: [1, 1.1, 1],
+                              }}
+                              transition={{
+                                duration: 2.5,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              <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"/>
+                                </svg>
+                              </div>
+                            </motion.div>
+                            {[...Array(3)].map((_, idx) => (
+                              <motion.div
+                                key={idx}
+                                className="absolute w-1 h-1 bg-primary/60 rounded-full"
+                                animate={{
+                                  x: [0, Math.cos(idx * 120 * Math.PI / 180) * 12],
+                                  y: [0, Math.sin(idx * 120 * Math.PI / 180) * 12],
+                                  opacity: [0.8, 0],
+                                  scale: [0.5, 1.5],
+                                }}
+                                transition={{
+                                  duration: 2,
+                                  repeat: Infinity,
+                                  delay: idx * 0.5,
+                                  ease: "easeOut"
+                                }}
+                                style={{
+                                  left: '50%',
+                                  top: '50%',
+                                  transform: 'translate(-50%, -50%)'
+                                }}
+                              />
+                            ))}
+                          </div>
+                        )}
+                        
+                        {currentStep.id === 6 && (
+                          // Download App - App download animation (larger version)
+                          <div className="relative scale-125">
+                            {/* Phone outline */}
+                            <div className="w-4 h-6 rounded-sm border-2 border-primary bg-white relative overflow-hidden">
+                              {/* Screen */}
+                              <div className="absolute inset-0.5 bg-primary/5 rounded-sm">
+                                {/* App icon appearing */}
+                                <motion.div
+                                  className="absolute top-1 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 rounded-sm bg-primary"
+                                  animate={{
+                                    scale: [0, 1.2, 1],
+                                    rotate: [0, 10, 0],
+                                  }}
+                                  transition={{
+                                    duration: 1.5,
+                                    repeat: Infinity,
+                                    repeatDelay: 1,
+                                    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
+                                    className="h-full bg-primary rounded-full"
+                                    animate={{
+                                      scaleX: [0, 1, 0],
+                                    }}
+                                    transition={{
+                                      duration: 2.5,
+                                      repeat: Infinity,
+                                      ease: "easeInOut"
+                                    }}
+                                    style={{ transformOrigin: 'left' }}
+                                  />
+                                </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"
+                              animate={{
+                                y: [-2, 2, -2],
+                                opacity: [0.6, 1, 0.6],
+                              }}
+                              transition={{
+                                duration: 1.5,
+                                repeat: Infinity,
+                                ease: "easeInOut"
+                              }}
+                            >
+                              <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"/>
+                              </svg>
+                            </motion.div>
+                            
+                            {/* Success particles */}
+                            {[...Array(3)].map((_, idx) => (
+                              <motion.div
+                                key={idx}
+                                className="absolute w-0.5 h-0.5 bg-primary rounded-full"
+                                animate={{
+                                  x: [0, Math.cos(idx * 120 * Math.PI / 180) * 8],
+                                  y: [0, Math.sin(idx * 120 * Math.PI / 180) * 8],
+                                  opacity: [0, 0.8, 0],
+                                  scale: [0, 1.5, 0],
+                                }}
+                                transition={{
+                                  duration: 1.5,
+                                  repeat: Infinity,
+                                  delay: 2 + idx * 0.2,
+                                  repeatDelay: 1.5,
+                                  ease: "easeOut"
+                                }}
+                                style={{
+                                  left: '50%',
+                                  top: '50%',
+                                  transform: 'translate(-50%, -50%)'
+                                }}
+                              />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      <h4 className="text-2xl text-gray-900 mb-2">
+                        <span className="font-normal">{currentStep.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
+                        <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                          {currentStep.title.split(' ').slice(-1)[0]}
+                        </span>
+                      </h4>
+                      <p className="text-primary font-medium mb-3">
+                        {currentStep.subtitle}
+                      </p>
+                      <p className="text-gray-600 leading-relaxed">
+                        {currentStep.description}
+                      </p>
+                    </motion.div>
+                  </AnimatePresence>
+
+                  {/* Navigation */}
+                  <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
+                    <button
+                      onClick={prevStep}
+                      className="flex items-center justify-center w-10 h-10 rounded-xl bg-gray-50 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-all duration-200"
+                    >
+                      <ChevronLeft className="w-5 h-5" />
+                    </button>
+
+                    <div className="flex gap-1.5">
+                      {steps.map((_, index) => (
+                        <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'
+                          }`}
+                        />
+                      ))}
+                    </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"
+                    >
+                      <ChevronRight className="w-5 h-5" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Right Panel - Connected Flow Diagram */}
+            <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>
+                              </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>
+
+                              {/* 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"
+                                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>
+                              </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>
+                                      ))}
+                                    </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' : ''}
+                                              ${isToday && !isSelected ? 'bg-blue-100 text-blue-600 font-medium' : ''}
+                                              ${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)'],
+                                        }}
+                                        transition={{
+                                          duration: 3,
+                                          repeat: Infinity,
+                                          delay: dayIdx * 0.5 + 1,
+                                          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>
+                                      </motion.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"
+                                    animate={{
+                                      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,
+                                      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>
+                                  </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"
+                                      animate={{
+                                        scale: [1, 1.1, 1],
+                                      }}
+                                      transition={{
+                                        duration: 2,
+                                        repeat: Infinity,
+                                        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>
+                                  </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) => (
+                                    <motion.div
+                                      key={idx}
+                                      className={`flex flex-col items-center justify-center flex-1 ${
+                                        tab.active ? 'text-primary' : 'text-gray-400'
+                                      }`}
+                                      animate={{
+                                        color: tab.active ? 
+                                          ['rgb(99, 102, 241)', 'rgb(79, 70, 229)', 'rgb(99, 102, 241)'] :
+                                          ['rgb(156, 163, 175)'],
+                                      }}
+                                      transition={{
+                                        duration: 2,
+                                        repeat: Infinity,
+                                        delay: idx * 0.2,
+                                        ease: "easeInOut"
+                                      }}
+                                    >
+                                      <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 === 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="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden mb-6"
+                                  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)'
+                                    ],
+                                  }}
+                                  transition={{
+                                    duration: 3,
+                                    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>
+
+                                  {/* App Listing */}
+                                  <div className="p-6">
+                                    <div className="flex gap-4 mb-4">
+                                      {/* App Icon */}
+                                      <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"
+                                        animate={{
+                                          scale: [1, 1.05, 1],
+                                        }}
+                                        transition={{
+                                          duration: 2.5,
+                                          repeat: Infinity,
+                                          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>
+                                            </div>
+                                          </div>
+                                        </motion.div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </motion.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>
+                              </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>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Layout */}
+          <div className="lg:hidden">
+            {/* Current Step Display */}
+            <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 mb-8">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
+                  <span className="text-white text-sm font-bold">{currentStep.id}</span>
+                </div>
+                <span className="text-sm font-medium text-gray-500">
+                  Step {currentStep.id} of {steps.length}
+                </span>
+              </div>
+
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeStep}
+                  initial={{ opacity: 0, x: 20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: -20 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <div className="w-12 h-12 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center mb-4">
+                    <currentStep.icon className="w-6 h-6 text-primary" />
+                  </div>
+
+                  <h3 className="text-xl text-gray-900 mb-2">
+                    <span className="font-normal">{currentStep.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
+                    <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                      {currentStep.title.split(' ').slice(-1)[0]}
+                    </span>
+                  </h3>
+                  <p className="text-primary font-medium text-sm mb-3">
+                    {currentStep.subtitle}
+                  </p>
+                  <p className="text-gray-600 leading-relaxed text-sm">
+                    {currentStep.description}
+                  </p>
+                </motion.div>
+              </AnimatePresence>
+
+              {/* Mobile Navigation */}
+              <div className="flex items-center justify-between mt-6">
+                <button
+                  onClick={prevStep}
+                  className="flex items-center justify-center w-10 h-10 rounded-xl bg-gray-50 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-all duration-200"
+                >
+                  <ChevronLeft className="w-5 h-5" />
+                </button>
+
+                <div className="flex gap-1.5">
+                  {steps.map((_, index) => (
+                    <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'
+                      }`}
+                    />
+                  ))}
+                </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"
+                >
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            {/* 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' 
+                            : isCompleted
+                            ? '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' 
+                            : isCompleted
+                            ? '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
+                            ${isActive ? 'text-white' : 'text-gray-900'}
+                          `}>
+                            {step.title}
+                          </div>
+                        </div>
+
+                        {isActive && (
+                          <motion.div
+                            className="w-2 h-2 bg-white rounded-full"
+                            animate={{ scale: [1, 1.2, 1] }}
+                            transition={{ duration: 2, repeat: Infinity }}
+                          />
+                        )}
+                      </motion.button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom CTA */}
+        <div className="text-center mt-16">
+          <div className="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-3xl p-8 max-w-2xl mx-auto border border-gray-100">
+            <h3 className="text-2xl text-gray-900 mb-3">
+              <span className="font-normal">Ready to</span>{' '}
+              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Start</span>{' '}
+              <span className="font-light">Your</span>{' '}
+              <span className="font-bold italic">Adventure</span>?
+            </h3>
+            <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"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              Get Your City Card
+            </motion.button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HowItWorksPage.tsx b/src/components/HowItWorksPage.tsx
new file mode 100644
index 0000000..47b096a
--- /dev/null
+++ b/src/components/HowItWorksPage.tsx
@@ -0,0 +1,406 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'motion/react';
+import { Check, ChevronRight, MapPin, Calendar, Smartphone, CreditCard } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { AttractionHassleFreeSection } from './AttractionHassleFreeSection';
+import { MobileAppSection } from './MobileAppSection';
+import { WhyChooseCityCards } from './WhyChooseCityCards';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { ReviewsSection } from './ReviewsSection';
+import { Footer } from './Footer';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface HowItWorksPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+interface StepItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  isMainStep: boolean;
+  parentStep?: string;
+  image?: string;
+  features?: string[];
+}
+
+const steps: StepItem[] = [
+  {
+    id: 'pick-pass',
+    title: 'Pick Your Pass',
+    description: 'Choose between our Selective or Unlimited pass options. Each designed to match your travel style and give you the freedom to explore Melbourne your way.',
+    icon: <CreditCard className="w-6 h-6" />,
+    isMainStep: true,
+    features: ['Selective or Unlimited options', 'Instant digital delivery', 'Skip-the-line access', 'Mobile-friendly tickets']
+  },
+  {
+    id: 'plan-itinerary',
+    title: 'Plan Your Journey',
+    description: 'Use our smart planning tools to create your perfect Melbourne itinerary. Get personalized recommendations based on your interests and available time.',
+    icon: <Calendar className="w-6 h-6" />,
+    isMainStep: true,
+    features: ['AI-powered suggestions', 'Real-time crowd updates', 'Weather-based planning', 'Flexible scheduling']
+  },
+  {
+    id: 'explore-enjoy',
+    title: 'Explore & Enjoy',
+    description: 'Experience Melbourne like never before with our mobile app, offline maps, and 24/7 support. Every moment is designed to be effortless and memorable.',
+    icon: <MapPin className="w-6 h-6" />,
+    isMainStep: true,
+    features: ['Mobile app included', 'Offline map access', '24/7 customer support', 'Audio guide content']
+  }
+];
+
+export function HowItWorksPage({ 
+  onHomeClick, 
+  onMelbourneClick, 
+  onPassesClick,
+  onCheckoutClick, 
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: HowItWorksPageProps) {
+  const [activeStep, setActiveStep] = useState<string>('pick-pass');
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const mainSteps = steps; // All steps are now main steps
+  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Scroll-based step activation
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+
+      const scrollY = window.scrollY;
+      const windowHeight = window.innerHeight;
+      const containerTop = containerRef.current.offsetTop;
+      const containerHeight = containerRef.current.offsetHeight;
+
+      // Calculate trigger points for each step (when step indicator is in center of viewport)
+      const stepElements = stepRefs.current.filter(Boolean);
+      let currentStepIndex = 0;
+      let minDistance = Infinity;
+
+      stepElements.forEach((stepEl, index) => {
+        if (stepEl) {
+          const stepTop = stepEl.offsetTop + containerTop;
+          const stepCenter = stepTop + stepEl.offsetHeight / 2;
+          const viewportCenter = scrollY + windowHeight / 2;
+          const distance = Math.abs(stepCenter - viewportCenter);
+
+          if (distance < minDistance) {
+            minDistance = distance;
+            currentStepIndex = index;
+          }
+        }
+      });
+
+      // Update active step
+      const newActiveStep = mainSteps[currentStepIndex]?.id || 'pick-pass';
+      if (newActiveStep !== activeStep) {
+        setActiveStep(newActiveStep);
+      }
+
+      // Calculate smooth progress through entire stepper
+      const sectionStart = containerTop - windowHeight / 2;
+      const sectionEnd = containerTop + containerHeight - windowHeight / 2;
+      const rawProgress = (scrollY - sectionStart) / (sectionEnd - sectionStart);
+      const progress = Math.max(0, Math.min(1, rawProgress));
+      
+      setScrollProgress(progress);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll(); // Initial call
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [activeStep, mainSteps]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navigation */}
+      <Navbar 
+        activeCity="Melbourne"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+      
+      <CitySubmenu 
+        currentPage={currentPage}
+        onClose={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
+        {/* Page Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <h1 className="font-poppins font-light text-4xl md:text-5xl lg:text-6xl mb-4">
+            How{' '}
+            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              It Works
+            </span>
+          </h1>
+          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
+            Discover the simple process that transforms your city exploration from ordinary to extraordinary
+          </p>
+        </motion.div>
+
+        {/* Vertical Stepper with Alternating Layout */}
+        <div ref={containerRef} className="relative max-w-6xl mx-auto mb-20">
+          {/* Central Progress Line */}
+          <div className="absolute left-1/2 transform -translate-x-0.5 top-0 bottom-0 w-1 bg-gray-200 rounded-full">
+            {/* Progress Fill */}
+            <motion.div
+              className="w-full bg-gradient-to-b from-primary to-secondary rounded-full relative"
+              initial={{ height: "0%" }}
+              animate={{ 
+                height: `${Math.min(100, scrollProgress * 100)}%`
+              }}
+              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+            >
+              {/* Ellipse at the end when progress reaches 100% */}
+              {scrollProgress >= 1 && (
+                <motion.div
+                  className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-6 h-3 bg-gradient-to-r from-primary to-secondary rounded-full shadow-lg"
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
+                />
+              )}
+            </motion.div>
+          </div>
+
+          {/* Steps Container */}
+          <div className="space-y-40">
+            {mainSteps.map((step, index) => {
+              const isActive = activeStep === step.id;
+              const isLeft = index % 2 === 0; // Step 1 & 3 on left, Step 2 on right
+              const stepNumber = `0${index + 1}`;
+              
+              return (
+                <motion.div
+                  key={step.id}
+                  ref={(el) => stepRefs.current[index] = el}
+                  className="relative"
+                  initial={{ opacity: 0, y: 50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: index * 0.2 }}
+                >
+                  {/* Step Indicator Circle - Always in center */}
+                  <motion.div
+                    className={`
+                      absolute left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full
+                      flex items-center justify-center z-10 border-4 transition-all duration-500
+                      ${isActive 
+                        ? 'bg-primary border-white text-white shadow-xl scale-110' 
+                        : 'bg-white border-gray-300 text-gray-600'
+                      }
+                    `}
+                    animate={{ scale: isActive ? 1.1 : 1 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <div className="w-6 h-6">
+                      {step.icon}
+                    </div>
+                  </motion.div>
+
+                  {/* Content Container - Zigzag Layout */}
+                  <div className="grid grid-cols-12 gap-8 items-center">
+                    {/* Content Card */}
+                    <motion.div
+                      className={`${isLeft ? 'col-span-5' : 'col-span-5 col-start-8'}`}
+                      initial={{ opacity: 0, x: isLeft ? -50 : 50 }}
+                      animate={{ 
+                        opacity: isActive ? 1 : 0.6, 
+                        x: 0,
+                        scale: isActive ? 1 : 0.95
+                      }}
+                      transition={{ duration: 0.5, delay: 0.2 }}
+                    >
+                      <Card className={`p-8 border-2 transition-all duration-500 rounded-3xl ${
+                        isActive 
+                          ? 'border-primary shadow-xl bg-gradient-to-br from-primary/5 to-secondary/5' 
+                          : 'border-gray-200 bg-white'
+                      }`}>
+                        <CardContent className="p-0 text-center">
+                          {/* Step Number */}
+                          <motion.div
+                            className={`text-6xl font-poppins font-light mb-4 transition-colors duration-300 ${
+                              isActive ? 'text-primary' : 'text-gray-300'
+                            }`}
+                            animate={{ scale: isActive ? 1.1 : 1 }}
+                            transition={{ duration: 0.3 }}
+                          >
+                            {stepNumber}
+                          </motion.div>
+
+                          {/* Step Title */}
+                          <h3 className="font-poppins font-normal text-2xl text-gray-900 mb-4">
+                            {step.title}
+                          </h3>
+
+                          {/* Step Description */}
+                          <p className="text-gray-600 leading-relaxed mb-6 text-center font-light">
+                            {step.description}
+                          </p>
+
+                          {/* Features List */}
+                          {step.features && (
+                            <div className="grid grid-cols-2 gap-3 mb-6">
+                              {step.features.map((feature, featureIndex) => (
+                                <motion.div
+                                  key={featureIndex}
+                                  className="flex items-center gap-2 text-left"
+                                  initial={{ opacity: 0, x: -20 }}
+                                  animate={{ opacity: isActive ? 1 : 0.7, x: 0 }}
+                                  transition={{ duration: 0.3, delay: featureIndex * 0.1 }}
+                                >
+                                  <div className="w-4 h-4 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
+                                    <Check className="w-2.5 h-2.5 text-green-600" />
+                                  </div>
+                                  <span className="text-gray-700 text-sm font-light">{feature}</span>
+                                </motion.div>
+                              ))}
+                            </div>
+                          )}
+
+                          {/* Action Button */}
+                          {isActive && (
+                            <motion.div
+                              className="mt-6"
+                              initial={{ opacity: 0, y: 20 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              transition={{ duration: 0.4, delay: 0.3 }}
+                            >
+                              <Button 
+                                className="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-xl font-normal"
+                                onClick={onPassesClick}
+                              >
+                                Get Started
+                                <ChevronRight className="w-4 h-4 ml-2" />
+                              </Button>
+                            </motion.div>
+                          )}
+                        </CardContent>
+                      </Card>
+                    </motion.div>
+
+                    {/* Spacer for the opposite side */}
+                    <div className={`${isLeft ? 'col-span-6 col-start-7' : 'col-span-6'}`} />
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Make the most of every attraction section */}
+        <AttractionHassleFreeSection />
+
+        {/* Mobile App Section */}
+        <MobileAppSection />
+
+        {/* Why Choose CityCards Section */}
+        <div className="my-20">
+          <WhyChooseCityCards />
+        </div>
+
+        {/* Enhanced Testimonials Section */}
+        <EnhancedTestimonials />
+
+        {/* Reviews Section */}
+        <ReviewsSection />
+      </div>
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
+
+export default HowItWorksPage;
\ No newline at end of file
diff --git a/src/components/ItineraryViewPage.tsx b/src/components/ItineraryViewPage.tsx
new file mode 100644
index 0000000..0f72882
--- /dev/null
+++ b/src/components/ItineraryViewPage.tsx
@@ -0,0 +1,732 @@
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Calendar, Clock, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface ItineraryViewPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onCreateItineraryClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user?: { email: string; name: string; } | null;
+}
+
+// Enhanced activity type with more details
+interface Activity {
+  time: string;
+  activity: string;
+  location: string;
+  address: string;
+  image: string;
+  categories: string[];
+  description: string[];
+  isFavorite?: boolean;
+}
+
+export function ItineraryViewPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onCreateItineraryClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: ItineraryViewPageProps) {
+  const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily');
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+
+  const toggleFavorite = (activityKey: string) => {
+    setFavorites(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(activityKey)) {
+        newSet.delete(activityKey);
+      } else {
+        newSet.add(activityKey);
+      }
+      return newSet;
+    });
+  };
+
+  // Enhanced itinerary data with images, addresses, and detailed info
+  const generatedItinerary = {
+    destination: {
+      name: 'Melbourne',
+      country: 'Australia',
+      weather: '18°C, Sunny',
+      image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=400&h=300&fit=crop'
+    },
+    totalDays: 3,
+    estimatedCost: '$450 AUD',
+    includedActivities: 18,
+    dailyPlans: [
+      {
+        day: 1,
+        title: "City Center & Culture",
+        activities: [
+          { 
+            time: '8:00 am', 
+            activity: 'The Langham Melbourne', 
+            location: 'The Langham Melbourne',
+            address: '1 Southgate Avenue, Southbank VIC 3006',
+            image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&h=600&fit=crop',
+            categories: ['Accommodation', 'Luxury'],
+            description: [
+              'Check-in at luxury riverside hotel',
+              'Enjoy complimentary breakfast',
+              'Relax at the spa facilities',
+              'Explore the surrounding Southbank area'
+            ]
+          },
+          { 
+            time: '10:00 am', 
+            activity: 'Federation Square', 
+            location: 'Federation Square',
+            address: 'Corner Swanston & Flinders Streets, Melbourne VIC 3000',
+            image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Landmark'],
+            description: [
+              'Explore Melbourne\'s cultural precinct',
+              'Visit the ACMI museum',
+              'Enjoy street performances',
+              'Take photos at iconic locations'
+            ]
+          },
+          { 
+            time: '12:00 pm', 
+            activity: 'Degrave Street Café', 
+            location: 'Degrave Street Espresso Bar',
+            address: '23-25 Degraves Street, Melbourne VIC 3000',
+            image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop',
+            categories: ['Food', 'Drinks', 'Culture'],
+            description: [
+              'Coffee at Pellegrini\'s Espresso Bar (iconic old-school cafe)',
+              'Try the famous jam doughnuts',
+              'Shop for fresh produce in the Deli Hall',
+              'Pick up unique souvenirs in the General Merchandise section'
+            ]
+          },
+          { 
+            time: '2:00 pm', 
+            activity: 'Royal Botanic Gardens', 
+            location: 'Royal Botanic Gardens Victoria',
+            address: 'Birdwood Avenue, South Yarra VIC 3141',
+            image: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=800&h=600&fit=crop',
+            categories: ['Nature', 'Culture'],
+            description: [
+              'Stroll through stunning landscaped gardens',
+              'Visit the Australian Forest Walk',
+              'Relax by the Ornamental Lake',
+              'Join a free guided walking tour'
+            ]
+          },
+          { 
+            time: '4:00 pm', 
+            activity: 'National Gallery of Victoria', 
+            location: 'NGV International',
+            address: '180 St Kilda Road, Melbourne VIC 3006',
+            image: 'https://images.unsplash.com/photo-1564399577149-749794d74eee?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Art'],
+            description: [
+              'Explore Australia\'s oldest art museum',
+              'View international and Australian art collections',
+              'Visit the stunning water wall entrance',
+              'Browse the NGV design store'
+            ]
+          },
+          { 
+            time: '7:00 pm', 
+            activity: 'Dinner at Chin Chin', 
+            location: 'Chin Chin Restaurant',
+            address: '125 Flinders Lane, Melbourne VIC 3000',
+            image: 'https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop',
+            categories: ['Food', 'Drinks'],
+            description: [
+              'Experience modern Thai cuisine',
+              'Try signature dishes like the Betel Leaf',
+              'Enjoy the vibrant atmosphere',
+              'Book ahead or walk-in for bar seating'
+            ]
+          }
+        ]
+      },
+      {
+        day: 2,
+        title: "Markets & Neighborhoods",
+        activities: [
+          { 
+            time: '8:00 am', 
+            activity: 'Queen Victoria Market', 
+            location: 'Queen Victoria Market',
+            address: 'Queen Street, Melbourne VIC 3000',
+            image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800&h=600&fit=crop',
+            categories: ['Food', 'Shopping', 'Culture'],
+            description: [
+              'Explore Melbourne\'s historic market (since 1878)',
+              'Sample fresh local produce',
+              'Shop for artisan goods and souvenirs',
+              'Grab breakfast at the Deli Hall'
+            ]
+          },
+          { 
+            time: '10:30 am', 
+            activity: 'Fitzroy Street Art Tour', 
+            location: 'Fitzroy Arts Precinct',
+            address: 'Gertrude Street, Fitzroy VIC 3065',
+            image: 'https://images.unsplash.com/photo-1499781350541-7783f6c6a0c8?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Art'],
+            description: [
+              'Walk through famous street art laneways',
+              'Discover works by renowned artists',
+              'Visit independent galleries',
+              'Explore vintage and record stores'
+            ]
+          },
+          { 
+            time: '12:30 pm', 
+            activity: 'Brunswick Street Lunch', 
+            location: 'Brunswick Street Precinct',
+            address: 'Brunswick Street, Fitzroy VIC 3065',
+            image: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&h=600&fit=crop',
+            categories: ['Food', 'Drinks'],
+            description: [
+              'Choose from diverse dining options',
+              'Try local cafes and restaurants',
+              'Explore bookshops and boutiques',
+              'Enjoy the vibrant neighborhood atmosphere'
+            ]
+          },
+          { 
+            time: '2:30 pm', 
+            activity: 'Carlton Gardens', 
+            location: 'Carlton Gardens',
+            address: 'Carlton Gardens, Carlton VIC 3053',
+            image: 'https://images.unsplash.com/photo-1519331379826-f10be5486c6f?w=800&h=600&fit=crop',
+            categories: ['Nature', 'Culture', 'Landmark'],
+            description: [
+              'Visit the UNESCO World Heritage site',
+              'See the Royal Exhibition Building',
+              'Stroll through Victorian-era gardens',
+              'Relax by the ornamental fountains'
+            ]
+          },
+          { 
+            time: '4:00 pm', 
+            activity: 'Melbourne Museum', 
+            location: 'Melbourne Museum',
+            address: '11 Nicholson Street, Carlton VIC 3053',
+            image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Museum'],
+            description: [
+              'Explore natural and cultural history',
+              'Visit the Bunjilaka Aboriginal Centre',
+              'See the Forest Gallery living ecosystem',
+              'Discover Melbourne\'s story exhibition'
+            ]
+          },
+          { 
+            time: '7:00 pm', 
+            activity: 'Rooftop Bar Experience', 
+            location: 'Naked for Satan',
+            address: '285 Brunswick Street, Fitzroy VIC 3065',
+            image: 'https://images.unsplash.com/photo-1514933651103-005eec06c04b?w=800&h=600&fit=crop',
+            categories: ['Drinks', 'Food'],
+            description: [
+              'Enjoy sunset views from the rooftop',
+              'Try Spanish-style pintxos',
+              'Sample craft cocktails and local beers',
+              'Experience Melbourne\'s bar culture'
+            ]
+          }
+        ]
+      },
+      {
+        day: 3,
+        title: "Coastal Adventure",
+        activities: [
+          { 
+            time: '8:00 am', 
+            activity: 'St. Kilda Beach', 
+            location: 'St. Kilda Beach',
+            address: 'Jacka Boulevard, St Kilda VIC 3182',
+            image: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=600&fit=crop',
+            categories: ['Nature', 'Beach'],
+            description: [
+              'Morning walk along the iconic beach',
+              'Visit the historic St Kilda Pier',
+              'See the little penguins at sunset',
+              'Explore the Sunday Esplanade Market (weekends)'
+            ]
+          },
+          { 
+            time: '10:00 am', 
+            activity: 'Acland Street Cafes', 
+            location: 'Acland Street',
+            address: 'Acland Street, St Kilda VIC 3182',
+            image: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=800&h=600&fit=crop',
+            categories: ['Food', 'Drinks'],
+            description: [
+              'Brunch at famous cake shops',
+              'Try traditional European pastries',
+              'Visit Lentil as Anything (pay-as-you-feel)',
+              'Browse vintage shops and bookstores'
+            ]
+          },
+          { 
+            time: '12:00 pm', 
+            activity: 'Luna Park Melbourne', 
+            location: 'Luna Park Melbourne',
+            address: '18 Lower Esplanade, St Kilda VIC 3182',
+            image: 'https://images.unsplash.com/photo-1513026705753-bc3fffca8bf4?w=800&h=600&fit=crop',
+            categories: ['Entertainment', 'Landmark'],
+            description: [
+              'Visit Melbourne\'s iconic amusement park',
+              'Ride the historic Scenic Railway (1912)',
+              'Take photos at Mr Moon entrance',
+              'Enjoy carnival games and rides'
+            ]
+          },
+          { 
+            time: '2:00 pm', 
+            activity: 'Brighton Beach Boxes', 
+            location: 'Brighton Beach',
+            address: 'Esplanade, Brighton VIC 3186',
+            image: 'https://images.unsplash.com/photo-1520208422220-d12a3c588e6c?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Landmark'],
+            description: [
+              'Photograph the famous colorful bathing boxes',
+              'Walk along the pristine beach',
+              'Learn about the heritage structures',
+              'Relax in the beachside atmosphere'
+            ]
+          },
+          { 
+            time: '4:00 pm', 
+            activity: 'Southbank Promenade', 
+            location: 'Southbank',
+            address: 'Southbank Promenade, Southbank VIC 3006',
+            image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=800&h=600&fit=crop',
+            categories: ['Culture', 'Shopping'],
+            description: [
+              'Stroll along the Yarra River',
+              'Visit arts and craft markets',
+              'Explore restaurants and cafes',
+              'Enjoy river views and street performers'
+            ]
+          },
+          { 
+            time: '7:00 pm', 
+            activity: 'Farewell Dinner at Vue de Monde', 
+            location: 'Vue de Monde',
+            address: 'Level 55, Rialto, 525 Collins Street, Melbourne VIC 3000',
+            image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&h=600&fit=crop',
+            categories: ['Food', 'Drinks', 'Luxury'],
+            description: [
+              'Experience fine dining at 55th floor',
+              'Enjoy panoramic Melbourne views',
+              'Taste modern Australian cuisine',
+              'Celebrate the end of your journey'
+            ]
+          }
+        ]
+      }
+    ]
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage="itinerary-view"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Header Section */}
+      <section className="pt-32 pb-8 bg-gradient-to-br from-primary/5 to-secondary/5">
+        <div className="container mx-auto px-4 pt-32">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center"
+          >
+            <Button
+              variant="ghost"
+              onClick={onBackClick}
+              className="mb-6 hover:bg-primary/5 font-poppins font-medium"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to Magic Itinerary
+            </Button>
+
+            <div className="flex items-center justify-center gap-2 text-primary mb-4">
+              <Star className="w-6 h-6 fill-current" />
+              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight">
+                <span className="font-light">Your</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Magic Itinerary</span>
+              </h1>
+              <Star className="w-6 h-6 fill-current" />
+            </div>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+              Here's your personalized {generatedItinerary.totalDays}-day adventure in {generatedItinerary.destination.name}!
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="py-8">
+        <div className="container mx-auto px-4">
+          <div className="max-w-6xl mx-auto space-y-8">
+            {/* View Toggle */}
+            <div className="flex justify-center">
+              <div className="bg-muted p-1 rounded-lg">
+                <Button
+                  variant={viewMode === 'daily' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('daily')}
+                  className="rounded-md font-poppins font-medium"
+                >
+                  Daily View
+                </Button>
+                <Button
+                  variant={viewMode === 'summary' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('summary')}
+                  className="rounded-md font-poppins font-medium"
+                >
+                  Summary
+                </Button>
+              </div>
+            </div>
+
+            {/* Itinerary Overview */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <Card className="p-6">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div className="text-center">
+                    <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary.totalDays}</div>
+                    <div className="font-poppins text-sm text-muted-foreground font-normal">Days</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary.includedActivities}</div>
+                    <div className="font-poppins text-sm text-muted-foreground font-normal">Activities</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary.estimatedCost}</div>
+                    <div className="font-poppins text-sm text-muted-foreground font-normal">Estimated Cost</div>
+                  </div>
+                </div>
+              </Card>
+            </motion.div>
+
+            {/* Daily Plans - Enhanced View */}
+            {viewMode === 'daily' && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="space-y-12"
+              >
+                {generatedItinerary.dailyPlans.map((day, dayIndex) => (
+                  <div key={dayIndex} className="space-y-6">
+                    {/* Location Header with Weather - Only show for first day or when location changes */}
+                    {(dayIndex === 0 || 
+                      (dayIndex > 0 && 
+                       generatedItinerary.dailyPlans[dayIndex - 1] && 
+                       (generatedItinerary.dailyPlans[dayIndex - 1] as any).destination?.name !== generatedItinerary.destination.name)) && (
+                      <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.6, delay: 0.4 + dayIndex * 0.1 }}
+                        className="bg-gray-50 rounded-2xl p-6 shadow-sm border border-gray-200"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h2 className="font-merchant text-3xl md:text-4xl leading-tight mb-2">
+                              {generatedItinerary.destination.name}, {generatedItinerary.destination.country}
+                            </h2>
+                            <p className="font-poppins text-base text-primary font-medium">{generatedItinerary.destination.weather}</p>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Sun className="w-10 h-10 text-amber-500" />
+                          </div>
+                        </div>
+                      </motion.div>
+                    )}
+
+                    {/* Day Header */}
+                    <motion.div
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.6, delay: 0.5 + dayIndex * 0.1 }}
+                      className="flex items-center gap-4 pl-2"
+                    >
+                      <div className="bg-gradient-to-br from-primary to-secondary text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg">
+                        <span className="font-merchant text-2xl font-semibold">{day.day}</span>
+                      </div>
+                      <div>
+                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">Day {day.day}</h3>
+                        <p className="font-poppins text-base text-muted-foreground font-normal">{day.title}</p>
+                      </div>
+                    </motion.div>
+
+                    {/* GMT Label */}
+                    <div className="pl-2">
+                      <p className="font-poppins text-sm text-gray-500 font-normal">GMT</p>
+                    </div>
+
+                    {/* Activity Cards - Desktop Grid Layout */}
+                    <div className="space-y-8">
+                      {day.activities.map((activity, actIndex) => {
+                        const activityKey = `day${day.day}-act${actIndex}`;
+                        const isFavorite = favorites.has(activityKey);
+
+                        return (
+                          <motion.div
+                            key={actIndex}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5, delay: 0.6 + dayIndex * 0.1 + actIndex * 0.05 }}
+                            className="flex gap-6"
+                          >
+                            {/* Time Column */}
+                            <div className="flex-shrink-0 w-24 pt-2">
+                              <div className="font-poppins text-base font-medium text-gray-700">{activity.time}</div>
+                            </div>
+
+                            {/* Activity Card */}
+                            <div className="flex-1">
+                              <Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 border-2 border-gray-100">
+                                <CardContent className="p-0">
+                                  {/* Hero Image with Overlay Buttons */}
+                                  <div className="relative h-64 md:h-72 bg-gray-200">
+                                    <ImageWithFallback
+                                      src={activity.image}
+                                      alt={activity.activity}
+                                      className="w-full h-full object-cover"
+                                    />
+                                    
+                                    {/* Favorite Heart Button - Top Right */}
+                                    <div className="absolute top-4 right-4">
+                                      <Button
+                                        size="icon"
+                                        variant="secondary"
+                                        className="bg-white/95 hover:bg-white shadow-lg backdrop-blur-sm rounded-full w-12 h-12"
+                                        onClick={() => toggleFavorite(activityKey)}
+                                      >
+                                        <Heart className={`w-5 h-5 ${isFavorite ? 'fill-primary text-primary' : 'text-gray-700'}`} />
+                                      </Button>
+                                    </div>
+
+                                    {/* Get Directions Button - Bottom Left */}
+                                    <div className="absolute bottom-4 left-4">
+                                      <Button 
+                                        className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold shadow-lg px-6 py-3 rounded-xl"
+                                      >
+                                        <Navigation className="w-4 h-4 mr-2" />
+                                        Get Directions
+                                      </Button>
+                                    </div>
+                                  </div>
+
+                                  {/* Content Section */}
+                                  <div className="p-6 space-y-4">
+                                    {/* Location Name & Address */}
+                                    <div className="space-y-2">
+                                      <h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
+                                        {activity.activity}
+                                      </h4>
+                                      <div className="flex items-start gap-2 text-gray-600">
+                                        <MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-primary" />
+                                        <span className="font-poppins text-sm font-normal leading-relaxed">{activity.address}</span>
+                                      </div>
+                                    </div>
+
+                                    {/* Category Badges */}
+                                    <div className="flex flex-wrap gap-2">
+                                      {activity.categories.map((category, catIndex) => (
+                                        <Badge 
+                                          key={catIndex} 
+                                          variant="secondary"
+                                          className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
+                                        >
+                                          {category}
+                                        </Badge>
+                                      ))}
+                                    </div>
+
+                                    {/* Activity Details - Bullet Points */}
+                                    <div className="space-y-2 pt-2">
+                                      {activity.description.map((detail, detailIndex) => (
+                                        <div key={detailIndex} className="flex items-start gap-3">
+                                          <span className="text-primary font-semibold mt-1.5 flex-shrink-0">•</span>
+                                          <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">{detail}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </CardContent>
+                              </Card>
+                            </div>
+                          </motion.div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </motion.div>
+            )}
+
+            {/* Summary View */}
+            {viewMode === 'summary' && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="space-y-4"
+              >
+                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">Trip Summary</h3>
+                <Card className="p-6">
+                  <div className="space-y-6">
+                    {generatedItinerary.dailyPlans.map((day, index) => (
+                      <div key={index} className="border-l-4 border-primary pl-6">
+                        <div className="flex items-center gap-2 mb-3">
+                          <Calendar className="w-5 h-5 text-primary" />
+                          <h4 className="font-merchant text-lg md:text-xl leading-snug font-semibold">Day {day.day}: {day.title}</h4>
+                        </div>
+                        <div className="space-y-2">
+                          {day.activities.map((activity, actIndex) => (
+                            <div key={actIndex} className="flex items-start gap-3 text-sm">
+                              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+                              <div className="flex-1">
+                                <span className="font-poppins text-gray-700 font-medium">{activity.activity}</span>
+                                <div className="flex items-center gap-2 mt-1">
+                                  <span className="font-poppins text-gray-500 text-xs font-normal">{activity.time}</span>
+                                  <span className="text-gray-400">•</span>
+                                  <span className="font-poppins text-gray-500 text-xs font-normal">{activity.location}</span>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Card>
+              </motion.div>
+            )}
+
+            {/* Action Buttons */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+              className="flex flex-col sm:flex-row gap-4 justify-center pt-8"
+            >
+              <Button
+                variant="outline"
+                onClick={onCreateItineraryClick}
+                className="font-poppins font-medium px-8 py-3 text-lg"
+              >
+                <Heart className="w-5 h-5 mr-2" />
+                Create Another
+              </Button>
+              <Button
+                className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg"
+              >
+                <Download className="w-5 h-5 mr-2" />
+                Save Itinerary
+              </Button>
+              <Button
+                variant="outline"
+                className="font-poppins font-medium px-8 py-3 text-lg"
+              >
+                <Share2 className="w-5 h-5 mr-2" />
+                Share Trip
+              </Button>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
new file mode 100644
index 0000000..3d94411
--- /dev/null
+++ b/src/components/LoginModal.tsx
@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+interface LoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoginSuccess: (userData: { email: string; name: string }) => void;
+}
+
+export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps) {
+  const [step, setStep] = useState<'email' | 'otp'>('email');
+  const [email, setEmail] = useState('');
+  const [otp, setOtp] = useState(['', '', '', '', '', '']);
+  const [countdown, setCountdown] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [helperText, setHelperText] = useState('');
+
+  // Reset modal state when closed
+  useEffect(() => {
+    if (!isOpen) {
+      setStep('email');
+      setEmail('');
+      setOtp(['', '', '', '', '', '']);
+      setCountdown(0);
+      setHelperText('');
+    }
+  }, [isOpen]);
+
+  // Countdown timer for OTP resend
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  const handleSendOTP = async () => {
+    if (!email || !email.includes('@')) {
+      setHelperText('Please enter a valid email address');
+      return;
+    }
+
+    setIsLoading(true);
+    setHelperText('');
+    
+    // Simulate API call
+    setTimeout(() => {
+      setStep('otp');
+      setCountdown(120); // 2 minutes countdown
+      setIsLoading(false);
+      setHelperText('OTP sent successfully');
+    }, 1500);
+  };
+
+  const handleOTPChange = (index: number, value: string) => {
+    if (value.length > 1) return; // Only allow single digit
+    
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+
+    // Auto-focus next input
+    if (value && index < 5) {
+      const nextInput = document.querySelector(`input[data-otp-index="${index + 1}"]`) as HTMLInputElement;
+      nextInput?.focus();
+    }
+  };
+
+  const handleOTPKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      const prevInput = document.querySelector(`input[data-otp-index="${index - 1}"]`) as HTMLInputElement;
+      prevInput?.focus();
+    }
+  };
+
+  const handleVerifyLogin = async () => {
+    const otpString = otp.join('');
+    if (otpString.length !== 6) {
+      setHelperText('Please enter complete OTP');
+      return;
+    }
+
+    setIsLoading(true);
+    setHelperText('');
+
+    // Simulate API call
+    setTimeout(() => {
+      // Generate name from email for demo
+      const emailParts = email.split('@')[0];
+      const name = emailParts.charAt(0).toUpperCase() + emailParts.slice(1);
+      
+      onLoginSuccess({
+        email,
+        name: name.length > 8 ? name.substring(0, 8) : name
+      });
+      setIsLoading(false);
+      onClose();
+    }, 1500);
+  };
+
+  const formatCountdown = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            onClick={onClose}
+          />
+
+          {/* Modal */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className="fixed inset-0 flex items-center justify-center z-50 p-4"
+          >
+            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md mx-auto overflow-hidden">
+              {/* Header */}
+              <div className="relative px-8 pt-8 pb-4">
+                <button
+                  onClick={onClose}
+                  className="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
+                >
+                  <X className="w-4 h-4 text-gray-600" />
+                </button>
+                
+                <h2 className="font-merchant text-2xl font-semibold text-gray-900 mb-2">
+                  Login
+                </h2>
+                <p className="font-poppins text-sm text-gray-600">
+                  Enter your email Id and verify with OTP sent on it.
+                </p>
+              </div>
+
+              {/* Content */}
+              <div className="px-8 pb-8">
+                {step === 'email' ? (
+                  <div className="space-y-6">
+                    {/* Email Input */}
+                    <div className="space-y-2">
+                      <Label className="font-poppins text-sm font-medium text-gray-700">
+                        Email
+                      </Label>
+                      <Input
+                        type="email"
+                        placeholder="Name@example.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
+                        onKeyDown={(e) => e.key === 'Enter' && handleSendOTP()}
+                      />
+                      {helperText && (
+                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
+                          {helperText}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Send OTP Button */}
+                    <Button
+                      onClick={handleSendOTP}
+                      disabled={isLoading}
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors"
+                    >
+                      {isLoading ? (
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                          Sending OTP...
+                        </div>
+                      ) : (
+                        <>
+                          Send OTP
+                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-6">
+                    {/* Email Display */}
+                    <div className="space-y-2">
+                      <Label className="font-poppins text-sm font-medium text-gray-700">
+                        Email
+                      </Label>
+                      <div className="h-12 bg-gray-50 rounded-xl flex items-center px-4">
+                        <span className="font-poppins text-base text-gray-600">{email}</span>
+                      </div>
+                      {helperText && (
+                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
+                          {helperText}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* OTP Input */}
+                    <div className="space-y-3">
+                      <Label className="font-poppins text-sm font-medium text-gray-700">
+                        Enter OTP
+                      </Label>
+                      <div className="flex gap-3 justify-between">
+                        {otp.map((digit, index) => (
+                          <input
+                            key={index}
+                            type="text"
+                            inputMode="numeric"
+                            pattern="[0-9]*"
+                            maxLength={1}
+                            value={digit}
+                            onChange={(e) => handleOTPChange(index, e.target.value.replace(/\D/g, ''))}
+                            onKeyDown={(e) => handleOTPKeyDown(index, e)}
+                            data-otp-index={index}
+                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-50 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors"
+                          />
+                        ))}
+                      </div>
+                      
+                      {/* Countdown */}
+                      {countdown > 0 && (
+                        <p className="font-poppins text-xs text-gray-500 text-center">
+                          {formatCountdown(countdown)}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Verify Button */}
+                    <Button
+                      onClick={handleVerifyLogin}
+                      disabled={isLoading || otp.join('').length !== 6}
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors disabled:opacity-50"
+                    >
+                      {isLoading ? (
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                          Verifying...
+                        </div>
+                      ) : (
+                        <>
+                          Verify and Login
+                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </>
+                      )}
+                    </Button>
+
+                    {/* Resend OTP */}
+                    {countdown === 0 && (
+                      <button
+                        onClick={() => {
+                          setStep('email');
+                          setOtp(['', '', '', '', '', '']);
+                        }}
+                        className="w-full font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                      >
+                        Didn't receive OTP? Send again
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MagicItinerary.tsx b/src/components/MagicItinerary.tsx
new file mode 100644
index 0000000..06c9cad
--- /dev/null
+++ b/src/components/MagicItinerary.tsx
@@ -0,0 +1,565 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Sparkles, Clock, MapPin, Coffee, Camera, UtensilsCrossed, TreePine, Building2, Star, Navigation, ChevronRight, Heart, Users } from 'lucide-react';
+import { Button } from './ui/button';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface MagicItineraryProps {
+  onCreateItineraryClick?: () => void;
+}
+
+export function MagicItinerary({ onCreateItineraryClick }: MagicItineraryProps) {
+  const [currentTime, setCurrentTime] = useState('9:41');
+  const [activeItineraryStep, setActiveItineraryStep] = useState(0);
+
+  // Animate through itinerary steps
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveItineraryStep(prev => (prev + 1) % 6);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const itinerarySteps = [
+    {
+      time: '9:00 AM',
+      duration: '2 hours',
+      title: 'Royal Botanic Gardens',
+      category: 'Nature & Parks',
+      description: 'Start your day with a peaceful walk through stunning gardens',
+      image: 'https://images.unsplash.com/photo-1670027537688-77def132d556?w=300&h=200&fit=crop',
+      icon: TreePine,
+      color: 'from-green-500 to-emerald-600',
+      bgColor: 'bg-green-100',
+      textColor: 'text-green-700',
+      status: 'upcoming'
+    },
+    {
+      time: '11:30 AM',
+      duration: '1.5 hours',
+      title: 'Coffee at Centre Place',
+      category: 'Coffee Culture',
+      description: 'Experience Melbourne\'s famous coffee culture',
+      image: 'https://images.unsplash.com/photo-1583569695977-1e5758f793d1?w=300&h=200&fit=crop',
+      icon: Coffee,
+      color: 'from-amber-500 to-orange-600',
+      bgColor: 'bg-amber-100',
+      textColor: 'text-amber-700',
+      status: 'current'
+    },
+    {
+      time: '1:00 PM',
+      duration: '2 hours',
+      title: 'Queen Victoria Market',
+      category: 'Food & Markets',
+      description: 'Lunch and shopping at Melbourne\'s iconic market',
+      image: 'https://images.unsplash.com/photo-1708903965305-f8439248cebd?w=300&h=200&fit=crop',
+      icon: UtensilsCrossed,
+      color: 'from-red-500 to-pink-600',
+      bgColor: 'bg-red-100',
+      textColor: 'text-red-700',
+      status: 'upcoming'
+    },
+    {
+      time: '3:30 PM',
+      duration: '1.5 hours',
+      title: 'Street Art Tour',
+      category: 'Art & Culture',
+      description: 'Explore famous laneways and street art',
+      image: 'https://images.unsplash.com/photo-1582076197789-5c2af0bb51fd?w=300&h=200&fit=crop',
+      icon: Camera,
+      color: 'from-purple-500 to-violet-600',
+      bgColor: 'bg-purple-100',
+      textColor: 'text-purple-700',
+      status: 'upcoming'
+    },
+    {
+      time: '5:00 PM',
+      duration: '2 hours',
+      title: 'Eureka Skydeck',
+      category: 'Views & Landmarks',
+      description: 'Sunset views from Melbourne\'s highest observation deck',
+      image: 'https://images.unsplash.com/photo-1664738512177-f682a194a91c?w=300&h=200&fit=crop',
+      icon: Building2,
+      color: 'from-blue-500 to-indigo-600',
+      bgColor: 'bg-blue-100',
+      textColor: 'text-blue-700',
+      status: 'upcoming'
+    },
+    {
+      time: '7:30 PM',
+      duration: '2 hours',
+      title: 'Dinner at Southbank',
+      category: 'Fine Dining',
+      description: 'End your day with dinner by the Yarra River',
+      image: 'https://images.unsplash.com/photo-1722943661451-1a439d092ff2?w=300&h=200&fit=crop',
+      icon: UtensilsCrossed,
+      color: 'from-orange-500 to-red-600',
+      bgColor: 'bg-orange-100',
+      textColor: 'text-orange-700',
+      status: 'upcoming'
+    }
+  ];
+
+  const features = [
+    {
+      icon: Sparkles,
+      title: 'AI-Powered Recommendations',
+      description: 'Our smart algorithm analyzes your preferences to create the perfect itinerary'
+    },
+    {
+      icon: Clock,
+      title: 'Optimized Timing',
+      description: 'Every minute planned to perfection with travel time and queue predictions'
+    },
+    {
+      icon: Navigation,
+      title: 'Real-Time Navigation',
+      description: 'Turn-by-turn directions and live updates keep you on track'
+    }
+  ];
+
+  return (
+    <section className="relative py-20 lg:py-32 overflow-hidden bg-gradient-to-br from-gray-50 via-white to-blue-50/30">
+      {/* Animated Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <motion.div
+          className="absolute top-20 -left-20 w-96 h-96 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-full blur-3xl"
+          animate={{
+            x: [0, 100, 0],
+            y: [0, -50, 0],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            ease: "linear"
+          }}
+        />
+        <motion.div
+          className="absolute bottom-20 -right-20 w-96 h-96 bg-gradient-to-r from-secondary/5 to-primary/5 rounded-full blur-3xl"
+          animate={{
+            x: [0, -100, 0],
+            y: [0, 50, 0],
+          }}
+          transition={{
+            duration: 25,
+            repeat: Infinity,
+            ease: "linear"
+          }}
+        />
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header Section */}
+        <div className="text-center mb-16 max-w-5xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, ease: "easeOutBack" }}
+            viewport={{ once: true }}
+            className="inline-flex items-center gap-3 bg-gradient-to-r from-primary/10 to-secondary/10 px-6 py-3 rounded-full border border-primary/20 mb-8"
+          >
+            <motion.div
+              animate={{ rotate: [0, 360] }}
+              transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+            >
+              <Sparkles className="w-6 h-6 text-primary" />
+            </motion.div>
+            <span className="font-poppins font-medium text-base text-primary">Magic Itinerary</span>
+            <motion.div
+              className="px-3 py-1 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-full"
+              animate={{
+                boxShadow: [
+                  '0 0 0 rgba(99,102,241,0)',
+                  '0 0 20px rgba(99,102,241,0.4)',
+                  '0 0 0 rgba(99,102,241,0)'
+                ]
+              }}
+              transition={{ duration: 2, repeat: Infinity }}
+            >
+              Core Feature
+            </motion.div>
+          </motion.div>
+
+          <motion.h2
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-6"
+          >
+            <span className="font-light">A Perfect</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">Melbourne</span>{' '}
+            <span className="font-normal">Plan,</span>{' '}
+            <span className="font-bold">Instantly.</span>
+          </motion.h2>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            viewport={{ once: true }}
+            className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-4xl mx-auto"
+          >
+            Our AI creates personalized Melbourne itineraries in seconds. Just tell us your interests, 
+            and watch as we craft the perfect day filled with attractions, dining, and experiences 
+            tailored specifically for you.
+          </motion.p>
+        </div>
+
+        {/* Main Content Grid */}
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center max-w-7xl mx-auto">
+          
+          {/* Left: Phone Mockup with Sample Itinerary */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="relative"
+          >
+            {/* Phone Frame */}
+            <div className="relative mx-auto w-80 h-[640px]">
+              {/* Phone Shadow */}
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-br from-gray-900/20 to-gray-600/20 rounded-[3rem] blur-2xl"
+                animate={{
+                  scale: [1, 1.02, 1],
+                }}
+                transition={{
+                  duration: 4,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }}
+                style={{ transform: 'translateY(20px) translateX(10px)' }}
+              />
+              
+              {/* Phone Body */}
+              <motion.div
+                className="relative w-full h-full bg-gray-900 rounded-[3rem] p-2"
+                animate={{
+                  boxShadow: [
+                    '0 25px 50px rgba(0,0,0,0.3)',
+                    '0 35px 70px rgba(99,102,241,0.2)',
+                    '0 25px 50px rgba(0,0,0,0.3)'
+                  ]
+                }}
+                transition={{
+                  duration: 4,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }}
+              >
+                {/* Screen */}
+                <div className="w-full h-full bg-white rounded-[2.5rem] overflow-hidden relative">
+                  
+                  {/* Status Bar */}
+                  <div className="flex items-center justify-between px-6 pt-4 pb-2 bg-white">
+                    <span className="text-sm font-semibold text-gray-900">{currentTime}</span>
+                    <div className="flex items-center gap-1">
+                      <div className="flex gap-1">
+                        <div className="w-1 h-1 bg-gray-900 rounded-full"></div>
+                        <div className="w-1 h-1 bg-gray-900 rounded-full"></div>
+                        <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                        <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                      </div>
+                      <div className="w-6 h-3 border border-gray-900 rounded-sm ml-2">
+                        <div className="w-4 h-full bg-green-500 rounded-sm"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* App Header */}
+                  <div className="px-6 py-4 bg-gradient-to-r from-primary to-secondary">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h3 className="text-white font-bold text-lg">Your Melbourne Day</h3>
+                        <p className="text-white/90 text-sm">6 stops • 10 hours</p>
+                      </div>
+                      <motion.div
+                        className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center"
+                        animate={{ rotate: [0, 360] }}
+                        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+                      >
+                        <Sparkles className="w-5 h-5 text-white" />
+                      </motion.div>
+                    </div>
+                  </div>
+
+                  {/* Itinerary List */}
+                  <div className="flex-1 overflow-hidden">
+                    <div className="p-4 space-y-3 h-full overflow-y-auto">
+                      {itinerarySteps.map((step, index) => (
+                        <motion.div
+                          key={index}
+                          className={`relative rounded-2xl border-2 overflow-hidden transition-all duration-500 ${
+                            index === activeItineraryStep
+                              ? 'border-primary/30 bg-gradient-to-r from-primary/5 to-secondary/5 scale-[1.02] shadow-lg'
+                              : 'border-gray-200 bg-white hover:border-gray-300'
+                          }`}
+                          animate={{
+                            y: index === activeItineraryStep ? -2 : 0,
+                          }}
+                          transition={{ duration: 0.3 }}
+                        >
+                          {/* Current Activity Indicator */}
+                          {index === activeItineraryStep && (
+                            <motion.div
+                              className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-primary to-secondary"
+                              initial={{ height: 0 }}
+                              animate={{ height: '100%' }}
+                              transition={{ duration: 0.5 }}
+                            />
+                          )}
+
+                          <div className="flex items-center gap-3 p-3">
+                            {/* Time and Icon */}
+                            <div className="flex-shrink-0">
+                              <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                                index === activeItineraryStep ? step.bgColor : 'bg-gray-100'
+                              }`}>
+                                <step.icon className={`w-6 h-6 ${
+                                  index === activeItineraryStep ? step.textColor : 'text-gray-600'
+                                }`} />
+                              </div>
+                            </div>
+
+                            {/* Content */}
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center justify-between mb-1">
+                                <span className={`text-xs font-medium ${
+                                  index === activeItineraryStep ? 'text-primary' : 'text-gray-500'
+                                }`}>
+                                  {step.time} • {step.duration}
+                                </span>
+                                {index === activeItineraryStep && (
+                                  <motion.div
+                                    className="flex items-center gap-1 text-green-600"
+                                    initial={{ scale: 0 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ delay: 0.2 }}
+                                  >
+                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <span className="text-xs font-medium">Now</span>
+                                  </motion.div>
+                                )}
+                              </div>
+                              
+                              <h4 className={`font-semibold mb-1 ${
+                                index === activeItineraryStep ? 'text-gray-900' : 'text-gray-800'
+                              }`}>
+                                {step.title}
+                              </h4>
+                              
+                              <p className="text-xs text-gray-600 mb-2 line-clamp-2">
+                                {step.description}
+                              </p>
+
+                              <div className="flex items-center justify-between">
+                                <span className={`text-xs px-2 py-1 rounded-full ${
+                                  index === activeItineraryStep 
+                                    ? 'bg-primary/10 text-primary' 
+                                    : 'bg-gray-100 text-gray-600'
+                                }`}>
+                                  {step.category}
+                                </span>
+                                
+                                <div className="flex items-center gap-1">
+                                  <Star className="w-3 h-3 text-yellow-500 fill-current" />
+                                  <span className="text-xs text-gray-600">4.8</span>
+                                </div>
+                              </div>
+                            </div>
+
+                            {/* Thumbnail */}
+                            <div className="flex-shrink-0 w-16 h-16 rounded-xl overflow-hidden">
+                              <ImageWithFallback
+                                src={step.image}
+                                alt={step.title}
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                          </div>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Bottom Navigation */}
+                  <div className="flex items-center justify-around py-4 bg-white border-t border-gray-100">
+                    {[
+                      { icon: MapPin, label: 'Map', active: true },
+                      { icon: Clock, label: 'Schedule', active: false },
+                      { icon: Heart, label: 'Saved', active: false },
+                      { icon: Users, label: 'Share', active: false }
+                    ].map((nav, idx) => (
+                      <div key={idx} className={`flex flex-col items-center gap-1 ${
+                        nav.active ? 'text-primary' : 'text-gray-400'
+                      }`}>
+                        <nav.icon className="w-5 h-5" />
+                        <span className="text-xs">{nav.label}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+
+              {/* Floating Action Buttons */}
+              <motion.div
+                className="absolute -right-4 top-32 bg-gradient-to-r from-primary to-secondary text-white p-3 rounded-full shadow-lg"
+                animate={{
+                  y: [0, -10, 0],
+                  boxShadow: [
+                    '0 10px 25px rgba(99,102,241,0.3)',
+                    '0 20px 40px rgba(99,102,241,0.5)',
+                    '0 10px 25px rgba(99,102,241,0.3)'
+                  ]
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }}
+              >
+                <Navigation className="w-5 h-5" />
+              </motion.div>
+
+              <motion.div
+                className="absolute -left-4 bottom-32 bg-green-500 text-white p-3 rounded-full shadow-lg"
+                animate={{
+                  y: [0, 10, 0],
+                  boxShadow: [
+                    '0 10px 25px rgba(34,197,94,0.3)',
+                    '0 20px 40px rgba(34,197,94,0.5)',
+                    '0 10px 25px rgba(34,197,94,0.3)'
+                  ]
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  delay: 1.5,
+                  ease: "easeInOut"
+                }}
+              >
+                <Heart className="w-5 h-5" />
+              </motion.div>
+            </div>
+          </motion.div>
+
+          {/* Right: Features and CTA */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            
+            {/* Features List */}
+            <div className="space-y-6">
+              {features.map((feature, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
+                  viewport={{ once: true }}
+                  className="flex items-start gap-4 p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-white/40 hover:border-primary/20 hover:bg-white/90 transition-all duration-300"
+                >
+                  <motion.div
+                    className="w-12 h-12 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center flex-shrink-0"
+                    whileHover={{ 
+                      scale: 1.1,
+                      background: 'linear-gradient(135deg, rgb(99 102 241 / 0.2), rgb(168 85 247 / 0.2))'
+                    }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <feature.icon className="w-6 h-6 text-primary" />
+                  </motion.div>
+                  
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-gray-900 mb-2">{feature.title}</h4>
+                    <p className="text-gray-600 leading-relaxed">{feature.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Stats */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.9 }}
+              viewport={{ once: true }}
+              className="grid grid-cols-3 gap-4 p-6 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl border border-primary/10"
+            >
+              {[
+                { number: '15K+', label: 'Itineraries Created' },
+                { number: '4.9★', label: 'User Rating' },
+                { number: '30s', label: 'Average Plan Time' }
+              ].map((stat, index) => (
+                <div key={index} className="text-center">
+                  <motion.div
+                    className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
+                    initial={{ scale: 0 }}
+                    whileInView={{ scale: 1 }}
+                    transition={{ duration: 0.5, delay: 1 + index * 0.1 }}
+                    viewport={{ once: true }}
+                  >
+                    {stat.number}
+                  </motion.div>
+                  <div className="text-sm text-gray-600">{stat.label}</div>
+                </div>
+              ))}
+            </motion.div>
+
+            {/* CTA Buttons */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 1.2 }}
+              viewport={{ once: true }}
+              className="flex flex-col sm:flex-row gap-4"
+            >
+              <Button 
+                withShine={true}
+                size="xl"
+                className="flex-1 h-14 rounded-2xl text-lg group"
+                onClick={onCreateItineraryClick}
+              >
+                <Sparkles className="w-5 h-5 mr-2 group-hover:animate-spin" />
+                Create My Itinerary
+              </Button>
+              
+              <Button 
+                variant="outline"
+                size="xl"
+                className="flex-1 h-14 rounded-2xl text-lg border-2 hover:border-primary/50"
+              >
+                See Sample Plans
+                <ChevronRight className="w-5 h-5 ml-2" />
+              </Button>
+            </motion.div>
+
+            {/* Trust Indicator */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              transition={{ duration: 0.6, delay: 1.4 }}
+              viewport={{ once: true }}
+              className="flex items-center gap-3 text-sm text-gray-600"
+            >
+              <div className="flex items-center gap-1">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} className="w-4 h-4 text-yellow-500 fill-current" />
+                ))}
+              </div>
+              <span>Trusted by 50,000+ travelers worldwide</span>
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MagicItineraryPage.tsx b/src/components/MagicItineraryPage.tsx
new file mode 100644
index 0000000..a60a42b
--- /dev/null
+++ b/src/components/MagicItineraryPage.tsx
@@ -0,0 +1,398 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Sparkles, MapPin, Clock, Users, Calendar, Star, Zap, Heart, Camera } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import SubNavbar from './SubNavbar';
+import { Footer } from './Footer';
+import { MobileAppSection } from './MobileAppSection';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { HowItWorks } from './HowItWorks';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface MagicItineraryPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  onCreateItineraryClick: () => void;
+  onViewItineraryClick: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+export function MagicItineraryPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  onCreateItineraryClick,
+  onViewItineraryClick,
+  currentPage,
+  user
+}: MagicItineraryPageProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage="magic-itinerary"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Sub Navbar */}
+      <SubNavbar
+        activeTab="magic-itinerary"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      {/* Hero Section */}
+      <section className="relative pt-52 pb-20 overflow-hidden">
+        {/* Background gradient */}
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
+        
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            className="max-w-4xl mx-auto text-center"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
+              <span className="font-light">Plan Your Perfect</span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Melbourne Adventure
+              </span>
+            </h1>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
+              Let our AI create a personalized itinerary just for you. Answer a few questions about your preferences, 
+              and we'll craft the perfect Melbourne experience tailored to your interests.
+            </p>
+            <Button 
+              onClick={onCreateItineraryClick}
+              className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
+            >
+              Create My Magic Itinerary
+            </Button>
+          </motion.div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
+        <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
+      </section>
+
+      {/* How It Works Section */}
+      <HowItWorks />
+
+      {/* Features Section */}
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            {/* Left side - Features */}
+            <motion.div
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <h2 className="font-merchant text-3xl mb-6">
+                <span className="text-gray-900">Smart Features for</span><br />
+                <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Smart Travelers</span>
+              </h2>
+              
+              <div className="space-y-6">
+                {[
+                  {
+                    icon: <Sparkles className="w-6 h-6 text-purple-600" />,
+                    title: 'AI-Powered Recommendations',
+                    description: 'Our advanced AI analyzes your preferences to suggest the perfect experiences'
+                  },
+                  {
+                    icon: <Clock className="w-6 h-6 text-pink-600" />,
+                    title: 'Optimized Scheduling',
+                    description: 'Smart timing that considers opening hours, travel time, and crowd patterns'
+                  },
+                  {
+                    icon: <MapPin className="w-6 h-6 text-purple-600" />,
+                    title: 'Location-Based Planning',
+                    description: 'Efficiently planned routes that minimize travel time and maximize experiences'
+                  },
+                  {
+                    icon: <Camera className="w-6 h-6 text-pink-600" />,
+                    title: 'Instagram-Worthy Spots',
+                    description: 'Discover hidden gems and perfect photo opportunities along your journey'
+                  }
+                ].map((feature, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
+                    className="flex items-start space-x-4"
+                  >
+                    <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-md">
+                      {feature.icon}
+                    </div>
+                    <div>
+                      <h3 className="font-merchant text-lg mb-2">{feature.title}</h3>
+                      <p className="text-gray-600 font-poppins">{feature.description}</p>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+
+            {/* Right side - Visual */}
+            <motion.div
+              initial={{ opacity: 0, x: 30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              className="relative"
+            >
+              <div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-8 text-white">
+                <h3 className="font-merchant text-2xl mb-6">Sample Itinerary</h3>
+                <div className="space-y-4">
+                  {[
+                    { time: '9:00 AM', activity: 'Coffee at Degraves Street', duration: '30 min' },
+                    { time: '10:00 AM', activity: 'Royal Botanic Gardens', duration: '2 hours' },
+                    { time: '1:00 PM', activity: 'Lunch at Queen Victoria Market', duration: '1 hour' },
+                    { time: '3:00 PM', activity: 'Street Art Tour in Hosier Lane', duration: '1.5 hours' },
+                    { time: '6:00 PM', activity: 'Sunset at Eureka Skydeck', duration: '1 hour' }
+                  ].map((item, index) => (
+                    <div key={index} className="flex items-center space-x-4 bg-white/10 rounded-lg p-3">
+                      <div className="text-sm font-bold bg-white/20 px-2 py-1 rounded">
+                        {item.time}
+                      </div>
+                      <div className="flex-1">
+                        <div className="font-medium">{item.activity}</div>
+                        <div className="text-xs text-white/80">{item.duration}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center mb-12"
+          >
+            <h2 className="font-merchant text-3xl mb-4">Why Use Magic Itinerary?</h2>
+            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
+              Save time, discover more, and create unforgettable memories with personalized planning
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                icon: <Clock className="w-12 h-12 text-purple-600" />,
+                title: 'Save Planning Time',
+                description: 'Skip hours of research. Get a complete itinerary in under 5 minutes.',
+                stat: '90% faster than manual planning'
+              },
+              {
+                icon: <Star className="w-12 h-12 text-pink-600" />,
+                title: 'Discover Hidden Gems',
+                description: 'Find unique experiences and local favorites you might have missed.',
+                stat: '50+ curated hidden spots'
+              },
+              {
+                icon: <Heart className="w-12 h-12 text-purple-600" />,
+                title: 'Personalized Experience',
+                description: 'Every itinerary is unique, tailored specifically to your preferences.',
+                stat: '1000+ possible combinations'
+              }
+            ].map((benefit, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
+              >
+                <Card className="h-full text-center hover:shadow-lg transition-shadow duration-300">
+                  <CardContent className="p-8">
+                    <div className="mb-4">
+                      {benefit.icon}
+                    </div>
+                    <h3 className="font-merchant text-xl mb-3">{benefit.title}</h3>
+                    <p className="text-gray-600 font-poppins mb-4">{benefit.description}</p>
+                    <Badge className="bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 border-none">
+                      {benefit.stat}
+                    </Badge>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What's Included Section */}
+      <section className="py-16 bg-gradient-to-br from-purple-50 to-pink-50">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center mb-12"
+          >
+            <h2 className="font-merchant text-3xl mb-4">What's Included</h2>
+            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
+              Your Magic Itinerary comes with everything you need for an amazing Melbourne experience
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              {
+                title: 'Detailed Timeline',
+                description: 'Hour-by-hour schedule with optimal timing'
+              },
+              {
+                title: 'Transportation Tips',
+                description: 'Best routes and transport options between locations'
+              },
+              {
+                title: 'Local Recommendations',
+                description: 'Insider tips on food, shopping, and experiences'
+              },
+              {
+                title: 'Budget Planning',
+                description: 'Estimated costs and money-saving suggestions'
+              },
+              {
+                title: 'Weather Backup Plans',
+                description: 'Alternative indoor activities for rainy days'
+              },
+              {
+                title: 'Photo Opportunities',
+                description: 'Best spots and times for Instagram-worthy shots'
+              },
+              {
+                title: 'Cultural Insights',
+                description: 'Local history and interesting facts about each location'
+              },
+              {
+                title: 'Real-time Updates',
+                description: 'Live information on closures, events, and crowds'
+              }
+            ].map((item, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 + index * 0.05 }}
+              >
+                <Card className="h-full hover:shadow-md transition-shadow duration-300">
+                  <CardContent className="p-6 text-center">
+                    <h3 className="font-merchant text-lg mb-2">{item.title}</h3>
+                    <p className="text-gray-600 font-poppins text-sm">{item.description}</p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+
+
+      {/* Mobile App Section */}
+      <MobileAppSection />
+
+      {/* Customer Reviews */}
+      <EnhancedTestimonials />
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbourneAttractions.tsx b/src/components/MelbourneAttractions.tsx
new file mode 100644
index 0000000..d91a282
--- /dev/null
+++ b/src/components/MelbourneAttractions.tsx
@@ -0,0 +1,397 @@
+import { useState } from 'react';
+import { ChevronLeft, ChevronRight, Clock, Users, Star, Zap, CheckCircle, MapPin, Volume2, Camera, Coffee, Palette, Eye } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { motion } from 'motion/react';
+
+const melbourneAttractions = [
+  {
+    id: 1,
+    name: "Royal Botanic Gardens",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.8,
+    reviews: "15,600+",
+    category: "Gardens",
+    originalPrice: "Free",
+    includedValue: "$25",
+    perks: [
+      { icon: Volume2, label: "Audio garden tour", color: "text-green-600" },
+      { icon: MapPin, label: "Garden maps", color: "text-blue-600" },
+      { icon: Camera, label: "Photo spots guide", color: "text-purple-600" }
+    ]
+  },
+  {
+    id: 2,
+    name: "Federation Square",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1639655001512-e4b58d4874b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBmZWRlcmF0aW9uJTIwc3F1YXJlfGVufDF8fHx8MTc1NzMzNzc5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.6,
+    reviews: "22,400+",
+    category: "Landmarks",
+    originalPrice: "Free",
+    includedValue: "$35",
+    perks: [
+      { icon: Volume2, label: "Cultural tours", color: "text-orange-600" },
+      { icon: Eye, label: "Gallery access", color: "text-blue-600" },
+      { icon: Users, label: "Event access", color: "text-purple-600" }
+    ]
+  },
+  {
+    id: 3,
+    name: "Queen Victoria Market",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0fGVufDF8fHx8MTc1NzMzNzc5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.7,
+    reviews: "18,200+",
+    category: "Markets",
+    originalPrice: "$45",
+    includedValue: "$45",
+    perks: [
+      { icon: Users, label: "Food tours", color: "text-orange-600" },
+      { icon: Coffee, label: "Tastings", color: "text-brown-600" },
+      { icon: Volume2, label: "History guide", color: "text-blue-600" }
+    ]
+  },
+  {
+    id: 4,
+    name: "Eureka Skydeck",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1629677713183-29248e1268d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBldXJla2ElMjB0b3dlcnxlbnwxfHx8fDE3NTczMzc4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.9,
+    reviews: "11,800+",
+    category: "Views",
+    originalPrice: "$32",
+    includedValue: "$32",
+    perks: [
+      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
+      { icon: Eye, label: "360° views", color: "text-purple-600" },
+      { icon: Camera, label: "Photo experiences", color: "text-blue-600" }
+    ]
+  },
+  {
+    id: 5,
+    name: "St Kilda Beach & Pier",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1674732954456-159835c0a46b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdCUyMGtpbGRhJTIwYmVhY2h8ZW58MXx8fHwxNzU3MzM3ODAzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.5,
+    reviews: "14,300+",
+    category: "Beach",
+    originalPrice: "Free",
+    includedValue: "$20",
+    perks: [
+      { icon: Users, label: "Penguin tours", color: "text-blue-600" },
+      { icon: MapPin, label: "Beach activities", color: "text-green-600" },
+      { icon: Camera, label: "Sunset spots", color: "text-purple-600" }
+    ]
+  },
+  {
+    id: 6,
+    name: "Melbourne Laneways",
+    city: "Melbourne",
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBsYW5ld2F5cyUyMHN0cmVldCUyMGFydHxlbnwxfHx8fDE3NTczMzc4MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.8,
+    reviews: "19,500+",
+    category: "Street Art",
+    originalPrice: "$55",
+    includedValue: "$55",
+    perks: [
+      { icon: Palette, label: "Art tours", color: "text-pink-600" },
+      { icon: Coffee, label: "Café stops", color: "text-brown-600" },
+      { icon: Camera, label: "Photo walks", color: "text-purple-600" }
+    ]
+  },
+  {
+    id: 7,
+    name: "Melbourne Zoo",
+    city: "Melbourne", 
+    country: "Australia",
+    image: "https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.7,
+    reviews: "13,900+",
+    category: "Wildlife",
+    originalPrice: "$42",
+    includedValue: "$42",
+    perks: [
+      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
+      { icon: Users, label: "Animal encounters", color: "text-orange-600" },
+      { icon: Volume2, label: "Keeper talks", color: "text-blue-600" }
+    ]
+  },
+  {
+    id: 8,
+    name: "Royal Exhibition Building",
+    city: "Melbourne",
+    country: "Australia", 
+    image: "https://images.unsplash.com/photo-1720523794299-c3b445d71a51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGV4aGliaXRpb24lMjBidWlsZGluZ3xlbnwxfHx8fDE3NTczMzc4MTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rating: 4.6,
+    reviews: "8,700+",
+    category: "Heritage",
+    originalPrice: "$25",
+    includedValue: "$25",
+    perks: [
+      { icon: Volume2, label: "Audio tours", color: "text-blue-600" },
+      { icon: Eye, label: "Exhibitions", color: "text-purple-600" },
+      { icon: MapPin, label: "Heritage walks", color: "text-green-600" }
+    ]
+  }
+];
+
+const categories = ["All", "Landmarks", "Gardens", "Markets", "Views", "Beach", "Street Art", "Wildlife", "Heritage"];
+
+export function MelbourneAttractions() {
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  const filteredAttractions = activeCategory === "All" 
+    ? melbourneAttractions 
+    : melbourneAttractions.filter(attraction => attraction.category === activeCategory);
+
+  const AttractionCard = ({ attraction, index }: { attraction: typeof melbourneAttractions[0], index: number }) => (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className="group cursor-pointer flex-shrink-0 w-[280px] md:w-auto md:flex-shrink h-96 flip-card-container"
+    >
+      {/* 3D Flip Container */}
+      <div className="flip-card-inner group-hover:[transform:rotateY(180deg)] relative w-full h-full">
+        
+        {/* FRONT FACE */}
+        <div className="flip-card-face absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg">
+          {/* Background Image */}
+          <ImageWithFallback
+            src={attraction.image}
+            alt={attraction.name}
+            className="w-full h-full object-cover"
+          />
+
+          {/* Rating Badge */}
+          <div className="absolute top-4 right-4 bg-white/95 backdrop-blur-sm rounded-full px-3 py-1.5 flex items-center gap-1 shadow-lg z-10">
+            <div className="w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center">
+              <span className="text-white text-xs">★</span>
+            </div>
+            <span className="text-sm font-medium text-gray-900">{attraction.rating}</span>
+          </div>
+
+          {/* Front Content - Clean Title & Location */}
+          <div className="absolute bottom-0 left-0 right-0">
+            <div className="bg-gradient-to-t from-black/80 via-black/50 to-transparent p-6">
+              <h3 className="font-bold text-xl text-white mb-1">{attraction.name}</h3>
+              <p className="text-white/90 text-sm">
+                {attraction.city}, {attraction.country}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* BACK FACE */}
+        <div className="flip-card-face flip-card-back absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-gray-900 to-black">
+          {/* Back Content Container */}
+          <div className="relative w-full h-full p-6 flex flex-col justify-center text-white">
+            
+            {/* Included Value Section */}
+            <div className="mb-4">
+              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-3 py-1.5 rounded-full text-sm font-medium mb-3">
+                <CheckCircle className="w-4 h-4" />
+                <span>Included Value</span>
+              </div>
+              <div className="text-2xl font-bold mb-1">{attraction.includedValue}</div>
+              <p className="text-white/80 text-sm">
+                {attraction.originalPrice === "Free"
+                  ? "Premium access included"
+                  : "Save money with CityCard"}
+              </p>
+            </div>
+
+            {/* What's Included List */}
+            <div className="mb-4">
+              <h4 className="font-semibold text-sm mb-3">What's Included:</h4>
+              <div className="space-y-2">
+                {attraction.perks.slice(0, 3).map((perk, perkIndex) => (
+                  <div key={perkIndex} className="flex items-center gap-3 text-white/90">
+                    <div className="w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
+                      <perk.icon className="w-3 h-3 text-white" />
+                    </div>
+                    <span className="text-sm">{perk.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Duration & Meta Info */}
+            <div className="mb-4">
+              <div className="flex items-center gap-4 text-white/80 text-sm">
+                <div className="flex items-center gap-1">
+                  <Clock className="w-4 h-4" />
+                  <span>2-3 hours</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Users className="w-4 h-4" />
+                  <span>All ages</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Footer Features */}
+            <div className="border-t border-white/20 pt-4">
+              <div className="flex items-center justify-between text-white/80 text-xs">
+                <div className="flex items-center gap-2">
+                  <MapPin className="w-3 h-3" />
+                  <span>Mobile ticket</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle className="w-3 h-3" />
+                  <span>Instant confirmation</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Decorative Elements */}
+            <div className="absolute top-4 right-4 w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
+            <div className="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-tr from-secondary/15 to-primary/15 rounded-full blur-lg"></div>
+          </div>
+        </div>
+
+      </div>
+    </motion.div>
+  );
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
+            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Melbourne Must-Sees
+            </span>
+          </div>
+          <h2 className="heading-dynamic text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
+            <span className="font-light">Discover</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Melbourne's
+            </span>{' '}
+            <span className="font-normal">Best</span>{' '}
+            <span className="font-semibold text-emphasis">Experiences</span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Discover Melbourne's iconic landmarks, vibrant culture, world-class dining, and hidden gems - all included with your Melbourne CityCard
+          </p>
+        </motion.div>
+
+        {/* Category Tabs */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="flex flex-wrap justify-center gap-3 mb-12"
+        >
+          {categories.map((category, index) => (
+            <motion.button
+              key={category}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.3, delay: index * 0.05 }}
+              viewport={{ once: true }}
+              onClick={() => setActiveCategory(category)}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className={`px-6 py-4 h-14 rounded-2xl font-medium transition-all duration-300 ${
+                activeCategory === category
+                  ? 'bg-gradient-to-r from-primary to-secondary text-white shadow-xl shadow-primary/25 ring-2 ring-primary/20'
+                  : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-primary/20 hover:bg-white'
+              }`}
+            >
+              {category}
+            </motion.button>
+          ))}
+        </motion.div>
+
+        {/* Mobile Horizontal Carousel */}
+        <div className="block md:hidden mb-8">
+          <div className="relative">
+            {/* Scroll Container */}
+            <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-4 px-4 -mx-4">
+              {filteredAttractions.map((attraction, index) => (
+                <AttractionCard key={attraction.id} attraction={attraction} index={index} />
+              ))}
+            </div>
+            
+            {/* Scroll Indicators */}
+            <div className="flex justify-center mt-6 gap-2">
+              {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_, index) => (
+                <div
+                  key={index}
+                  className="w-2 h-2 rounded-full bg-gray-300"
+                />
+              ))}
+            </div>
+            
+            {/* Mobile Hint Text */}
+            <div className="text-center mt-4">
+              <p className="text-sm text-gray-500">
+                Swipe to explore more Melbourne attractions
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Bento Grid */}
+        <div className="hidden md:block w-full">
+          {/* Top Row - 3 equal cards */}
+          <div className="grid grid-cols-3 gap-6">
+            {filteredAttractions.slice(0, 3).map((attraction, index) => (
+              <AttractionCard key={attraction.id} attraction={attraction} index={index} />
+            ))}
+          </div>
+
+          {/* Consistent Vertical Spacing */}
+          <div className="h-6"></div>
+
+          {/* Bottom Row - 2 larger cards */}
+          <div className="grid grid-cols-2 gap-6">
+            {filteredAttractions.slice(3, 5).map((attraction, index) => (
+              <AttractionCard key={attraction.id} attraction={attraction} index={index + 3} />
+            ))}
+          </div>
+        </div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true }}
+          className="text-center mt-12"
+        >
+          <motion.button
+            whileHover={{ scale: 1.05, boxShadow: "0 20px 40px rgba(99,102,241,0.3)" }}
+            whileTap={{ scale: 0.95 }}
+            className="relative bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg shadow-xl transition-all duration-300 overflow-hidden group"
+          >
+            <span className="relative z-10">Get Your Melbourne Card</span>
+            
+            {/* Shine animation */}
+            <div className="absolute inset-0 opacity-30">
+              <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
+            </div>
+          </motion.button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbourneBlogs.tsx b/src/components/MelbourneBlogs.tsx
new file mode 100644
index 0000000..d65a7f9
--- /dev/null
+++ b/src/components/MelbourneBlogs.tsx
@@ -0,0 +1,291 @@
+import { motion } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Calendar, Clock, User, ArrowRight, Coffee, Camera, MapPin, Star } from 'lucide-react';
+import { Button } from './ui/button';
+
+const blogPosts = [
+  {
+    id: 1,
+    title: "Hidden Laneways: Melbourne's Street Art Revolution",
+    excerpt: "Discover the vibrant street art scene that has transformed Melbourne's narrow alleyways into outdoor galleries, making the city a global street art capital.",
+    image: "https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdHJlZXQlMjBhcnQlMjBsYW5ld2F5c3xlbnwxfHx8fDE3NTczMzkyNjZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Melbourne Explorer",
+    date: "Dec 15, 2024",
+    readTime: "5 min read",
+    category: "Culture",
+    featured: true,
+    tags: ["Street Art", "Laneways", "Culture", "Photography"]
+  },
+  {
+    id: 2,
+    title: "Coffee Capital: Melbourne's World-Famous Cafe Culture",
+    excerpt: "From hole-in-the-wall espresso bars to artisanal third-wave coffee shops, explore why Melbourne is considered the world's coffee capital.",
+    image: "https://images.unsplash.com/photo-1681745623555-efc392301d6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBjdWx0dXJlJTIwY2FmZXxlbnwxfHx8fDE3NTczMzkyNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Coffee Connoisseur",
+    date: "Dec 12, 2024",
+    readTime: "7 min read",
+    category: "Food & Drink",
+    featured: false,
+    tags: ["Coffee", "Food", "Local Culture", "Cafes"]
+  },
+  {
+    id: 3,
+    title: "Royal Botanic Gardens: Melbourne's Green Oasis",
+    excerpt: "Escape the urban hustle in Melbourne's 38-hectare botanical paradise, home to over 8,500 plant species and stunning city views.",
+    image: "https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Nature Guide",
+    date: "Dec 10, 2024",
+    readTime: "4 min read",
+    category: "Nature",
+    featured: false,
+    tags: ["Gardens", "Nature", "Photography", "Relaxation"]
+  },
+  {
+    id: 4,
+    title: "Sports Capital: Melbourne's Sporting Heritage",
+    excerpt: "From the iconic MCG to Formula 1 racing, discover why Melbourne holds the title of Australia's sporting capital and home to major international events.",
+    image: "https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Sports Fan",
+    date: "Dec 8, 2024", 
+    readTime: "6 min read",
+    category: "Sports",
+    featured: false,
+    tags: ["Sports", "MCG", "Events", "Culture"]
+  },
+  {
+    id: 5,
+    title: "Foodie Paradise: Melbourne's Multicultural Dining Scene",
+    excerpt: "Experience Melbourne's incredible culinary diversity, from authentic Greek tavernas to innovative modern Australian cuisine in award-winning restaurants.",
+    image: "https://images.unsplash.com/photo-1681745623555-efc392301d6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBjdWx0dXJlJTIwY2FmZXxlbnwxfHx8fDE3NTczMzkyNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Food Critic",
+    date: "Dec 5, 2024",
+    readTime: "8 min read",
+    category: "Food & Drink",
+    featured: false,
+    tags: ["Food", "Restaurants", "Multicultural", "Dining"]
+  },
+  {
+    id: 6,
+    title: "Melbourne After Dark: Rooftop Bars & Nightlife",
+    excerpt: "Explore Melbourne's sophisticated nightlife scene, from hidden speakeasies in historic buildings to stunning rooftop bars with panoramic city views.",
+    image: "https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    author: "Nightlife Expert",
+    date: "Dec 2, 2024",
+    readTime: "5 min read",
+    category: "Nightlife",
+    featured: false,
+    tags: ["Nightlife", "Rooftop Bars", "Entertainment", "City Views"]
+  }
+];
+
+const categories = [
+  { name: "All", count: 6, color: "from-gray-500 to-gray-600" },
+  { name: "Culture", count: 2, color: "from-purple-500 to-pink-500" },
+  { name: "Food & Drink", count: 2, color: "from-orange-500 to-red-500" },
+  { name: "Nature", count: 1, color: "from-green-500 to-emerald-500" },
+  { name: "Sports", count: 1, color: "from-blue-500 to-cyan-500" },
+  { name: "Nightlife", count: 1, color: "from-indigo-500 to-purple-500" }
+];
+
+export function MelbourneBlogs() {
+  const featuredPost = blogPosts.find(post => post.featured);
+  const regularPosts = blogPosts.filter(post => !post.featured);
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 via-white to-gray-50 relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-[0.02]">
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-primary/20"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
+            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Melbourne Stories
+            </span>
+          </div>
+          
+          <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
+            <span className="font-normal">Melbourne</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Blogs
+            </span>
+          </h2>
+          
+          <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
+            Dive deep into Melbourne's rich cultural tapestry, from hidden laneway treasures to world-renowned 
+            coffee culture. Discover insider stories, local secrets, and expert guides to Australia's cultural capital 
+            that will transform your Melbourne experience into an unforgettable journey.
+          </p>
+        </motion.div>
+
+        {/* Categories Filter */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          viewport={{ once: true }}
+          className="flex flex-wrap justify-center gap-3 mb-16"
+        >
+          {categories.map((category, index) => (
+            <motion.button
+              key={category.name}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.4, delay: 0.2 + index * 0.05 }}
+              viewport={{ once: true }}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className={`px-6 py-3 rounded-full bg-gradient-to-r ${category.color} text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 group`}
+            >
+              <span className="flex items-center gap-2">
+                {category.name}
+                <span className="text-xs bg-white/20 px-2 py-1 rounded-full group-hover:bg-white/30 transition-colors duration-200">
+                  {category.count}
+                </span>
+              </span>
+            </motion.button>
+          ))}
+        </motion.div>
+
+        {/* Featured Post */}
+        {featuredPost && (
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="mb-16"
+          >
+
+          </motion.div>
+        )}
+
+        {/* Regular Blog Posts Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {regularPosts.map((post, index) => (
+            <motion.article
+              key={post.id}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
+              viewport={{ once: true }}
+              className="bg-white rounded-3xl shadow-lg overflow-hidden border border-gray-100 group hover:shadow-2xl hover:border-gray-200 transition-all duration-500 cursor-pointer h-[480px] flex flex-col"
+            >
+              {/* Post Image */}
+              <div className="relative overflow-hidden h-48">
+                <ImageWithFallback
+                  src={post.image}
+                  alt={post.title}
+                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                
+                {/* Category Badge */}
+                <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
+                  {post.category}
+                </div>
+              </div>
+
+              {/* Post Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div className="flex items-center gap-3 text-xs text-gray-500 mb-3">
+                  <div className="flex items-center gap-1">
+                    <User className="w-3 h-3" />
+                    {post.author}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Calendar className="w-3 h-3" />
+                    {post.date}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    {post.readTime}
+                  </div>
+                </div>
+
+                <div className="flex-1 flex flex-col">
+                  <h3 className="font-merchant text-xl font-semibold text-gray-900 mb-3 leading-tight group-hover:text-primary transition-colors duration-200 line-clamp-2">
+                    {post.title}
+                  </h3>
+                  
+                  <p className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3">
+                    {post.excerpt}
+                  </p>
+
+                  {/* Tags */}
+                  <div className="flex flex-wrap gap-1 mb-4">
+                    {post.tags.slice(0, 2).map((tag, tagIndex) => (
+                      <span
+                        key={tagIndex}
+                        className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                    {post.tags.length > 2 && (
+                      <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
+                        +{post.tags.length - 2}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mt-auto">
+                  <span className="text-primary font-medium text-sm group-hover:text-secondary transition-colors duration-200">
+                    Read More
+                  </span>
+                  <ArrowRight className="w-4 h-4 text-primary group-hover:text-secondary group-hover:translate-x-1 transition-all duration-200" />
+                </div>
+              </div>
+            </motion.article>
+          ))}
+        </div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <div className="bg-gradient-to-br from-primary/5 via-secondary/5 to-primary/5 rounded-3xl p-8 md:p-12 border border-gray-100">
+            <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-4">
+              Want to explore Melbourne yourself?
+            </h3>
+            <p className="text-gray-600 text-lg mb-8 max-w-2xl mx-auto">
+              Get your Melbourne CityCard and unlock access to all these incredible experiences and more. 
+              Start your adventure today with exclusive deals and insider access.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                className="bg-gradient-to-r from-primary to-secondary text-white font-semibold px-8 py-4 rounded-2xl hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
+              >
+                <MapPin className="w-5 h-5 mr-2" />
+                Explore Melbourne
+              </Button>
+              <Button
+                variant="outline"
+                className="border-2 border-gray-300 text-gray-700 font-semibold px-8 py-4 rounded-2xl hover:border-primary hover:text-primary hover:scale-105 transition-all duration-300"
+              >
+                <Coffee className="w-5 h-5 mr-2" />
+                View All Blogs
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbourneCardComparison.tsx b/src/components/MelbourneCardComparison.tsx
new file mode 100644
index 0000000..7f9346f
--- /dev/null
+++ b/src/components/MelbourneCardComparison.tsx
@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { Check, X, Star, Users, MapPin, Calendar, Clock, Zap, Eye } from 'lucide-react';
+import { Button } from './ui/button';
+import { motion } from 'motion/react';
+
+const cardOptions = [
+  {
+    id: 'selective',
+    name: 'Selective Card',
+    subtitle: 'Pick 5-10 things to do from a choice of 102 attractions tours and activities',
+    priceRange: '$89-159',
+    duration: '3-7 days',
+    popular: false,
+    color: 'from-blue-500 to-cyan-500',
+    features: {
+      passCategory: 'Selective Card',
+      accessToAttractions: true,
+      entryToAttractions: true,
+      accessToExperiences: true,
+      entryToSites: true,
+      accessToVenues: false,
+      entryToEvents: 'Pass Category',
+      accessToLocations: 'Pass Category',
+      entryToActivities: true,
+      accessToExhibits: true,
+      entryToActivitiesSecond: true
+    }
+  },
+  {
+    id: 'unlimited',
+    name: 'Melbourne Unlimited Card',
+    subtitle: 'Pick 5-30 things to do from a choice of 102 attractions tours and activities',
+    priceRange: '$159-299',
+    duration: '3-7 days',
+    popular: true,
+    color: 'from-purple-500 to-pink-500',
+    features: {
+      passCategory: 'Pass Category',
+      accessToAttractions: true,
+      entryToAttractions: true,
+      accessToExperiences: true,
+      entryToSites: true,
+      accessToVenues: true,
+      entryToEvents: 'Pass Category',
+      accessToLocations: 'Pass Category',
+      entryToActivities: true,
+      accessToExhibits: true,
+      entryToActivitiesSecond: true
+    }
+  }
+];
+
+const features = [
+  { key: 'passCategory', label: 'Pass Category', icon: Star },
+  { key: 'accessToAttractions', label: 'Access to Attractions', icon: MapPin },
+  { key: 'entryToAttractions', label: 'Entry to Attractions', icon: Zap },
+  { key: 'accessToExperiences', label: 'Access to Experiences', icon: Users },
+  { key: 'entryToSites', label: 'Entry to Sites', icon: MapPin },
+  { key: 'accessToVenues', label: 'Access to Venues', icon: MapPin },
+  { key: 'entryToEvents', label: 'Entry to Events', icon: Calendar },
+  { key: 'accessToLocations', label: 'Access to Locations', icon: MapPin },
+  { key: 'entryToActivities', label: 'Entry to Activities', icon: Users },
+  { key: 'accessToExhibits', label: 'Access to Exhibits', icon: Eye },
+  { key: 'entryToActivitiesSecond', label: 'Entry to Activities', icon: Users }
+];
+
+const FeatureIcon = ({ feature }: { feature: typeof features[0] }) => {
+  const Icon = feature.icon;
+  return <Icon className="w-4 h-4 text-gray-500" />;
+};
+
+interface MelbourneCardComparisonProps {
+  onCheckoutClick?: () => void;
+}
+
+export function MelbourneCardComparison({ onCheckoutClick }: MelbourneCardComparisonProps) {
+  const [selectedCard, setSelectedCard] = useState<string>('unlimited');
+
+  const renderFeatureValue = (value: boolean | string, cardId: string) => {
+    if (typeof value === 'boolean') {
+      return value ? (
+        <div className="flex justify-center">
+          <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
+            <Check className="w-4 h-4 text-white" />
+          </div>
+        </div>
+      ) : (
+        <div className="flex justify-center">
+          <div className="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center">
+            <X className="w-3 h-3 text-gray-400" />
+          </div>
+        </div>
+      );
+    }
+    
+    return (
+      <div className="text-center text-sm text-gray-600 px-2">
+        {value}
+      </div>
+    );
+  };
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 via-white to-gray-50 relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
+            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Choose Your Adventure
+            </span>
+          </div>
+          
+          <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Buy
+            </span>{' '}
+            <span className="font-normal">Now</span>
+          </h2>
+          
+          <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
+            Melbourne is a must-visit cultural epicenter, and this spectacular trip unlocks 
+            your access around the city in one easy. Save over the cost of visiting Melbourne's 
+            landmarks, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach.
+          </p>
+        </motion.div>
+
+        {/* Card Options Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="flex justify-center mb-12"
+        >
+          <div className="flex bg-white rounded-2xl p-2 shadow-lg border border-gray-100 gap-2">
+            {cardOptions.map((card) => (
+              <motion.button
+                key={card.id}
+                onClick={() => setSelectedCard(card.id)}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                className={`px-8 py-4 rounded-xl font-medium transition-all duration-300 relative overflow-hidden ${
+                  selectedCard === card.id
+                    ? `bg-gradient-to-r ${card.color} text-white shadow-lg`
+                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                }`}
+              >
+                {card.popular && (
+                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></div>
+                )}
+                <div className="text-center">
+                  <div className="font-semibold text-lg">{card.name}</div>
+                  <div className="text-sm opacity-90 mt-1">{card.priceRange}</div>
+                </div>
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Comparison Table */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true }}
+          className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden"
+        >
+          {/* Table Header */}
+          <div className="bg-gradient-to-r from-gray-50 to-gray-100 px-8 py-6">
+            <div className="grid grid-cols-3 gap-8 items-center">
+              <div className="font-merchant text-xl font-semibold text-gray-900">
+                Features
+              </div>
+              {cardOptions.map((card) => (
+                <div key={card.id} className="text-center">
+                  <div className={`inline-block px-6 py-3 rounded-2xl bg-gradient-to-r ${card.color} text-white mb-2`}>
+                    <div className="font-semibold text-lg">{card.name}</div>
+                  </div>
+                  <div className="text-sm text-gray-600 max-w-xs mx-auto leading-relaxed">
+                    {card.subtitle}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Table Body */}
+          <div className="divide-y divide-gray-100">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.key}
+                initial={{ opacity: 0, x: -20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.4, delay: index * 0.05 }}
+                viewport={{ once: true }}
+                className="grid grid-cols-3 gap-8 items-center px-8 py-6 hover:bg-gray-50/50 transition-colors duration-200"
+              >
+                <div className="flex items-center gap-3">
+                  <FeatureIcon feature={feature} />
+                  <span className="font-medium text-gray-900">{feature.label}</span>
+                </div>
+                
+                {cardOptions.map((card) => (
+                  <div key={card.id} className="text-center">
+                    {renderFeatureValue(card.features[feature.key as keyof typeof card.features], card.id)}
+                  </div>
+                ))}
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Call to Action Footer */}
+          <div className="bg-gradient-to-r from-primary/5 to-secondary/5 px-8 py-8">
+            <div className="grid grid-cols-3 gap-8 items-center">
+              <div className="text-center">
+                <div className="font-medium text-gray-600 text-sm mb-2">Ready to explore?</div>
+                <div className="text-xs text-gray-500">Compare features above</div>
+              </div>
+              
+              {cardOptions.map((card) => (
+                <motion.div key={card.id} className="text-center">
+                  <div className="mb-4">
+                    <div className="text-3xl font-bold text-gray-900">{card.priceRange}</div>
+                    <div className="text-sm text-gray-600">{card.duration}</div>
+                  </div>
+                  <Button
+                    withShine={true}
+                    className={`w-full h-14 rounded-2xl text-white font-semibold text-lg bg-gradient-to-r ${card.color} hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl`}
+                    onClick={onCheckoutClick}
+                  >
+                    Buy {card.name}
+                  </Button>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Additional Info */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="text-center mt-12"
+        >
+          <div className="flex flex-wrap justify-center gap-8 text-sm text-gray-600">
+            <div className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-primary" />
+              <span>Instant digital delivery</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Users className="w-4 h-4 text-primary" />
+              <span>24/7 customer support</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Star className="w-4 h-4 text-primary" />
+              <span>90-day money back guarantee</span>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbourneFAQ.tsx b/src/components/MelbourneFAQ.tsx
new file mode 100644
index 0000000..30afd55
--- /dev/null
+++ b/src/components/MelbourneFAQ.tsx
@@ -0,0 +1,212 @@
+import { motion } from 'motion/react';
+import { 
+  HelpCircle, 
+  Clock, 
+  MapPin, 
+  CreditCard, 
+  Calendar, 
+  Users, 
+  Coffee,
+  Camera,
+  Train,
+  Smartphone
+} from 'lucide-react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./ui/accordion";
+
+const faqData = [
+  {
+    id: "refund",
+    question: "Can I get a refund on my Melbourne CityCard?",
+    answer: "Yes, you can cancel your Melbourne CityCard and receive a full refund if you cancel at least 24 hours in advance of your selected start date. For cancellations within 24 hours, refunds are subject to our cancellation policy. Digital cards can be refunded instantly through your account.",
+    icon: CreditCard
+  },
+  {
+    id: "duration",
+    question: "How long is my Melbourne CityCard valid?",
+    answer: "Melbourne CityCards are available in 1, 2, 3, and 5-day options. Your card activates on the first attraction you visit and is valid for consecutive days only. The 5-day Melbourne Unlimited Card provides the best value for extended stays with access to over 40 premium attractions.",
+    icon: Calendar
+  },
+  {
+    id: "transportation",
+    question: "Does the Melbourne CityCard include public transport?",
+    answer: "The Melbourne Unlimited Card includes a complimentary Myki card loaded with travel credit for trams, trains, and buses within Melbourne's CBD and inner suburbs. The Selective Card focuses on attractions only, but we provide detailed transport guides for each venue.",
+    icon: Train
+  },
+  {
+    id: "attractions",
+    question: "What are the must-visit attractions included with my card?",
+    answer: "Your Melbourne CityCard includes iconic experiences like Eureka Tower SkyDeck, Royal Botanic Gardens tours, Melbourne Zoo, SEA LIFE Melbourne Aquarium, and Melbourne Star observation wheel. Plus unique local experiences like laneways art tours, coffee culture walks, and rooftop dining discounts.",
+    icon: Camera
+  },
+  {
+    id: "best-time",
+    question: "When is the best time to visit Melbourne?",
+    answer: "Melbourne is fantastic year-round! Spring (Sep-Nov) offers perfect weather and blooming gardens. Summer (Dec-Feb) brings outdoor festivals and rooftop season. Autumn (Mar-May) showcases beautiful foliage and harvest events. Winter (Jun-Aug) is ideal for cozy cafes, indoor attractions, and cultural experiences.",
+    icon: Clock
+  },
+  {
+    id: "coffee-culture",
+    question: "How can I experience Melbourne's famous coffee culture?",
+    answer: "Your Melbourne CityCard includes guided coffee tours through famous laneways, visits to historic coffee roasters, and discounts at award-winning cafes. We've partnered with local baristas to offer exclusive tastings and behind-the-scenes experiences at Melbourne's most beloved coffee institutions.",
+    icon: Coffee
+  },
+  {
+    id: "group-bookings",
+    question: "Do you offer group discounts for families or friends?",
+    answer: "Yes! Groups of 4+ receive automatic discounts, and families with children under 16 get special pricing. School groups and corporate bookings receive additional benefits. Contact our Melbourne team for custom packages that can include private tours and exclusive venue access.",
+    icon: Users
+  },
+  {
+    id: "mobile-app",
+    question: "Do I need the mobile app to use my Melbourne CityCard?",
+    answer: "While not required, our mobile app enhances your Melbourne experience with interactive maps, real-time attraction wait times, insider tips from locals, and the ability to skip lines at participating venues. Download it for offline access to your itinerary and exclusive app-only deals.",
+    icon: Smartphone
+  },
+  {
+    id: "neighborhoods",
+    question: "Which Melbourne neighborhoods should I explore?",
+    answer: "Your CityCard provides access to experiences across Melbourne's diverse neighborhoods: Fitzroy for street art and vintage shopping, St. Kilda for beaches and nightlife, Southbank for dining and culture, CBD for iconic attractions, and Richmond for authentic Vietnamese food and shopping.",
+    icon: MapPin
+  }
+];
+
+export function MelbourneFAQ() {
+  return (
+    <section className="py-16 md:py-24 bg-gradient-to-br from-gray-50 via-white to-gray-50 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5"></div>
+      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/10 to-transparent rounded-full -translate-y-48 translate-x-48 blur-2xl"></div>
+      <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-secondary/10 to-transparent rounded-full translate-y-48 -translate-x-48 blur-2xl"></div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
+            <HelpCircle className="w-4 h-4 text-primary" />
+            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Melbourne Guide
+            </span>
+          </div>
+          
+          <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
+            <span className="font-normal">Frequently Asked</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Questions
+            </span>
+          </h2>
+          
+          <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
+            Everything you need to know about exploring Melbourne with your CityCard. From iconic attractions 
+            to hidden local gems, we've got your Melbourne adventure covered.
+          </p>
+        </motion.div>
+
+        {/* FAQ Grid */}
+        <div className="max-w-4xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+          >
+            <Accordion type="single" collapsible className="space-y-4">
+              {faqData.map((faq, index) => {
+                const IconComponent = faq.icon;
+                return (
+                  <motion.div
+                    key={faq.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4, delay: 0.3 + index * 0.05 }}
+                    viewport={{ once: true }}
+                  >
+                    <AccordionItem 
+                      value={faq.id}
+                      className="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 overflow-hidden group"
+                    >
+                      <AccordionTrigger className="px-6 py-5 hover:no-underline group-hover:bg-gray-50/50 transition-colors duration-200">
+                        <div className="flex items-center gap-4 text-left">
+                          <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center group-hover:from-primary/20 group-hover:to-secondary/20 transition-all duration-200">
+                            <IconComponent className="w-5 h-5 text-primary" />
+                          </div>
+                          <span className="font-merchant font-semibold text-gray-900 group-hover:text-primary transition-colors duration-200">
+                            {faq.question}
+                          </span>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className="px-6 pb-6">
+                        <div className="pl-14">
+                          <p className="text-gray-600 leading-relaxed">
+                            {faq.answer}
+                          </p>
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  </motion.div>
+                );
+              })}
+            </Accordion>
+          </motion.div>
+        </div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <div className="bg-gradient-to-br from-primary/5 via-secondary/5 to-primary/5 rounded-3xl p-8 md:p-12 border border-gray-100 max-w-3xl mx-auto">
+            <div className="mb-6">
+              <div className="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl mx-auto flex items-center justify-center mb-4">
+                <HelpCircle className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-4">
+                Still have questions?
+              </h3>
+              <p className="text-gray-600 text-lg mb-8 max-w-2xl mx-auto">
+                Our Melbourne experts are here to help you make the most of your visit. 
+                Get personalized recommendations and insider tips.
+              </p>
+            </div>
+            
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="bg-gradient-to-r from-primary to-secondary text-white font-semibold px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 group"
+              >
+                <span className="flex items-center gap-2">
+                  Contact Melbourne Support
+                  <HelpCircle className="w-5 h-5 group-hover:rotate-12 transition-transform duration-200" />
+                </span>
+              </motion.button>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="border-2 border-gray-300 text-gray-700 font-semibold px-8 py-4 rounded-2xl hover:border-primary hover:text-primary transition-all duration-300 group"
+              >
+                <span className="flex items-center gap-2">
+                  Browse Melbourne Guide
+                  <MapPin className="w-5 h-5 group-hover:bounce transition-all duration-200" />
+                </span>
+              </motion.button>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbournePage.tsx b/src/components/MelbournePage.tsx
new file mode 100644
index 0000000..8ba9959
--- /dev/null
+++ b/src/components/MelbournePage.tsx
@@ -0,0 +1,256 @@
+import { motion } from 'motion/react';
+import { Button } from './ui/button';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { MelbourneAttractions } from './MelbourneAttractions';
+import { MelbourneCardComparison } from './MelbourneCardComparison';
+import { MelbourneTourOverview } from './MelbourneTourOverview';
+import { MelbourneBlogs } from './MelbourneBlogs';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { MobileAppPromotion } from './MobileAppPromotion';
+import { MelbourneFAQ } from './MelbourneFAQ';
+import { Footer } from './Footer';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface MelbournePageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onAttractionsClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick?: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick?: () => void;
+  onCityCardsClick?: () => void;
+  onMagicItineraryClick?: () => void;
+  onPostCardsClick?: () => void;
+  onOffersClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  onContactUsClick?: () => void;
+  currentPage?: string;
+  user?: User | null;
+}
+
+export function MelbournePage({ 
+  onBackClick, 
+  onHomeClick, 
+  onAttractionsClick, 
+  onPassesClick,
+  onCheckoutClick, 
+  onSignInClick,
+  onSignOutClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  onContactUsClick,
+  currentPage,
+  user
+}: MelbournePageProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar 
+        activeCity="Melbourne"
+        onCityChange={(city) => {
+          if (city === 'Melbourne') {
+            // Already on Melbourne page
+          }
+        }}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage || "melbourne"}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* City Submenu */}
+      <CitySubmenu 
+        onClose={() => {}} // Empty function since it's always shown
+        currentPage="melbourne"
+        onHomeClick={onHomeClick}
+        onMelbourneClick={() => {}} // Already on Melbourne page
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      {/* Hero Section - Full Width */}
+      <div 
+        className="relative w-full h-[85vh] bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url('https://images.unsplash.com/photo-1573639571368-065819727a52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx8fDE3NTczOTY3MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral')`
+        }}
+      >
+        <div className="absolute inset-x-0 top-0 bottom-0 flex items-center justify-start pl-8 md:pl-16 lg:pl-24">
+          <div className="text-left text-white px-4">
+            <motion.h1
+              className="font-poppins text-5xl md:text-6xl lg:text-7xl leading-tight mb-6"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, delay: 0.3 }}
+            >
+              <span className="font-light">Discover</span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-yellow-300 to-orange-400 bg-clip-text text-transparent">
+                Melbourne
+              </span>
+            </motion.h1>
+            
+            <motion.p
+              className="font-poppins text-xl leading-relaxed font-light mb-4 max-w-3xl"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.5 }}
+            >
+              Explore Melbourne's vibrant culture, world-class dining, and iconic attractions
+            </motion.p>
+            
+            <motion.p
+              className="font-poppins text-xl leading-relaxed font-normal mb-8 text-yellow-300"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.8, delay: 0.7 }}
+            >
+              Save up to 50% on all attractions
+            </motion.p>
+            
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.9 }}
+            >
+              <Button
+                withShine={true}
+                className="font-poppins font-semibold h-[70px] min-w-[280px] px-12 py-6 rounded-full text-white text-xl hover:scale-105 transition-transform duration-300"
+                style={{ backgroundColor: '#F95F62' }}
+                onClick={onCheckoutClick}
+              >
+                BUY A CARD
+              </Button>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main>
+        <div className="container mx-auto px-4 py-16">
+          {/* Features Grid */}
+          <motion.section
+            className="grid md:grid-cols-3 gap-8 py-16"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            {[
+              {
+                title: "50+ Attractions",
+                description: "Access to Melbourne's top museums, galleries, and experiences",
+                icon: "🏛️"
+              },
+              {
+                title: "Instant QR Access",
+                description: "Skip the lines with digital tickets on your phone",
+                icon: "📱"
+              },
+              {
+                title: "Save up to 50%",
+                description: "Exclusive discounts and special offers for cardholders",
+                icon: "💰"
+              }
+            ].map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                className="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
+                whileHover={{ scale: 1.02, y: -5 }}
+              >
+                <div className="text-4xl mb-4">{feature.icon}</div>
+                <h3 className="font-poppins text-xl font-semibold text-gray-900 mb-3">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </motion.section>
+        </div>
+      </main>
+
+      {/* Melbourne Attractions Section */}
+      <MelbourneAttractions />
+
+      {/* Melbourne Card Comparison Section */}
+      <MelbourneCardComparison onCheckoutClick={onCheckoutClick} />
+
+      {/* Melbourne Tour Overview Section */}
+      <MelbourneTourOverview />
+
+      {/* Melbourne Blogs Section */}
+      <MelbourneBlogs />
+
+      {/* Enhanced Testimonials Section */}
+      <EnhancedTestimonials />
+
+      {/* Mobile App Promotion Section */}
+      <MobileAppPromotion />
+
+      {/* Melbourne FAQ Section */}
+      <MelbourneFAQ />
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onContactUsClick={onContactUsClick}
+        currentPage="melbourne"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MelbourneTourOverview.tsx b/src/components/MelbourneTourOverview.tsx
new file mode 100644
index 0000000..6be0e79
--- /dev/null
+++ b/src/components/MelbourneTourOverview.tsx
@@ -0,0 +1,277 @@
+import { motion } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { CheckCircle, Users, MapPin, Calendar, Coffee, Camera, Clock, Zap, Volume2, Star } from 'lucide-react';
+
+export function MelbourneTourOverview() {
+  const whatsIncluded = [
+    {
+      icon: Coffee,
+      text: "Food and coffee tours in famous laneways",
+      color: "text-amber-600"
+    },
+    {
+      icon: MapPin,
+      text: "Transport via trams and walking tours",
+      color: "text-blue-600"
+    },
+    {
+      icon: Users,
+      text: "Local guides and cultural experiences",
+      color: "text-green-600"
+    },
+    {
+      icon: Zap,
+      text: "Skip-the-line access to major attractions",
+      color: "text-purple-600"
+    },
+    {
+      icon: Volume2,
+      text: "Audio guides and mobile app",
+      color: "text-indigo-600"
+    },
+    {
+      icon: Clock,
+      text: "Flexible timing and self-paced tours",
+      color: "text-rose-600"
+    }
+  ];
+
+  const tourHighlights = [
+    {
+      icon: Star,
+      text: "Experience the cultural capital's vibrant arts scene and hidden laneways",
+      color: "text-yellow-600"
+    },
+    {
+      icon: Coffee,
+      text: "Discover Melbourne's world-famous coffee culture and rooftop bars",
+      color: "text-amber-600"
+    },
+    {
+      icon: Camera,
+      text: "Capture stunning views from Eureka Skydeck and Royal Botanic Gardens",
+      color: "text-purple-600"
+    },
+    {
+      icon: Users,
+      text: "Enjoy food tours through Queen Victoria Market and ethnic quarters",
+      color: "text-green-600"
+    },
+    {
+      icon: MapPin,
+      text: "Explore sports culture at MCG and cultural sites in Federation Square",
+      color: "text-blue-600"
+    },
+    {
+      icon: Calendar,
+      text: "Access year-round events, festivals, and seasonal attractions",
+      color: "text-rose-600"
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-white via-gray-50/30 to-white relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-[0.02]">
+        <div className="absolute top-0 left-0 w-full h-full">
+          <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-primary/20 opacity-30"></div>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="mb-16"
+        >
+          <h2 className="heading-dynamic font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-8">
+            <span className="font-light">Melbourne</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Tour
+            </span>{' '}
+            <span className="font-normal">Overview</span>
+          </h2>
+        </motion.div>
+
+        {/* Main Content Grid */}
+        <div className="grid lg:grid-cols-2 gap-16 items-start">
+          {/* Left Content */}
+          <div className="space-y-12">
+            {/* Description */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              viewport={{ once: true }}
+            >
+              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
+                Melbourne is a must-visit cultural epicenter, and this spectacular experience unlocks 
+                your access around the city in one easy pass. Save over the cost of visiting Melbourne's 
+                landmarks, explore famous laneways and street art, enjoy world-class dining in hidden bars, 
+                and immerse yourself in the sports capital's vibrant atmosphere. From Royal Botanic Gardens 
+                to Federation Square, hotel pickup and drop-off all included.
+              </p>
+            </motion.div>
+
+            {/* What's Included */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              viewport={{ once: true }}
+              className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100"
+            >
+              <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-6">
+                What's included
+              </h3>
+              
+              <div className="grid md:grid-cols-2 gap-4">
+                {whatsIncluded.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
+                    viewport={{ once: true }}
+                    className="flex items-start gap-3 group"
+                  >
+                    <div className={`w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-gray-200 transition-colors duration-200`}>
+                      <item.icon className={`w-4 h-4 ${item.color}`} />
+                    </div>
+                    <span className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
+                      {item.text}
+                    </span>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Right Image */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="relative"
+          >
+            <div className="relative rounded-3xl overflow-hidden shadow-2xl">
+              <ImageWithFallback
+                src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                alt="Melbourne City Skyline"
+                className="w-full h-[400px] md:h-[500px] object-cover"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
+              
+              {/* Floating Badge */}
+              <div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-full px-4 py-2 shadow-lg">
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                  <span className="text-sm font-medium text-gray-900">Live Experience</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Tour Highlights - Full Width Below */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="mt-20"
+        >
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            {/* Left Image for Tour Highlights */}
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+              viewport={{ once: true }}
+              className="order-2 lg:order-1"
+            >
+              <div className="relative rounded-3xl overflow-hidden shadow-2xl">
+                <ImageWithFallback
+                  src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                  alt="Melbourne Tour Highlights"
+                  className="w-full h-[400px] md:h-[500px] object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-secondary/10"></div>
+                
+                {/* Floating Stats */}
+                <div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-2xl p-4 shadow-lg">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-gray-900">50+</div>
+                    <div className="text-xs text-gray-600">Attractions</div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Right Content - Tour Highlights */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.6 }}
+              viewport={{ once: true }}
+              className="order-1 lg:order-2"
+            >
+              <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
+                <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-8">
+                  Tour Highlights
+                </h3>
+                
+                <div className="space-y-6">
+                  {tourHighlights.map((highlight, index) => (
+                    <motion.div
+                      key={index}
+                      initial={{ opacity: 0, y: 20 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.4, delay: 0.7 + index * 0.1 }}
+                      viewport={{ once: true }}
+                      className="flex items-start gap-4 group"
+                    >
+                      <div className={`w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-gray-200 transition-all duration-200 group-hover:scale-110`}>
+                        <highlight.icon className={`w-4 h-4 ${highlight.color}`} />
+                      </div>
+                      <p className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
+                        {highlight.text}
+                      </p>
+                    </motion.div>
+                  ))}
+                </div>
+
+                {/* Call to Action in Tour Highlights */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: 1.3 }}
+                  viewport={{ once: true }}
+                  className="mt-8 pt-6 border-t border-gray-100"
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-sm text-gray-600 mb-1">Starting from</div>
+                      <div className="text-2xl font-bold text-gray-900">$89</div>
+                    </div>
+                    <motion.button
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-300"
+                    >
+                      View All Tours
+                    </motion.button>
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MobileAppPromotion.tsx b/src/components/MobileAppPromotion.tsx
new file mode 100644
index 0000000..9a44239
--- /dev/null
+++ b/src/components/MobileAppPromotion.tsx
@@ -0,0 +1,381 @@
+import { motion } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Download, Apple, Play } from 'lucide-react';
+
+export function MobileAppPromotion() {
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
+      <div className="container mx-auto px-4">
+        <div className="grid lg:grid-cols-2 gap-8 items-center">
+          {/* Left Content */}
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            {/* Badge */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+              viewport={{ once: true }}
+              className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full"
+            >
+              <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+              <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Mobile App
+              </span>
+            </motion.div>
+
+            {/* Heading */}
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              viewport={{ once: true }}
+              className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 leading-tight"
+            >
+              <span className="font-light">Access all your</span>{' '}
+              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                city cards
+              </span>{' '}
+              <span className="font-light">on your phone.</span>
+            </motion.h2>
+
+            {/* Description */}
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              viewport={{ once: true }}
+              className="text-xl text-gray-600 leading-relaxed"
+            >
+              Download the app to manage your city cards, keep track of attractions visited, and complete your urban adventures without missing a beat. Stay on track and make the most of every destination!
+            </motion.p>
+
+            {/* Get the App Section */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              viewport={{ once: true }}
+              className="space-y-4"
+            >
+              <h3 className="font-merchant text-xl font-semibold text-gray-900">
+                Get the App
+              </h3>
+              
+              {/* Download Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                {/* Google Play Button */}
+                <motion.a
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                  href="#"
+                  className="group relative bg-black text-white rounded-lg px-6 py-3 flex items-center gap-3 transition-all duration-300 hover:shadow-xl overflow-hidden"
+                >
+                  <div className="relative z-10 flex items-center gap-3">
+                    <Play className="w-8 h-8 text-white fill-current" />
+                    <div className="text-left">
+                      <div className="text-xs opacity-80">GET IT ON</div>
+                      <div className="text-lg font-semibold">Google Play</div>
+                    </div>
+                  </div>
+                  
+                  {/* Shine effect */}
+                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300">
+                    <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
+                  </div>
+                </motion.a>
+
+                {/* App Store Button */}
+                <motion.a
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                  href="#"
+                  className="group relative bg-black text-white rounded-lg px-6 py-3 flex items-center gap-3 transition-all duration-300 hover:shadow-xl overflow-hidden"
+                >
+                  <div className="relative z-10 flex items-center gap-3">
+                    <Apple className="w-8 h-8 text-white" />
+                    <div className="text-left">
+                      <div className="text-xs opacity-80">Download on the</div>
+                      <div className="text-lg font-semibold">App Store</div>
+                    </div>
+                  </div>
+                  
+                  {/* Shine effect */}
+                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300">
+                    <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
+                  </div>
+                </motion.a>
+              </div>
+            </motion.div>
+
+            {/* Features List */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+              viewport={{ once: true }}
+              className="grid sm:grid-cols-2 gap-4 pt-4"
+            >
+              {[
+                { icon: '📱', text: 'Offline access to all cards' },
+                { icon: '📍', text: 'GPS-enabled attraction finder' },
+                { icon: '🎫', text: 'Digital ticket storage' },
+                { icon: '📊', text: 'Track your adventures' }
+              ].map((feature, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.5, delay: 0.6 + (index * 0.1) }}
+                  viewport={{ once: true }}
+                  className="flex items-center gap-3 p-2"
+                >
+                  <span className="text-2xl">{feature.icon}</span>
+                  <span className="text-sm font-medium text-gray-700">{feature.text}</span>
+                </motion.div>
+              ))}
+            </motion.div>
+          </motion.div>
+
+          {/* Right Content - Phone Mockup */}
+          <motion.div
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="relative flex justify-center lg:justify-end"
+          >
+            {/* Phone Frame */}
+            <div className="relative">
+              {/* Phone Shadow */}
+              <div className="absolute inset-0 bg-black/20 blur-3xl transform translate-y-8 scale-95 rounded-3xl"></div>
+              
+              {/* Phone Container */}
+              <motion.div
+                initial={{ y: 20, scale: 0.9 }}
+                whileInView={{ y: 0, scale: 1 }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+                viewport={{ once: true }}
+                className="relative bg-black rounded-[3rem] p-3 shadow-2xl"
+              >
+                {/* Screen */}
+                <div className="bg-white rounded-[2.5rem] overflow-hidden w-72 h-[600px] relative">
+                  {/* Status Bar */}
+                  <div className="bg-black h-8 rounded-t-[2.5rem] relative">
+                    <div className="absolute inset-x-0 top-0 h-6 bg-black rounded-t-[2.5rem]"></div>
+                    <div className="absolute left-1/2 transform -translate-x-1/2 top-2 w-20 h-2 bg-black rounded-full"></div>
+                  </div>
+                  
+                  {/* App Content */}
+                  <div className="h-full bg-gray-50 relative overflow-hidden">
+                    {/* App Header */}
+                    <div className="bg-gradient-to-r from-primary to-secondary px-4 py-3 text-white">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <h3 className="font-merchant font-semibold text-sm">Melbourne CityCards</h3>
+                          <p className="text-xs opacity-90">5 attractions unlocked</p>
+                        </div>
+                        <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
+                          <span className="text-xs">👤</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Card Balance Banner */}
+                    <div className="bg-yellow-100 border-l-4 border-yellow-400 px-4 py-2">
+                      <p className="text-xs text-yellow-800">
+                        <span className="font-semibold">$89 saved</span> • 3 more attractions available
+                      </p>
+                    </div>
+
+                    {/* Attractions List */}
+                    <div className="flex-1 p-3 space-y-2 overflow-y-auto">
+                      {/* Attraction 1 */}
+                      <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.5, delay: 0.2 }}
+                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+                            <ImageWithFallback
+                              src="https://images.unsplash.com/photo-1512220567447-9ff58da12d87?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBtdXNldW0lMjBhdHRyYWN0aW9ufGVufDF8fHx8MTc1NzM5OTMyMnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                              alt="Melbourne Museum"
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-xs text-gray-900 truncate">Melbourne Museum</h4>
+                            <p className="text-xs text-gray-500">Natural History</p>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $8</span>
+                              <span className="text-xs text-gray-400">✓ Added</span>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+
+                      {/* Attraction 2 */}
+                      <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.5, delay: 0.3 }}
+                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+                            <ImageWithFallback
+                              src="https://images.unsplash.com/photo-1610186356191-880ceaa884f3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NTczOTkzMjV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                              alt="Melbourne Zoo"
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-xs text-gray-900 truncate">Melbourne Zoo</h4>
+                            <p className="text-xs text-gray-500">Wildlife & Animals</p>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $12</span>
+                              <span className="text-xs text-gray-400">✓ Added</span>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+
+                      {/* Attraction 3 */}
+                      <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.5, delay: 0.4 }}
+                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+                            <ImageWithFallback
+                              src="https://images.unsplash.com/photo-1735605918618-0193db0a30af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBnYXJkZW5zJTIwYm90YW5pY2FsfGVufDF8fHx8MTc1NzM5OTMyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                              alt="Botanic Gardens"
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-xs text-gray-900 truncate">Royal Botanic Gardens</h4>
+                            <p className="text-xs text-gray-500">Gardens & Nature</p>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $5</span>
+                              <span className="text-xs text-gray-400">✓ Added</span>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+
+                      {/* Attraction 4 - Available to Add */}
+                      <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.5, delay: 0.5 }}
+                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+                            <ImageWithFallback
+                              src="https://images.unsplash.com/photo-1554050640-3f0b16d9c7bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhcXVhcml1bSUyMG9jZWFufGVufDF8fHx8MTc1NzM5OTMzMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                              alt="SEA LIFE Aquarium"
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-xs text-gray-900 truncate">SEA LIFE Aquarium</h4>
+                            <p className="text-xs text-gray-500">Marine Life</p>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">Save $15</span>
+                              <motion.button
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                                className="text-xs bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded font-medium"
+                              >
+                                + Add
+                              </motion.button>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+
+                      {/* Progress Section */}
+                      <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.6 }}
+                        className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-3 mt-4"
+                      >
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-xs font-medium text-gray-700">Progress</span>
+                          <span className="text-xs text-gray-500">3 of 8 visited</span>
+                        </div>
+                        <div className="w-full bg-gray-200 rounded-full h-1.5">
+                          <motion.div
+                            initial={{ width: 0 }}
+                            animate={{ width: '37.5%' }}
+                            transition={{ duration: 1, delay: 0.8 }}
+                            className="bg-gradient-to-r from-primary to-secondary h-1.5 rounded-full"
+                          ></motion.div>
+                        </div>
+                      </motion.div>
+                    </div>
+
+                    {/* Bottom Navigation */}
+                    <div className="bg-white border-t border-gray-100 px-4 py-2">
+                      <div className="flex justify-around">
+                        <button className="flex flex-col items-center gap-1">
+                          <span className="text-primary">🏛️</span>
+                          <span className="text-xs text-primary font-medium">Cards</span>
+                        </button>
+                        <button className="flex flex-col items-center gap-1">
+                          <span className="text-gray-400">📍</span>
+                          <span className="text-xs text-gray-400">Map</span>
+                        </button>
+                        <button className="flex flex-col items-center gap-1">
+                          <span className="text-gray-400">⭐</span>
+                          <span className="text-xs text-gray-400">Saved</span>
+                        </button>
+                        <button className="flex flex-col items-center gap-1">
+                          <span className="text-gray-400">👤</span>
+                          <span className="text-xs text-gray-400">Profile</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+
+            {/* Floating Elements */}
+            <motion.div
+              animate={{ 
+                y: [20, -20, 20],
+                rotate: [0, -5, 0, 5, 0]
+              }}
+              transition={{ 
+                duration: 5, 
+                repeat: Infinity, 
+                ease: "easeInOut",
+                delay: 2
+              }}
+              className="absolute -bottom-8 -right-8 w-14 h-14 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl shadow-lg flex items-center justify-center text-white text-xl"
+            >
+              📍
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Background Decorations */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
+      <div className="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-secondary/5 to-primary/5 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MobileAppSection.tsx b/src/components/MobileAppSection.tsx
new file mode 100644
index 0000000..b4d3b91
--- /dev/null
+++ b/src/components/MobileAppSection.tsx
@@ -0,0 +1,642 @@
+import { ArrowRight, Smartphone, MapPin, Star, Clock, Users, Heart, Share2, Filter, Search } from 'lucide-react';
+import { motion } from 'motion/react';
+import imgFrame1597884939 from "figma:asset/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png";
+
+export function MobileAppSection() {
+  // Generate a realistic QR code pattern
+  const generateQRPattern = () => {
+    const size = 21; // Standard QR code size
+    const pattern = [];
+    
+    for (let i = 0; i < size * size; i++) {
+      // Create corner detection patterns
+      const row = Math.floor(i / size);
+      const col = i % size;
+      
+      // Corner squares (7x7)
+      const isCornerSquare = 
+        (row < 7 && col < 7) || // Top-left
+        (row < 7 && col >= 14) || // Top-right
+        (row >= 14 && col < 7); // Bottom-left
+      
+      // Finder patterns within corner squares
+      const isFinderPattern = isCornerSquare && (
+        (row === 0 || row === 6 || col === 0 || col === 6) ||
+        (row >= 2 && row <= 4 && col >= 2 && col <= 4)
+      );
+      
+      // Timing patterns
+      const isTimingPattern = (row === 6 && col >= 8 && col <= 12) || (col === 6 && row >= 8 && row <= 12);
+      
+      // Random data pattern for other areas
+      const isDataPattern = !isCornerSquare && !isTimingPattern && Math.random() > 0.45;
+      
+      pattern.push(isFinderPattern || isTimingPattern || isDataPattern);
+    }
+    
+    return pattern;
+  };
+
+  const qrPattern = generateQRPattern();
+
+  return (
+    <section className="bg-muted/30 relative overflow-hidden">
+      {/* Subtle Background Elements */}
+      <div className="absolute inset-0">
+        <div className="absolute top-1/3 left-1/6 w-64 h-64 bg-primary/3 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/2 right-1/6 w-48 h-48 bg-secondary/3 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="container mx-auto px-4 pt-4 relative z-10">
+        {/* Figma Layout Implementation */}
+        <motion.div
+          className="flex flex-col gap-16 lg:gap-20"
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          {/* Header Section - Following Figma Layout */}
+          <div className="flex flex-col lg:flex-row items-start justify-between gap-12 lg:gap-16">
+            {/* Left Side - Main Heading */}
+            <motion.div
+              className="flex-1 max-w-2xl"
+              initial={{ opacity: 0, x: -40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, ease: "easeOut" }}
+            >
+              <h1 className="font-merchant text-4xl lg:text-5xl xl:text-6xl leading-tight text-foreground">
+                <span className="font-normal">Access all your</span>{' '}
+                <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic">
+                  city cards
+                </span>
+                <br />
+                <span className="font-normal">on your</span>{' '}
+                <span className="font-semibold">phone.</span>
+              </h1>
+            </motion.div>
+
+            {/* Right Side - Description and Buttons */}
+            <motion.div
+              className="flex flex-col gap-8 w-full lg:w-[400px] xl:w-[450px]"
+              initial={{ opacity: 0, x: 40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, ease: "easeOut", delay: 0.1 }}
+            >
+              {/* Description Text */}
+              <p className="font-poppins text-lg text-muted-foreground leading-relaxed font-normal">
+                Download our mobile app and unlock instant access to premium city experiences across Australia.
+              </p>
+
+              {/* Download Buttons - Following Figma Layout */}
+              <div className="flex flex-col sm:flex-row gap-6">
+                {/* Android Download Button */}
+                <motion.button
+                  className="interactive-button relative flex items-center gap-3 bg-foreground text-background px-6 py-4 rounded-xl font-medium text-base hover:bg-foreground/90 transition-all duration-300 shadow-lg hover:shadow-xl flex-1 overflow-hidden group"
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {/* Continuous Shine Effect */}
+                  <div className="absolute inset-0 -top-px opacity-100">
+                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent transform -skew-x-12 animate-shine"></div>
+                  </div>
+                  
+                  {/* Google Play Logo */}
+                  <svg className="w-6 h-6 relative z-10" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
+                  </svg>
+                  <div className="text-left relative z-10">
+                    <div className="font-poppins text-xs opacity-80">Get it on</div>
+                    <div className="font-poppins font-semibold">Google Play</div>
+                  </div>
+                </motion.button>
+
+                {/* iOS Download Button */}
+                <motion.button
+                  className="interactive-button relative flex items-center gap-3 bg-foreground text-background px-6 py-4 rounded-xl font-medium text-base hover:bg-foreground/90 transition-all duration-300 shadow-lg hover:shadow-xl flex-1 overflow-hidden group"
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {/* Continuous Shine Effect */}
+                  <div className="absolute inset-0 -top-px opacity-100">
+                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent transform -skew-x-12 animate-shine"></div>
+                  </div>
+                  
+                  {/* Apple Logo */}
+                  <svg className="w-6 h-6 relative z-10" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+                  </svg>
+                  <div className="text-left relative z-10">
+                    <div className="font-poppins text-xs opacity-80">Download on the</div>
+                    <div className="font-poppins font-semibold">App Store</div>
+                  </div>
+                </motion.button>
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Mobile Mockups Section - Ultra-Realistic and Larger */}
+          <motion.div
+            className="relative w-full h-[400px] lg:h-[500px] rounded-3xl overflow-hidden shadow-2xl"
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
+            style={{
+              background: `url(${imgFrame1597884939}) center/cover`
+            }}
+          >
+            {/* Mobile Mockup 1 - Enhanced Main App Screen */}
+            <div className="absolute top-[-6rem] lg:top-[-7rem] right-[calc(50%-100px-8.25rem)] lg:right-[calc(50%-100px-10.25rem)]">
+              <motion.div
+                className="w-60 lg:w-64 xl:w-72 h-[420px] lg:h-[480px] xl:h-[540px] bg-white rounded-[2.5rem] shadow-2xl border-4 lg:border-8 border-gray-900 relative overflow-hidden"
+                initial={{ opacity: 0, y: -30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                whileHover={{ scale: 1.02, rotateY: 2 }}
+              >
+                {/* iPhone Status Bar */}
+                <div className="flex justify-between items-center px-6 py-3 bg-white">
+                  <div className="flex items-center gap-1">
+                    <span className="text-sm font-semibold text-black">9:41</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    {/* Signal bars */}
+                    <div className="flex gap-0.5">
+                      {[1, 2, 3, 4].map((bar) => (
+                        <div key={bar} className={`w-1 bg-black rounded-full ${bar === 1 ? 'h-1' : bar === 2 ? 'h-2' : bar === 3 ? 'h-3' : 'h-4'}`}></div>
+                      ))}
+                    </div>
+                    {/* WiFi */}
+                    <svg className="w-4 h-4 ml-1" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/>
+                    </svg>
+                    {/* Battery */}
+                    <div className="w-6 h-3 border border-black rounded-sm ml-1">
+                      <div className="w-4 h-1.5 bg-green-500 rounded-sm m-0.5"></div>
+                    </div>
+                    <div className="w-0.5 h-2 bg-black rounded-r-sm"></div>
+                  </div>
+                </div>
+                
+                {/* App Header */}
+                <div className="px-5 py-4 bg-gradient-to-r from-primary to-secondary">
+                  <div className="flex items-center justify-between text-white mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-white/20 rounded-xl flex items-center justify-center">
+                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                        </svg>
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-bold">CityCards</h3>
+                        <div className="text-xs text-white/70">Premium Active</div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="relative">
+                        <Search className="w-5 h-5 text-white/80" />
+                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-orange-400 rounded-full"></div>
+                      </div>
+                      <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
+                        <div className="w-4 h-4 bg-white rounded-full"></div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  {/* Location */}
+                  <div className="flex items-center justify-between text-white/90">
+                    <div className="flex items-center gap-2">
+                      <MapPin className="w-4 h-4" />
+                      <span className="text-sm font-medium">Sydney, NSW</span>
+                      <div className="w-1 h-1 bg-white/60 rounded-full"></div>
+                      <span className="text-xs">22°C ☀️</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs bg-white/20 px-3 py-1.5 rounded-full">
+                      <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                      <span>3 active</span>
+                    </div>
+                  </div>
+                </div>
+                
+                {/* App Content */}
+                <div className="flex-1 overflow-hidden">
+                  {/* Today's Deal Banner */}
+                  <div className="mx-5 my-4 bg-gradient-to-r from-purple-100 via-blue-100 to-indigo-100 rounded-xl p-4 border border-purple-200">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-bold text-purple-700 bg-purple-200 px-2 py-1 rounded-full">TODAY ONLY</span>
+                        <div className="flex items-center gap-1 text-xs text-purple-600">
+                          <Clock className="w-3 h-3" />
+                          <span>8h left</span>
+                        </div>
+                      </div>
+                      <Heart className="w-4 h-4 text-red-400" />
+                    </div>
+                    <h4 className="font-bold text-gray-900 text-sm mb-1">Sydney Explorer Pass</h4>
+                    <p className="text-xs text-gray-700 mb-3">Visit 3+ attractions & get 40% off</p>
+                    <div className="flex gap-2">
+                      <button className="bg-purple-600 text-white px-3 py-1.5 rounded-lg text-xs font-semibold">
+                        Activate
+                      </button>
+                      <button className="border border-purple-300 text-purple-700 px-3 py-1.5 rounded-lg text-xs font-medium">
+                        Details
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Stats Bar */}
+                  <div className="mx-5 mb-4">
+                    <div className="bg-gray-50 rounded-xl p-3 border border-gray-100">
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center gap-2">
+                          <div className="w-5 h-5 bg-green-100 rounded-full flex items-center justify-center">
+                            <span className="text-xs font-bold text-green-700">3</span>
+                          </div>
+                          <span className="text-gray-700 text-xs">Passes used today</span>
+                        </div>
+                        <div className="text-right">
+                          <div className="font-bold text-green-600 text-sm">$127</div>
+                          <div className="text-xs text-gray-500">saved</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Attraction Cards */}
+                  <div className="mx-5 space-y-3">
+                    {/* Opera House */}
+                    <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-sm relative">
+                      <div className="absolute top-2 right-2 bg-yellow-100 text-yellow-600 text-xs font-bold px-2 py-1 rounded-full">
+                        PREMIUM
+                      </div>
+                      <div className="flex gap-3 mb-2">
+                        <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                          <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                          </svg>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <h4 className="font-bold text-gray-900 text-sm">Sydney Opera House</h4>
+                              <div className="flex items-center gap-1 text-xs text-gray-600 mt-0.5">
+                                <Star className="w-3 h-3 text-yellow-400 fill-current" />
+                                <span className="font-medium">4.8</span>
+                                <span className="text-gray-400">(2.4k)</span>
+                                <span className="mx-1">•</span>
+                                <MapPin className="w-3 h-3 text-blue-500" />
+                                <span>2.3km</span>
+                              </div>
+                            </div>
+                            <div className="flex gap-1">
+                              <Heart className="w-3 h-3 text-gray-400" />
+                              <Share2 className="w-3 h-3 text-gray-400" />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1.5 mt-2 text-xs">
+                            <div className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full font-medium">
+                              Architecture
+                            </div>
+                            <div className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">
+                              Cultural
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="flex items-center justify-between pt-2 border-t border-gray-100">
+                        <div className="flex items-center gap-2">
+                          <div>
+                            <div className="flex items-center gap-1">
+                              <span className="text-base font-bold text-gray-900">$45</span>
+                              <span className="text-xs text-gray-500 line-through">$75</span>
+                            </div>
+                            <div className="text-xs text-green-600 font-medium">Save $30</div>
+                          </div>
+                          <div className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full border border-green-200">
+                            40% OFF
+                          </div>
+                        </div>
+                        <button className="bg-primary text-white px-3 py-1.5 rounded-lg font-semibold text-xs">
+                          Use Pass
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Harbour Bridge */}
+                    <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-sm relative">
+                      <div className="absolute top-2 right-2 bg-blue-100 text-blue-600 text-xs font-bold px-2 py-1 rounded-full">
+                        POPULAR
+                      </div>
+                      <div className="flex gap-3 mb-2">
+                        <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-600 rounded-lg flex items-center justify-center">
+                          <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                          </svg>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <h4 className="font-bold text-gray-900 text-sm">Harbour Bridge Climb</h4>
+                              <div className="flex items-center gap-1 text-xs text-gray-600 mt-0.5">
+                                <Star className="w-3 h-3 text-yellow-400 fill-current" />
+                                <span className="font-medium">4.9</span>
+                                <span className="text-gray-400">(1.8k)</span>
+                                <span className="mx-1">•</span>
+                                <MapPin className="w-3 h-3 text-blue-500" />
+                                <span>1.8km</span>
+                              </div>
+                            </div>
+                            <div className="flex gap-1">
+                              <Heart className="w-3 h-3 text-red-400 fill-current" />
+                              <Share2 className="w-3 h-3 text-gray-400" />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1.5 mt-2 text-xs">
+                            <div className="bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">
+                              Adventure
+                            </div>
+                            <div className="bg-red-100 text-red-700 px-2 py-0.5 rounded-full font-medium">
+                              Iconic
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="flex items-center justify-between pt-2 border-t border-gray-100">
+                        <div className="flex items-center gap-2">
+                          <div>
+                            <div className="flex items-center gap-1">
+                              <span className="text-base font-bold text-gray-900">$159</span>
+                              <span className="text-xs text-gray-500 line-through">$289</span>
+                            </div>
+                            <div className="text-xs text-green-600 font-medium">Save $130</div>
+                          </div>
+                          <div className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full border border-blue-200">
+                            45% OFF
+                          </div>
+                        </div>
+                        <button className="bg-primary text-white px-3 py-1.5 rounded-lg font-semibold text-xs">
+                          Use Pass
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Botanic Gardens */}
+                    <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-sm relative">
+                      <div className="absolute top-2 right-2 bg-emerald-100 text-emerald-600 text-xs font-bold px-2 py-1 rounded-full">
+                        FREE
+                      </div>
+                      <div className="flex gap-3 mb-2">
+                        <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg flex items-center justify-center">
+                          <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/>
+                          </svg>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <h4 className="font-bold text-gray-900 text-sm">Royal Botanic Gardens</h4>
+                              <div className="flex items-center gap-1 text-xs text-gray-600 mt-0.5">
+                                <Star className="w-3 h-3 text-yellow-400 fill-current" />
+                                <span className="font-medium">4.7</span>
+                                <span className="text-gray-400">(956)</span>
+                                <span className="mx-1">•</span>
+                                <MapPin className="w-3 h-3 text-blue-500" />
+                                <span>1.2km</span>
+                              </div>
+                            </div>
+                            <div className="flex gap-1">
+                              <Heart className="w-3 h-3 text-gray-400" />
+                              <Share2 className="w-3 h-3 text-gray-400" />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1.5 mt-2 text-xs">
+                            <div className="bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">
+                              Nature
+                            </div>
+                            <div className="bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full font-medium">
+                              Family
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="flex items-center justify-between pt-2 border-t border-gray-100">
+                        <div className="flex items-center gap-2">
+                          <div>
+                            <span className="text-base font-bold text-green-600">FREE</span>
+                            <div className="text-xs text-green-600 font-medium">Included</div>
+                          </div>
+                        </div>
+                        <button className="bg-green-600 text-white px-3 py-1.5 rounded-lg font-semibold text-xs">
+                          Visit Now
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Bottom Navigation */}
+                <div className="border-t border-gray-100 bg-white/95 backdrop-blur-sm">
+                  <div className="flex items-center justify-around py-3">
+                    {[
+                      { 
+                        icon: (
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+                          </svg>
+                        ), 
+                        label: "Home", 
+                        active: true,
+                        badge: null
+                      },
+                      { 
+                        icon: (
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+                          </svg>
+                        ), 
+                        label: "Map", 
+                        active: false,
+                        badge: "3"
+                      },
+                      { 
+                        icon: (
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M22 10v6c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2v-8c0-1.11.89-2 2-2h14l2-2v6zm-9 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+                          </svg>
+                        ), 
+                        label: "Passes", 
+                        active: false,
+                        badge: null
+                      },
+                      { 
+                        icon: (
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+                          </svg>
+                        ), 
+                        label: "Activity", 
+                        active: false,
+                        badge: null
+                      },
+                      { 
+                        icon: (
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                          </svg>
+                        ), 
+                        label: "Profile", 
+                        active: false,
+                        badge: null
+                      }
+                    ].map((item, index) => (
+                      <div key={index} className={`flex flex-col items-center justify-center gap-1 py-1 relative ${item.active ? 'text-primary' : 'text-gray-500'}`}>
+                        <div className="relative">
+                          {item.icon}
+                          {item.badge && (
+                            <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
+                              {item.badge}
+                            </div>
+                          )}
+                        </div>
+                        <span className={`text-xs ${item.active ? 'font-semibold' : 'font-medium'}`}>
+                          {item.label}
+                        </span>
+                        {item.active && (
+                          <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4 h-0.5 bg-primary rounded-full"></div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+
+            {/* Mobile Mockup 2 - Map View */}
+            <div className="absolute bottom-[-6rem] lg:bottom-[-7rem] left-[calc(50%-100px-8.25rem)] lg:left-[calc(50%-100px-10.25rem)]">
+              <motion.div
+                className="w-56 lg:w-60 xl:w-64 h-[380px] lg:h-[440px] xl:h-[480px] bg-white rounded-[2.5rem] shadow-2xl border-4 lg:border-8 border-gray-900 relative overflow-hidden"
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.6 }}
+                whileHover={{ scale: 1.02, rotateY: -2 }}
+              >
+                {/* Status Bar */}
+                <div className="flex justify-between items-center px-6 py-3 bg-white">
+                  <div className="flex items-center gap-1">
+                    <span className="text-sm font-semibold text-black">9:41</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <div className="flex gap-0.5">
+                      {[1, 2, 3, 4].map((bar) => (
+                        <div key={bar} className={`w-1 bg-black rounded-full ${bar === 1 ? 'h-1' : bar === 2 ? 'h-2' : bar === 3 ? 'h-3' : 'h-4'}`}></div>
+                      ))}
+                    </div>
+                    <svg className="w-4 h-4 ml-1" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/>
+                    </svg>
+                    <div className="w-6 h-3 border border-black rounded-sm ml-1">
+                      <div className="w-4 h-1.5 bg-green-500 rounded-sm m-0.5"></div>
+                    </div>
+                    <div className="w-0.5 h-2 bg-black rounded-r-sm"></div>
+                  </div>
+                </div>
+
+                {/* Map Header */}
+                <div className="px-5 py-3 bg-white border-b border-gray-100">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <button className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center">
+                        <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>
+                      </button>
+                      <div>
+                        <h3 className="font-bold text-gray-900">Explore Sydney</h3>
+                        <div className="text-xs text-gray-500">3 nearby attractions</div>
+                      </div>
+                    </div>
+                    <button className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
+                      <Filter className="w-4 h-4 text-primary" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Map Content */}
+                <div className="flex-1 bg-gradient-to-br from-green-100 to-blue-100 relative overflow-hidden">
+                  {/* Simplified Map Pattern */}
+                  <div className="absolute inset-0 opacity-20">
+                    <div className="w-full h-full bg-gradient-to-br from-blue-200 via-green-200 to-yellow-200"></div>
+                    {/* Street lines */}
+                    <div className="absolute top-1/4 left-0 right-0 h-px bg-gray-400 opacity-30"></div>
+                    <div className="absolute top-1/2 left-0 right-0 h-px bg-gray-400 opacity-40"></div>
+                    <div className="absolute top-3/4 left-0 right-0 h-px bg-gray-400 opacity-30"></div>
+                    <div className="absolute left-1/4 top-0 bottom-0 w-px bg-gray-400 opacity-30"></div>
+                    <div className="absolute left-1/2 top-0 bottom-0 w-px bg-gray-400 opacity-40"></div>
+                    <div className="absolute left-3/4 top-0 bottom-0 w-px bg-gray-400 opacity-30"></div>
+                  </div>
+
+                  {/* Location Pins */}
+                  <div className="absolute top-8 left-8 w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
+                  <div className="absolute top-16 right-12 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
+                  <div className="absolute bottom-20 left-12 w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+                  <div className="absolute bottom-12 right-8 w-3 h-3 bg-purple-500 rounded-full animate-pulse"></div>
+
+                  {/* Current Location */}
+                  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                    <div className="relative">
+                      <div className="w-6 h-6 bg-blue-600 rounded-full border-4 border-white shadow-lg animate-pulse"></div>
+                      <div className="absolute inset-0 w-6 h-6 bg-blue-600 rounded-full animate-ping opacity-20"></div>
+                    </div>
+                  </div>
+
+                  {/* Route Line */}
+                  <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <path 
+                      d="M20,30 Q40,20 60,40 T80,70" 
+                      stroke="#6366f1" 
+                      strokeWidth="2" 
+                      fill="none" 
+                      strokeDasharray="5,5"
+                      className="animate-pulse"
+                    />
+                  </svg>
+                </div>
+
+                {/* Bottom Card */}
+                <div className="absolute bottom-4 left-4 right-4 bg-white rounded-xl p-3 shadow-lg border border-gray-100">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                      <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                      </svg>
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-bold text-gray-900 text-sm">Sydney Opera House</h4>
+                      <div className="flex items-center gap-1 text-xs text-gray-600">
+                        <MapPin className="w-3 h-3 text-blue-500" />
+                        <span>2.3km away • 5 min walk</span>
+                      </div>
+                    </div>
+                    <button className="bg-primary text-white px-3 py-1.5 rounded-lg font-semibold text-xs">
+                      Go
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..6e4e969
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,666 @@
+import { useState, useEffect, useRef, forwardRef } from 'react';
+import { Menu, X, ShoppingBag, ChevronDown, Globe, User, Settings, LogOut } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import Frame1597884853 from '../imports/Frame1597884853';
+import { Button } from './ui/button';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { CTAButton } from './CTAButton';
+import logoImage from '../assets/cit-logo.png';
+
+interface NavbarProps {
+  activeCity: string;
+  onCityChange: (city: string) => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick?: () => void;
+  onHomeClick?: () => void;
+  onAttractionsClick?: () => void;
+  onBlogsClick?: () => void;
+  onHowItWorksClick?: () => void;
+  onFAQClick?: () => void;
+  onPrivacyPolicyClick?: () => void;
+  onAboutUsClick?: () => void;
+  onProfileClick?: () => void;
+  onCityCardsClick?: () => void;
+  onMagicItineraryClick?: () => void;
+  onPostCardsClick?: () => void;
+  onOffersClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage?: 'home' | 'signin' | 'passes' | 'attractions' | 'checkout' | 'blogs' | 'how-it-works' | 'faq' | 'privacy-policy' | 'about-us' | 'melbourne' | 'profile' | 'citycards' | 'magic-itinerary' | 'postcards' | 'offers' | 'esims' | 'hotel-discounts';
+  isUserSignedIn?: boolean;
+  user?: { email: string; name: string } | null;
+}
+
+interface DropdownItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action?: () => void;
+  badge?: string | number;
+}
+
+interface CartItem {
+  id: string;
+  name: string;
+  price: string;
+  image?: string;
+  quantity: number;
+}
+
+interface DropdownProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  items: DropdownItem[];
+  trigger: React.ReactNode;
+  title?: string;
+  className?: string;
+}
+
+export default function Navbar({
+  activeCity,
+  onCityChange,
+  onSignInClick,
+  onSignOutClick,
+  onPassesClick,
+  onCheckoutClick,
+  onHomeClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage = 'home',
+  isUserSignedIn = false,
+  user
+}: NavbarProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
+  const [activeCartDropdown, setActiveCartDropdown] = useState(false);
+  const [activeUserDropdown, setActiveUserDropdown] = useState(false);
+  const [activeProductsDropdown, setActiveProductsDropdown] = useState(false);
+  
+  const languageRef = useRef<HTMLDivElement>(null);
+  const cartRef = useRef<HTMLDivElement>(null);
+  const userRef = useRef<HTMLDivElement>(null);
+  const productsRef = useRef<HTMLDivElement>(null);
+
+  // Languages available
+  const languages: DropdownItem[] = [
+    { id: 'en', label: 'English', icon: <span className="text-base">🇺🇸</span> },
+    { id: 'es', label: 'Español', icon: <span className="text-base">🇪🇸</span> },
+    { id: 'fr', label: 'Français', icon: <span className="text-base">🇫🇷</span> },
+    { id: 'it', label: 'Italiano', icon: <span className="text-base">🇮🇹</span> },
+  ];
+
+  // Products dropdown items
+  const productsItems: DropdownItem[] = [
+    { 
+      id: 'citycards', 
+      label: 'CityCards', 
+      action: onCityCardsClick 
+    },
+    { 
+      id: 'magic-itinerary', 
+      label: 'Magic Itinerary', 
+      action: onMagicItineraryClick 
+    },
+    { 
+      id: 'postcards', 
+      label: 'Post Cards', 
+      action: onPostCardsClick 
+    },
+    { 
+      id: 'offers', 
+      label: 'Offers', 
+      action: onOffersClick 
+    },
+    { 
+      id: 'esims', 
+      label: 'eSIMs', 
+      action: onEsimsClick 
+    }
+  ];
+
+  // Mock cart items
+  const cartItems: CartItem[] = [
+    { id: '1', name: 'Sydney 2-Day Pass', price: '$89', quantity: 1 },
+    { id: '2', name: 'Melbourne Premium Pass', price: '$129', quantity: 1 },
+  ];
+
+  // Section IDs for navigation
+  const sectionIds = [
+    'hero-section',
+    'why-choose-section', 
+    'variety-adventures-section',
+    'how-it-works-section',
+    'magic-itinerary-section',
+    'book-attraction-section',
+    'custom-postcards-section',
+    'upcoming-cities-section',
+    'trust-section',
+    'mobile-app-section'
+  ];
+
+  const scrollToSection = (index: number) => {
+    const sectionId = sectionIds[index];
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+    setIsMobileMenuOpen(false);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  // Detect scroll for navbar styling
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY > 20;
+      setIsScrolled(scrolled);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Add a small delay to prevent immediate closure when toggle is clicked
+      setTimeout(() => {
+        if (languageRef.current && !languageRef.current.contains(event.target as Node)) {
+          setActiveLanguageDropdown(false);
+        }
+        if (cartRef.current && !cartRef.current.contains(event.target as Node)) {
+          setActiveCartDropdown(false);
+        }
+        if (userRef.current && !userRef.current.contains(event.target as Node)) {
+          setActiveUserDropdown(false);
+        }
+        if (productsRef.current && !productsRef.current.contains(event.target as Node)) {
+          setActiveProductsDropdown(false);
+        }
+      }, 10);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleNavClick = (action: string) => {
+    switch (action) {
+      case 'about':
+        onAboutUsClick?.();
+        break;
+      case 'attractions':
+        onAttractionsClick?.();
+        break;
+      case 'card':
+        onPassesClick?.();
+        break;
+      default:
+        break;
+    }
+    closeMobileMenu();
+  };
+
+  const isNavItemActive = (action: string) => {
+    if (action === 'about') {
+      return currentPage === 'about-us';
+    }
+    return currentPage === action;
+  };
+
+  // Calculate cart total
+  const cartTotal = cartItems.reduce((total, item) => {
+    const price = parseFloat(item.price.replace('$', ''));
+    return total + (price * item.quantity);
+  }, 0);
+
+  // Dropdown component with proper ref forwarding and glassmorphism
+  const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(({ 
+    isOpen, 
+    onToggle, 
+    items, 
+    trigger, 
+    title,
+    className = "" 
+  }, ref) => (
+    <div ref={ref} className={`relative ${className}`} style={{ height: 'auto', minHeight: 'auto' }}>
+      <motion.button
+        onClick={onToggle}
+        className="relative"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        {trigger}
+      </motion.button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+            className="absolute top-full right-0 mt-2 bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-white/20 min-w-[280px] max-w-[320px] overflow-hidden z-50"
+            style={{ 
+              position: 'absolute',
+              top: '100%',
+              right: '0',
+              marginTop: '0.5rem'
+            }}
+          >
+            {title && (
+              <div className="px-5 py-4 border-b border-gray-100/50">
+                <h3 className="font-merchant font-semibold text-gray-900 text-base">{title}</h3>
+              </div>
+            )}
+            
+            <div className="py-3 px-2">
+              {items.map((item, index) => (
+                <motion.button
+                  key={item.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    
+                    // Handle action first
+                    if (item.action && item.id !== 'total') {
+                      item.action();
+                    }
+                    
+                    // Only close dropdown for actionable items (checkout and regular cart items)
+                    if (item.id === 'checkout' || (item.id !== 'total' && !item.action)) {
+                      setTimeout(() => onToggle(), 100);
+                    }
+                  }}
+                  className={`w-full flex items-center justify-between text-left transition-colors duration-200 ${
+                    item.id === 'checkout' 
+                      ? 'bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium rounded-lg px-4 py-2.5 mb-1 mt-2' 
+                      : item.id === 'total'
+                      ? 'cursor-default font-semibold border-t border-gray-100/50 pt-4 px-3 py-2'
+                      : 'hover:bg-gray-50/80 px-3 py-2.5 rounded-md'
+                  }`}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.05 }}
+                  disabled={item.id === 'total'}
+                >
+                  <div className="flex items-center space-x-3">
+                    {item.icon}
+                    <span className={`text-sm font-medium ${
+                      item.id === 'checkout' ? 'text-white' : 
+                      item.id === 'total' ? 'text-gray-900' : 'text-gray-700'
+                    }`}>{item.label}</span>
+                  </div>
+                  {item.badge && (
+                    <span className="bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">
+                      {item.badge}
+                    </span>
+                  )}
+                </motion.button>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  ));
+
+  // Set display name for debugging
+  Dropdown.displayName = 'Dropdown';
+
+  return (
+    <>
+      {/* Desktop Navbar - Enhanced Glassmorphism */}
+      <motion.nav 
+        className="fixed top-6 left-0 right-0 z-50 hidden lg:block"
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
+      >
+        <div className="container mx-auto px-4">
+          <motion.div 
+            className={`w-full transition-all duration-500 ease-out rounded-full px-8 py-4 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'
+            }`}
+            initial={{ scale: 0.95, opacity: 0, y: 0 }}
+            animate={{ 
+              scale: isScrolled ? 0.98 : 1, 
+              opacity: 1,
+              y: isScrolled ? 2 : 0
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
+            <div className="flex items-center justify-between">
+              {/* Logo */}
+              <motion.div 
+                className="flex items-center cursor-pointer flex-shrink-0"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => onHomeClick?.()}
+              >
+                <ImageWithFallback
+                  src={logoImage}
+                  alt="CityCards Logo"
+                  className="h-10 w-auto"
+                />
+              </motion.div>
+
+              {/* Navigation Links - Centered */}
+              <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-[51px]">
+                {[
+                  { label: 'About Us', action: 'about' },
+                  { label: 'Your Card', action: 'card' }
+                ].map((item) => (
+                  <motion.button
+                    key={item.action}
+                    onClick={() => handleNavClick(item.action)}
+                    className={`relative px-0 py-2 text-base font-medium transition-all duration-200 whitespace-nowrap group capitalize ${
+                      isNavItemActive(item.action) 
+                        ? 'text-primary' 
+                        : 'text-gray-700 hover:text-gray-900'
+                    }`}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    {item.label}
+                    
+                    {/* Active indicator */}
+                    <motion.div 
+                      className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-secondary rounded-full"
+                      initial={{ width: 0 }}
+                      animate={{ 
+                        width: isNavItemActive(item.action) ? "100%" : 0,
+                        opacity: isNavItemActive(item.action) ? 1 : 0
+                      }}
+                      whileHover={{ 
+                        width: "100%",
+                        opacity: 1
+                      }}
+                      transition={{ duration: 0.2 }}
+                    />
+                    
+                    {/* Hover background */}
+                    <motion.div
+                      className="absolute inset-0 bg-gray-100/50 backdrop-blur-sm rounded-lg -z-10"
+                      initial={{ scale: 0, opacity: 0 }}
+                      whileHover={{ scale: 1, opacity: 0.5 }}
+                      transition={{ duration: 0.2 }}
+                    />
+                  </motion.button>
+                ))}
+
+                {/* Our Products Dropdown */}
+                <button
+                  onClick={onCityCardsClick}
+                  className="flex items-center 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>Our Products</span>
+                </button>
+              </div>
+
+              {/* Right Section */}
+              <div className="flex items-center gap-5">
+                {/* Language Dropdown */}
+                <Dropdown
+                  ref={languageRef}
+                  isOpen={activeLanguageDropdown}
+                  onToggle={() => setActiveLanguageDropdown(!activeLanguageDropdown)}
+                  items={languages}
+                  title="Select Language"
+                  trigger={
+                    <div className="flex items-center space-x-1.5 text-gray-700 hover:text-gray-900 text-base font-medium transition-colors duration-200 cursor-pointer rounded-lg hover:bg-gray-50/50 uppercase px-2 py-1">
+                      <Globe className="w-4 h-4" />
+                      <span>ENG</span>
+                      <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${activeLanguageDropdown ? 'rotate-180' : ''}`} />
+                    </div>
+                  }
+                />
+
+                {/* Shopping Cart */}
+                <Dropdown
+                  ref={cartRef}
+                  isOpen={activeCartDropdown}
+                  onToggle={() => setActiveCartDropdown(prev => !prev)}
+                  items={[
+                    ...cartItems.map(item => ({
+                      id: item.id,
+                      label: `${item.name} - ${item.price}`,
+                      badge: `${item.quantity}x`
+                    })),
+                    { 
+                      id: 'total', 
+                      label: `Total: ${cartTotal.toFixed(2)}`,
+                      icon: <ShoppingBag className="w-4 h-4" />
+                    },
+                    { 
+                      id: 'checkout', 
+                      label: 'Proceed to Checkout',
+                      action: onCheckoutClick
+                    }
+                  ]}
+                  title="Shopping Cart"
+                  trigger={
+                    <div className="relative text-gray-700 hover:text-gray-900 transition-colors duration-200 rounded-lg hover:bg-gray-50/50 cursor-pointer p-2">
+                      <ShoppingBag className="w-6 h-6" />
+                      <motion.div 
+                        className="absolute -top-1 -right-1 w-5 h-5 bg-primary rounded-full flex items-center justify-center"
+                        animate={{ scale: [1, 1.1, 1] }}
+                        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+                      >
+                        <span className="text-xs text-primary-foreground font-bold">{cartItems.length}</span>
+                      </motion.div>
+                    </div>
+                  }
+                />
+
+                {/* City Card Button */}
+                <div className="flex items-center gap-3">
+                  <div className="relative">
+                    <CTAButton
+                      user={user}
+                      onClick={user ? () => setActiveUserDropdown(prev => !prev) : (onSignInClick || (() => {}))}
+                      className="hover:scale-105 transition-transform duration-200"
+                    />
+
+                    {/* User Profile Dropdown attached to CTA Button */}
+                    {isUserSignedIn && user && (
+                      <Dropdown
+                        ref={userRef}
+                        isOpen={activeUserDropdown}
+                        onToggle={() => setActiveUserDropdown(prev => !prev)}
+                        items={[
+                          { 
+                            id: 'profile', 
+                            label: 'My Profile',
+                            icon: <User className="w-4 h-4" />,
+                            action: onProfileClick
+                          },
+                          { 
+                            id: 'settings', 
+                            label: 'Settings',
+                            icon: <Settings className="w-4 h-4" />
+                          },
+                          { 
+                            id: 'logout', 
+                            label: 'Sign Out',
+                            icon: <LogOut className="w-4 h-4" />,
+                            action: onSignOutClick
+                          }
+                        ]}
+                        title="Account"
+                        trigger={null}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.nav>
+
+      {/* Mobile Navbar - Enhanced Glassmorphism */}
+      <nav className="fixed top-0 w-full z-50 lg:hidden">
+        <div className={`transition-all duration-500 ease-out border-b shadow-sm ${
+          isScrolled 
+            ? 'bg-white/85 backdrop-blur-2xl border-white/40 shadow-black/5' 
+            : 'bg-white/70 backdrop-blur-3xl border-white/50 shadow-black/10'
+        }`}>
+          <div className="container mx-auto px-4">
+            <div className="flex justify-between items-center h-16">
+              {/* Mobile Logo */}
+              <motion.div 
+                className="flex items-center cursor-pointer"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => onHomeClick?.()}
+              >
+                <ImageWithFallback
+                  src={logoImage}
+                  alt="CityCards Logo"
+                  className="h-10 w-auto"
+                />
+              </motion.div>
+
+              {/* Mobile Actions */}
+              <div className="flex items-center space-x-2">
+                {/* Mobile Cart */}
+                <motion.button 
+                  className="relative text-gray-700 hover:text-gray-900 p-2 transition-colors duration-200 rounded-lg hover:bg-gray-50/50"
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  onClick={() => onCheckoutClick?.()}
+                >
+                  <ShoppingBag className="w-6 h-6" />
+                  <div className="absolute -top-1 -right-1 w-5 h-5 bg-primary rounded-full flex items-center justify-center">
+                    <span className="text-xs text-primary-foreground font-bold">{cartItems.length}</span>
+                  </div>
+                </motion.button>
+
+                {/* Mobile menu button */}
+                <motion.button
+                  onClick={() => setIsMobileMenuOpen(true)}
+                  className="inline-flex items-center justify-center p-2 rounded-lg text-gray-700 hover:text-gray-900 hover:bg-gray-100/50 transition-colors duration-200"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Menu className="h-6 w-6" />
+                </motion.button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Menu Overlay - Enhanced Glassmorphism */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="fixed inset-0 bg-black/70 backdrop-blur-lg z-50 lg:hidden"
+              onClick={closeMobileMenu}
+            />
+            <motion.div
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+              className="fixed top-0 right-0 h-full w-80 bg-white/95 backdrop-blur-2xl shadow-2xl z-50 lg:hidden overflow-y-auto"
+            >
+              <div className="flex items-center justify-between p-6 border-b border-gray-200/50">
+                <h2 className="text-xl font-semibold text-gray-900">Menu</h2>
+                <motion.button
+                  onClick={closeMobileMenu}
+                  className="p-2 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 transition-colors duration-200"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <X className="h-6 w-6" />
+                </motion.button>
+              </div>
+              
+              <div className="p-6 space-y-6">
+                {/* Mobile Navigation Links */}
+                <div className="space-y-4">
+                  {[
+                    { label: 'About Us', action: 'about' },
+                    { label: 'Cities', action: 'cities' },
+                    { label: 'Attractions', action: 'attractions' },
+                    { label: 'Your Card', action: 'card' },
+                    { label: 'Deals', action: 'offer' }
+                  ].map((item) => (
+                    <motion.button
+                      key={item.action}
+                      onClick={() => handleNavClick(item.action)}
+                      className={`w-full flex items-center justify-between py-3 px-4 rounded-lg text-left transition-colors duration-200 ${
+                        isNavItemActive(item.action)
+                          ? 'bg-primary/10 text-primary font-medium'
+                          : 'text-gray-700 hover:bg-gray-100/70 hover:text-gray-900'
+                      }`}
+                      whileHover={{ x: 4 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <span className="text-base">{item.label}</span>
+                    </motion.button>
+                  ))}
+                </div>
+
+                {/* Mobile Our Products Section */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold text-gray-900 px-4">Our Products</h3>
+                  {productsItems.map((item) => (
+                    <motion.button
+                      key={item.id}
+                      onClick={() => {
+                        item.action?.();
+                        closeMobileMenu();
+                      }}
+                      className="w-full flex items-center justify-between py-3 px-4 rounded-lg text-left transition-colors duration-200 text-gray-700 hover:bg-gray-100/70 hover:text-gray-900"
+                      whileHover={{ x: 4 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <span className="text-base">{item.label}</span>
+                    </motion.button>
+                  ))}
+                </div>
+
+                {/* Mobile CTA Button */}
+                <Button
+                  onClick={() => {
+                    onSignInClick();
+                    closeMobileMenu();
+                  }}
+                  className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3"
+                >
+                  GET A CITY CARD
+                </Button>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/NewsletterSection.tsx b/src/components/NewsletterSection.tsx
new file mode 100644
index 0000000..6d4370d
--- /dev/null
+++ b/src/components/NewsletterSection.tsx
@@ -0,0 +1,181 @@
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Mail } from 'lucide-react';
+import { motion } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+export function NewsletterSection() {
+  return (
+    <section className="relative min-h-screen overflow-hidden bg-gradient-to-br from-primary/5 via-white to-secondary/5">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="absolute top-20 left-20 w-32 h-32 bg-primary/10 rounded-full blur-3xl animate-float"></div>
+        <div className="absolute bottom-32 right-16 w-40 h-40 bg-secondary/10 rounded-full blur-3xl animate-float animate-delay-1000"></div>
+        <div className="absolute top-1/2 left-1/4 w-24 h-24 bg-primary/5 rounded-full blur-2xl"></div>
+        <div className="absolute bottom-1/4 right-1/3 w-36 h-36 bg-secondary/5 rounded-full blur-3xl"></div>
+      </div>
+
+      {/* Subtle Grid Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="w-full h-1/2" style={{
+          backgroundImage: `
+            linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px)
+          `,
+          backgroundSize: '50px 50px'
+        }}></div>
+      </div>
+
+      {/* Floating Email Icons */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <motion.div
+          className="absolute top-1/4 left-10 text-primary/20"
+          animate={{
+            y: [0, -20, 0],
+            rotate: [0, 5, 0]
+          }}
+          transition={{
+            duration: 6,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        >
+          <Mail className="w-8 h-8" />
+        </motion.div>
+        
+        <motion.div
+          className="absolute top-1/3 right-16 text-secondary/20"
+          animate={{
+            y: [0, 15, 0],
+            rotate: [0, -5, 0]
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 2
+          }}
+        >
+          <Mail className="w-6 h-6" />
+        </motion.div>
+        
+        <motion.div
+          className="absolute bottom-1/3 left-1/4 text-primary/15"
+          animate={{
+            y: [0, -10, 0],
+            rotate: [0, 3, 0]
+          }}
+          transition={{
+            duration: 7,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 4
+          }}
+        >
+          <Mail className="w-5 h-5" />
+        </motion.div>
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10 py-20 lg:py-28 text-center space-y-8 px-4">
+        {/* Main Heading with Typography Guidelines */}
+        <motion.div 
+          className="space-y-4"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <h2 className="font-merchant text-5xl md:text-6xl lg:text-7xl tracking-tight leading-tight">
+            <div className="font-light">Get</div>
+            <div>
+              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+                travel tips
+              </span>
+              <span className="font-light"> &</span>
+            </div>
+            <div className="font-semibold">exclusive offers.</div>
+          </h2>
+          <motion.p 
+            className="font-poppins text-lg lg:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed font-normal"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            We recommend you to subscribe, drop your email below to get daily update about us
+          </motion.p>
+        </motion.div>
+        
+        {/* Newsletter Subscription Interface */}
+        <motion.div 
+          className="max-w-2xl mx-auto space-y-6"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+        >
+          {/* Email Subscription Bar */}
+          <div className="relative">
+            <div className="flex items-center space-x-3 bg-white rounded-full p-2 shadow-xl border border-gray-100/50">
+              <div className="flex-1 relative">
+                <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Input 
+                  type="email" 
+                  placeholder="Enter your email address"
+                  className="pl-12 pr-4 h-14 text-base border-0 focus:ring-0 focus:border-0 bg-transparent"
+                />
+              </div>
+              <motion.div
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Button className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 py-6 px-12 rounded-full text-lg shadow-lg">
+                  Subscribe Now
+                </Button>
+              </motion.div>
+            </div>
+          </div>
+
+          {/* Trust Indicators */}
+          <motion.div 
+            className="flex flex-wrap justify-center items-center gap-4 text-sm text-gray-500"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+          >
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              <span>No spam, unsubscribe anytime</span>
+            </div>
+            <div className="hidden md:block">•</div>
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+              <span>Read our Privacy Policy</span>
+            </div>
+            <div className="hidden md:block">•</div>
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
+              <span>Join 10,000+ subscribers</span>
+            </div>
+          </motion.div>
+
+          {/* Additional Info */}
+          <motion.p 
+            className="text-sm text-gray-500 mt-4"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.8 }}
+          >
+            Get exclusive travel tips, destination guides, and special offers delivered to your inbox
+          </motion.p>
+        </motion.div>
+      </div>
+
+      {/* Bottom Decorative Elements */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white/50 to-transparent pointer-events-none"></div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/OffersPage.tsx b/src/components/OffersPage.tsx
new file mode 100644
index 0000000..dbcafa7
--- /dev/null
+++ b/src/components/OffersPage.tsx
@@ -0,0 +1,853 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Search, Filter, Star, MapPin, Clock, Tag, Heart, Share2, Copy, ChevronDown, ChevronRight, Check, Hotel, Plane, Building2, MapPinned, Home } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Separator } from './ui/separator';
+import { Checkbox } from './ui/checkbox';
+import Navbar from './Navbar';
+import SubNavbar from './SubNavbar';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { TrustSection } from './TrustSection';
+import { MobileAppSection } from './MobileAppSection';
+import { ReviewsSection } from './ReviewsSection';
+import { TrustedCompanies } from './TrustedCompanies';
+
+interface OffersPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  fromSource: 'products' | 'passes';
+  currentPage: string;
+  user?: { email: string; name: string; } | null;
+}
+
+// Mock offers data
+const offersData = [
+  {
+    id: '1',
+    business: 'Aster Hotels',
+    title: '20% Off on dining and drinks on purchase upto $500 T&Cs* apply',
+    discountCode: 'AFJIJFJS500',
+    rating: 4.5,
+    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400',
+    category: 'dining'
+  },
+  {
+    id: '2',
+    business: 'Melbourne Sports Club',
+    title: '30% Off on sports activities and equipment rental',
+    discountCode: 'SPORT300',
+    rating: 4.8,
+    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400',
+    category: 'sports'
+  },
+  {
+    id: '3',
+    business: 'Luxury Stays Melbourne',
+    title: '25% Off on weekend stays at premium hotels',
+    discountCode: 'STAY250',
+    rating: 4.7,
+    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400',
+    category: 'stays'
+  },
+  {
+    id: '4',
+    business: 'Gourmet Food Tours',
+    title: '15% Off on food walking tours and tastings',
+    discountCode: 'FOOD150',
+    rating: 4.6,
+    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
+    category: 'food'
+  },
+  {
+    id: '5',
+    business: 'Craft Drinks Co',
+    title: '20% Off on craft beer and cocktail experiences',
+    discountCode: 'DRINK200',
+    rating: 4.4,
+    image: 'https://images.unsplash.com/photo-1436114775196-43267ba1fbb8?w=400',
+    category: 'drinks'
+  },
+  {
+    id: '6',
+    business: 'Melbourne Museum',
+    title: '35% Off on museum entries and special exhibitions',
+    discountCode: 'MUSEUM350',
+    rating: 4.9,
+    image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=400',
+    category: 'museum'
+  },
+  {
+    id: '7',
+    business: 'Fine Dining Melbourne',
+    title: '40% Off on fine dining experiences at top restaurants',
+    discountCode: 'FINE400',
+    rating: 4.8,
+    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
+    category: 'dining'
+  },
+  {
+    id: '8',
+    business: 'Adventure Sports',
+    title: '30% Off on extreme sports and adventure activities',
+    discountCode: 'ADVENTURE',
+    rating: 4.7,
+    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400',
+    category: 'sports'
+  },
+  {
+    id: '9',
+    business: 'Boutique Hotels',
+    title: '20% Off on boutique accommodation packages',
+    discountCode: 'BOUTIQUE20',
+    rating: 4.6,
+    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400',
+    category: 'stays'
+  },
+  {
+    id: '10',
+    business: 'Local Food Markets',
+    title: '25% Off on local market tours and food tastings',
+    discountCode: 'MARKET250',
+    rating: 4.5,
+    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
+    category: 'food'
+  },
+  {
+    id: '11',
+    business: 'Wine Bar Melbourne',
+    title: '30% Off on wine tastings and sommelier experiences',
+    discountCode: 'WINE300',
+    rating: 4.7,
+    image: 'https://images.unsplash.com/photo-1436114775196-43267ba1fbb8?w=400',
+    category: 'drinks'
+  },
+  {
+    id: '12',
+    business: 'Art Gallery Melbourne',
+    title: '25% Off on art exhibitions and cultural events',
+    discountCode: 'ART250',
+    rating: 4.8,
+    image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=400',
+    category: 'museum'
+  },
+  {
+    id: '13',
+    business: 'Rooftop Dining',
+    title: '35% Off on rooftop dining and sunset experiences',
+    discountCode: 'ROOFTOP35',
+    rating: 4.9,
+    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
+    category: 'dining'
+  }
+];
+
+const filterCategories = [
+  { value: 'dining', label: 'Dining', count: 3 },
+  { value: 'sports', label: 'Sports', count: 3 },
+  { value: 'stays', label: 'Stays', count: 3 },
+  { value: 'food', label: 'Food', count: 3 },
+  { value: 'drinks', label: 'Drinks', count: 3 },
+  { value: 'museum', label: 'Museum', count: 3 }
+];
+
+// Categories data for the 20+ Categories section
+const categoriesData = [
+  {
+    icon: Hotel,
+    title: 'Hotels',
+    description: 'Exclusive deals on luxury and boutique hotels',
+    offers: '50+ offers',
+    color: 'from-blue-500 to-cyan-500'
+  },
+  {
+    icon: Plane,
+    title: 'Flights',
+    description: 'Save on domestic and international flights',
+    offers: '30+ offers',
+    color: 'from-purple-500 to-pink-500'
+  },
+  {
+    icon: MapPinned,
+    title: 'Destinations',
+    description: 'Discover amazing destination packages',
+    offers: '40+ offers',
+    color: 'from-orange-500 to-red-500'
+  },
+  {
+    icon: Building2,
+    title: 'Places',
+    description: 'Visit top attractions with special discounts',
+    offers: '60+ offers',
+    color: 'from-green-500 to-emerald-500'
+  },
+  {
+    icon: Home,
+    title: 'Accommodations',
+    description: 'From hostels to resorts at best prices',
+    offers: '45+ offers',
+    color: 'from-indigo-500 to-blue-500'
+  }
+];
+
+export function OffersPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  fromSource,
+  currentPage,
+  user
+}: OffersPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [currentPage_, setCurrentPage_] = useState(1);
+  const [showLoadMore, setShowLoadMore] = useState(true);
+  const [copiedCode, setCopiedCode] = useState<string | null>(null);
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories(prev => 
+      prev.includes(category) 
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const filteredOffers = offersData.filter(offer => {
+    const matchesSearch = offer.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         offer.business.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(offer.category);
+    
+    return matchesSearch && matchesCategory;
+  });
+
+  const itemsPerPage = 12;
+  const displayedOffers = filteredOffers.slice(0, currentPage_ * itemsPerPage);
+  const hasMoreItems = filteredOffers.length > displayedOffers.length;
+
+  const copyDiscountCode = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopiedCode(code);
+    setTimeout(() => setCopiedCode(null), 2000);
+  };
+
+  const handleLoadMore = () => {
+    setCurrentPage_(prev => prev + 1);
+    if (!hasMoreItems) setShowLoadMore(false);
+  };
+
+  // Show different layouts based on login state
+  if (!user) {
+    // Not logged in - show marketing/landing page
+    return (
+      <div className="min-h-screen bg-background">
+        <Navbar 
+          activeCity="Paris"
+          onCityChange={() => {}}
+          onHomeClick={onHomeClick}
+          onMelbourneClick={onMelbourneClick}
+          onPassesClick={onPassesClick}
+          onCheckoutClick={onCheckoutClick}
+          onSignInClick={onSignInClick}
+          onSignOutClick={onSignOutClick}
+          onAttractionsClick={onAttractionsClick}
+          onBlogsClick={onBlogsClick}
+          onHowItWorksClick={onHowItWorksClick}
+          onFAQClick={onFAQClick}
+          onPrivacyPolicyClick={onPrivacyPolicyClick}
+          onAboutUsClick={onAboutUsClick}
+          onProfileClick={onProfileClick}
+          onCityCardsClick={onCityCardsClick}
+          onMagicItineraryClick={onMagicItineraryClick}
+          onPostCardsClick={onPostCardsClick}
+          onOffersClick={onOffersClick}
+          onEsimsClick={onEsimsClick}
+          onHotelDiscountsClick={onHotelDiscountsClick}
+          currentPage={currentPage}
+          isUserSignedIn={!!user}
+          user={user}
+        />
+
+        {/* Sub Navbar */}
+        <SubNavbar
+          activeTab="offers"
+          onCityCardsClick={onCityCardsClick}
+          onMagicItineraryClick={onMagicItineraryClick}
+          onPostCardsClick={onPostCardsClick}
+          onOffersClick={onOffersClick}
+          onEsimsClick={onEsimsClick}
+          onHotelDiscountsClick={onHotelDiscountsClick}
+        />
+
+        {/* Hero Section */}
+        <section className="relative pt-52 pb-20 overflow-hidden">
+          {/* Background gradient */}
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
+          
+          <div className="container mx-auto px-4 relative z-10">
+            <motion.div
+              className="max-w-4xl mx-auto text-center"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
+                <span className="font-light">Save money on</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                  various categories
+                </span>
+              </h1>
+              <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
+                Unlock exclusive deals and discounts across hotels, flights, dining, and more. Start saving on your next adventure today.
+              </p>
+              <Button 
+                onClick={onSignInClick}
+                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
+              >
+                Get Started Now
+              </Button>
+            </motion.div>
+          </div>
+
+          {/* Decorative elements */}
+          <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
+          <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
+        </section>
+
+        {/* Trusted By Companies Section */}
+        <section className="py-12 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto text-center">
+              <div className="mb-10">
+                <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-4">
+                  <span className="font-normal">Trusted by the </span>
+                  <span className="font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">world's best</span>
+                </h2>
+                <p className="font-poppins text-base md:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto">
+                  Join thousands of travelers who trust our partners for unforgettable experiences
+                </p>
+              </div>
+              <TrustedCompanies />
+            </div>
+          </div>
+        </section>
+
+        {/* Featured Offers Section */}
+        <section className="py-20">
+          <div className="container mx-auto px-4">
+            <motion.div
+              className="text-center mb-12"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
+                <span className="font-light">Featured</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                  Offers
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+                Check out our top deals and start saving on your favorite experiences
+              </p>
+            </motion.div>
+
+            {/* Featured offers grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {offersData.slice(0, 6).map((offer, index) => (
+                <motion.div
+                  key={offer.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Card className="bg-white border border-gray-200 rounded-xl overflow-hidden h-full hover:shadow-lg transition-shadow duration-300">
+                    <div className="relative h-48 bg-gray-200">
+                      <ImageWithFallback
+                        src={offer.image}
+                        alt={offer.title}
+                        className="w-full h-full object-cover"
+                      />
+                      <Badge className="absolute top-4 left-4 bg-primary text-white font-normal">
+                        Featured
+                      </Badge>
+                    </div>
+                    <CardContent className="p-6">
+                      <div className="flex items-center gap-2 mb-3">
+                        <div className="w-4 h-4 bg-gray-300 rounded"></div>
+                        <span className="font-poppins text-sm text-gray-500 font-normal">{offer.business}</span>
+                      </div>
+                      <h3 className="font-merchant text-lg font-medium text-gray-900 mb-3 line-clamp-2">
+                        {offer.title}
+                      </h3>
+                      <div className="flex items-center gap-1 mb-4">
+                        {[...Array(5)].map((_, i) => (
+                          <Star
+                            key={i}
+                            className={`w-4 h-4 ${
+                              i < Math.floor(offer.rating)
+                                ? 'fill-yellow-400 text-yellow-400'
+                                : 'fill-gray-300 text-gray-300'
+                            }`}
+                          />
+                        ))}
+                      </div>
+                      <Button 
+                        onClick={onSignInClick}
+                        className="w-full bg-gray-900 hover:bg-gray-800 text-white font-poppins font-medium"
+                      >
+                        Sign in to View Code
+                      </Button>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+
+            <div className="text-center">
+              <Button 
+                onClick={onSignInClick}
+                variant="outline"
+                className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
+              >
+                View All Offers
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* How It Works Section */}
+        <section className="py-20 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <motion.div
+              className="text-center mb-16"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
+                <span className="font-light">How</span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                  It Works
+                </span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+                Get access to exclusive offers in three simple steps
+              </p>
+            </motion.div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {[
+                {
+                  step: '01',
+                  title: 'Sign Up',
+                  description: 'Create your free CityCards account in seconds',
+                  icon: '👤'
+                },
+                {
+                  step: '02',
+                  title: 'Browse Offers',
+                  description: 'Explore thousands of exclusive deals across categories',
+                  icon: '🔍'
+                },
+                {
+                  step: '03',
+                  title: 'Save Money',
+                  description: 'Redeem discount codes and start saving instantly',
+                  icon: '💰'
+                }
+              ].map((item, index) => (
+                <motion.div
+                  key={item.step}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.2 }}
+                >
+                  <Card className="bg-white p-8 rounded-xl hover:shadow-lg transition-shadow duration-300">
+                    <div className="text-6xl mb-4">{item.icon}</div>
+                    <div className="font-merchant text-5xl font-bold text-primary/20 mb-4">
+                      {item.step}
+                    </div>
+                    <h3 className="font-merchant text-2xl font-semibold text-gray-900 mb-3">
+                      {item.title}
+                    </h3>
+                    <p className="font-poppins text-base leading-relaxed font-normal text-gray-600">
+                      {item.description}
+                    </p>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* 20+ Categories Section */}
+        <section className="py-20">
+          <div className="container mx-auto px-4">
+            <motion.div
+              className="text-center mb-16"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                  20+ Categories
+                </span>{' '}
+                <span className="font-light">to Explore</span>
+              </h2>
+              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+                From accommodations to flights, discover deals across all your travel needs
+              </p>
+            </motion.div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {categoriesData.map((category, index) => (
+                <motion.div
+                  key={category.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Card className="bg-white p-8 rounded-xl hover:shadow-lg transition-all duration-300 group cursor-pointer">
+                    <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${category.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                      <category.icon className="w-8 h-8 text-white" />
+                    </div>
+                    <h3 className="font-merchant text-2xl font-semibold text-gray-900 mb-3">
+                      {category.title}
+                    </h3>
+                    <p className="font-poppins text-base leading-relaxed font-normal text-gray-600 mb-4">
+                      {category.description}
+                    </p>
+                    <div className="flex items-center justify-between">
+                      <span className="font-poppins text-sm font-medium text-primary">
+                        {category.offers}
+                      </span>
+                      <Button 
+                        onClick={onSignInClick}
+                        variant="ghost" 
+                        size="sm"
+                        className="text-primary hover:text-primary/80 font-poppins font-medium"
+                      >
+                        Explore →
+                      </Button>
+                    </div>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+
+            <div className="text-center mt-12">
+              <Button 
+                onClick={onSignInClick}
+                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
+              >
+                Browse All Categories
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* Access Your CityCards Section */}
+        <section className="py-20 bg-muted/30">
+          <MobileAppSection />
+        </section>
+
+        <Footer
+          onHomeClick={onHomeClick}
+          onMelbourneClick={onMelbourneClick}
+          onPassesClick={onPassesClick}
+          onCheckoutClick={onCheckoutClick}
+          onSignInClick={onSignInClick}
+          onAttractionsClick={onAttractionsClick}
+          onBlogsClick={onBlogsClick}
+          onHowItWorksClick={onHowItWorksClick}
+          onFAQClick={onFAQClick}
+          onPrivacyPolicyClick={onPrivacyPolicyClick}
+          onAboutUsClick={onAboutUsClick}
+          onProfileClick={onProfileClick}
+          onCityCardsClick={onCityCardsClick}
+          onMagicItineraryClick={onMagicItineraryClick}
+          onPostCardsClick={onPostCardsClick}
+          onOffersClick={onOffersClick}
+        />
+      </div>
+    );
+  }
+
+  // Logged in - show offers grid with filters
+  return (
+    <div className="min-h-screen bg-[#f8f8f8]">
+      <Navbar 
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Sub Navbar */}
+      <SubNavbar
+        activeTab="offers"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      <div className="container mx-auto px-4 pt-51 pb-16">
+        <div className="flex gap-8">
+          {/* Left Sidebar - Filters */}
+          <div className="w-64 flex-shrink-0">
+            <Card className="p-8 sticky top-48">
+              <div className="space-y-6">
+                {/* Search by header */}
+                <div className="flex items-center gap-4">
+                  <div className="h-0 w-6 border-t-[3px] border-[#2d2d2d] rotate-90"></div>
+                  <h3 className="font-merchant text-[22px] text-[#2d2d2d] font-normal">Search by</h3>
+                </div>
+
+                {/* Filter categories */}
+                <div className="space-y-4">
+                  {filterCategories.map(category => (
+                    <div key={category.value} className="flex items-center gap-3">
+                      <Checkbox
+                        id={category.value}
+                        checked={selectedCategories.includes(category.value)}
+                        onCheckedChange={() => toggleCategory(category.value)}
+                        className="border-[#bebebe]"
+                      />
+                      <label
+                        htmlFor={category.value}
+                        className="font-poppins text-sm text-[#414141] cursor-pointer flex-1 font-normal"
+                      >
+                        {category.label} ({category.count})
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">
+            {/* Breadcrumb */}
+            <div className="mb-8">
+              <p className="text-[14.297px] text-[#05073c]">
+                {fromSource === 'passes' ? (
+                  <>
+                    <span>My Profile{'>'}My passes{'>'}</span>
+                    <span className="font-bold">Offers</span>
+                  </>
+                ) : (
+                  <>
+                    <span>Our Products{'>'}</span>
+                    <span className="font-bold">Offers</span>
+                  </>
+                )}
+              </p>
+            </div>
+
+            {/* Header Section */}
+            <div className="mb-8">
+              <h1 className="text-[48px] font-medium text-[#2d3134] tracking-[0.48px] leading-[54px]">
+                Offers for you
+              </h1>
+            </div>
+
+            {/* Offers Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
+              {displayedOffers.map((offer, index) => (
+                <motion.div
+                  key={offer.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Card className="bg-white border border-[#e7e6e6] rounded-[12px] overflow-hidden h-full">
+                    {/* Image */}
+                    <div className="relative h-[214px] bg-[#c4c4c4]">
+                      <ImageWithFallback
+                        src={offer.image}
+                        alt={offer.title}
+                        className="w-full h-full object-cover"
+                      />
+                      <Button className="absolute bottom-4 right-3 bg-white rounded-[35px] shadow-lg w-[35px] h-[35px] p-0 hover:bg-gray-100">
+                        <Heart className="w-4 h-4 text-black" />
+                      </Button>
+                    </div>
+
+                    <CardContent className="space-y-4 px-[17px] py-[0px]">
+                      {/* Business Name */}
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 bg-gray-300 rounded"></div>
+                        <span className="text-[12.289px] text-[#717171]">{offer.business}</span>
+                      </div>
+
+                      {/* Title */}
+                      <h3 className="text-[15.875px] font-medium text-[#05073c] leading-[24px] min-h-[48px] font-bold font-normal">
+                        {offer.title}
+                      </h3>
+
+                      {/* Rating Stars */}
+                      <div className="flex items-center gap-1">
+                        {[...Array(5)].map((_, i) => (
+                          <Star
+                            key={i}
+                            className={`w-3 h-3 ${
+                              i < Math.floor(offer.rating)
+                                ? 'fill-[#e2ad64] text-[#e2ad64]'
+                                : 'fill-[#bebebe] text-[#bebebe]'
+                            }`}
+                          />
+                        ))}
+                      </div>
+
+                      {/* Discount Code */}
+                      <div className="bg-[#f4f4f4] h-[41px] flex items-center justify-between pl-4 -mx-5">
+                        <span className="text-[15px] font-semibold text-[#2d3134]">
+                          {offer.discountCode}
+                        </span>
+                        <Button
+                          onClick={() => copyDiscountCode(offer.discountCode)}
+                          className="bg-[#2c2c2c] rounded-br-[5px] rounded-tr-[5px] h-[40px] w-[38px] p-0 hover:bg-[#1c1c1c]"
+                        >
+                          <Copy className="w-4 h-4 text-white" />
+                        </Button>
+                      </div>
+                    </CardContent>
+
+                    {copiedCode === offer.discountCode && (
+                      <div className="absolute top-4 left-4 bg-green-500 text-white px-2 py-1 rounded text-xs">
+                        Copied!
+                      </div>
+                    )}
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Minimal Pagination */}
+            <div className="flex justify-center py-8">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  disabled={currentPage_ === 1}
+                >
+                  <ChevronRight className="w-4 h-4 rotate-180" />
+                </Button>
+                
+                <div className="flex items-center gap-1">
+                  {[1, 2, 3].map((page) => (
+                    <Button
+                      key={page}
+                      variant={currentPage_ === page ? "default" : "ghost"}
+                      size="sm"
+                      className="w-8 h-8 p-0"
+                      onClick={() => setCurrentPage_(page)}
+                    >
+                      {page}
+                    </Button>
+                  ))}
+                </div>
+                
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  disabled={currentPage_ === 3}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Footer
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/OtherCities.tsx b/src/components/OtherCities.tsx
new file mode 100644
index 0000000..60f77ae
--- /dev/null
+++ b/src/components/OtherCities.tsx
@@ -0,0 +1,195 @@
+import { ArrowRight, Star, Clock, MapPin } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Button } from './ui/button';
+import { motion } from 'motion/react';
+
+const otherCities = [
+  {
+    id: 1,
+    name: 'London',
+    country: 'United Kingdom',
+    rating: 4.8,
+    experiences: 180,
+    duration: '2-3 days',
+    highlight: 'Historic Landmarks',
+    image: 'https://images.unsplash.com/photo-1559788591-f5ea2371b915?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBicmlkZ2UlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTYyfDA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Discover centuries of history, royal palaces, and world-class museums in England\'s capital city.'
+  },
+  {
+    id: 2,
+    name: 'Hong Kong',
+    country: 'China',
+    rating: 4.7,
+    experiences: 125,
+    duration: '3-4 days',
+    highlight: 'Urban Adventure',
+    image: 'https://images.unsplash.com/photo-1698416286339-7edbf0922953?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob25nJTIwa29uZyUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NTYxMjM1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Experience the perfect blend of East meets West with stunning skylines and incredible cuisine.'
+  },
+  {
+    id: 3,
+    name: 'Istanbul',
+    country: 'Turkey',
+    rating: 4.6,
+    experiences: 95,
+    duration: '3-5 days',
+    highlight: 'Cultural Heritage',
+    image: 'https://images.unsplash.com/photo-1669117403979-be8e9448d9b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc3RhbmJ1bCUyMGJvc3Bob3J1cyUyMG1vc3F1ZXxlbnwxfHx8fDE3NTYxMjM1NzB8MA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Immerse yourself in the crossroads of Europe and Asia with stunning architecture and rich history.'
+  },
+  {
+    id: 4,
+    name: 'Cairo',
+    country: 'Egypt',
+    rating: 4.5,
+    experiences: 78,
+    duration: '4-5 days',
+    highlight: 'Ancient Wonders',
+    image: 'https://images.unsplash.com/photo-1705874930271-88eeb8f533dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYWlybyUyMHB5cmFtaWRzJTIwYW5jaWVudHxlbnwxfHx8fDE3NTYxMjM1NzR8MA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Journey through millennia of civilization with the Great Pyramids and the treasures of the Nile.'
+  },
+  {
+    id: 5,
+    name: 'Vancouver',
+    country: 'Canada',
+    rating: 4.8,
+    experiences: 110,
+    duration: '2-3 days',
+    highlight: 'Nature & City',
+    image: 'https://images.unsplash.com/photo-1730661906876-18bfc6e95f2f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2YW5jb3V2ZXIlMjBtb3VudGFpbnMlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTc4fDA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Where urban sophistication meets breathtaking natural beauty, from mountains to ocean.'
+  },
+  {
+    id: 6,
+    name: 'Miami',
+    country: 'United States',
+    rating: 4.6,
+    experiences: 135,
+    duration: '3-4 days',
+    highlight: 'Beach Culture',
+    image: 'https://images.unsplash.com/photo-1735825713164-192ff57874bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWFtaSUyMGJlYWNoJTIwYXJ0JTIwZGVjb3xlbnwxfHx8fDE3NTYxMjM1ODR8MA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Dive into vibrant Art Deco architecture, world-famous beaches, and electric nightlife.'
+  }
+];
+
+export function OtherCities() {
+  return (
+    <section className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="heading-dynamic text-4xl md:text-5xl text-gray-900 mb-6">
+            <span className="font-light">Explore</span>{' '}
+            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Amazing
+            </span>{' '}
+            <span className="font-normal">Cities</span>{' '}
+            <span className="font-semibold text-emphasis">Worldwide</span>
+          </h2>
+          <p className="font-poppins text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-normal">
+            Discover incredible destinations around the world with our comprehensive city guides and curated experiences.
+          </p>
+        </motion.div>
+
+        {/* Cities Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {otherCities.map((city, index) => (
+            <motion.div
+              key={city.id}
+              className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500"
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              whileHover={{ y: -8 }}
+            >
+              {/* Image */}
+              <div className="relative h-64 overflow-hidden">
+                <ImageWithFallback
+                  src={city.image}
+                  alt={city.name}
+                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                />
+                
+                {/* Gradient Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
+                
+                {/* Rating Badge */}
+                <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm px-3 py-1 rounded-full flex items-center gap-1">
+                  <Star className="w-4 h-4 text-yellow-500 fill-current" />
+                  <span className="text-sm font-semibold text-gray-900">{city.rating}</span>
+                </div>
+
+                {/* Highlight Badge */}
+                <div className="absolute top-4 right-4 bg-primary/90 backdrop-blur-sm px-3 py-1 rounded-full">
+                  <span className="text-sm font-medium text-white">{city.highlight}</span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-6">
+                {/* City Info */}
+                <div className="mb-4">
+                  <h3 className="text-2xl font-bold text-gray-900 mb-1">{city.name}</h3>
+                  <div className="flex items-center text-gray-600 mb-3">
+                    <MapPin className="w-4 h-4 mr-1" />
+                    <span className="text-sm">{city.country}</span>
+                  </div>
+                </div>
+
+                {/* Stats */}
+                <div className="flex items-center justify-between mb-4 text-sm text-gray-600">
+                  <div className="flex items-center gap-1">
+                    <span className="font-semibold text-primary">{city.experiences}</span>
+                    <span>experiences</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Clock className="w-4 h-4" />
+                    <span>{city.duration}</span>
+                  </div>
+                </div>
+
+                {/* Description */}
+                <p className="text-gray-600 mb-6 line-clamp-3">
+                  {city.description}
+                </p>
+
+                {/* CTA Button */}
+                <Button 
+                  className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3 rounded-2xl transition-all duration-300 group/btn"
+                >
+                  <span>Explore {city.name}</span>
+                  <ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
+                </Button>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Bottom CTA */}
+        <motion.div 
+          className="text-center mt-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <Button 
+            size="lg"
+            variant="outline"
+            className="px-8 py-4 text-lg border-2 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300"
+          >
+            <span>View All Cities</span>
+            <ArrowRight className="w-5 h-5 ml-2" />
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/PassComparison.tsx b/src/components/PassComparison.tsx
new file mode 100644
index 0000000..7982343
--- /dev/null
+++ b/src/components/PassComparison.tsx
@@ -0,0 +1,142 @@
+import { Button } from './ui/button';
+import { Check } from 'lucide-react';
+
+interface Pass {
+  id: string;
+  name: string;
+  description: string;
+  price: string;
+  period: string;
+  originalPrice?: string;
+  popular?: boolean;
+  features: string[];
+  forText: string;
+}
+
+const passes: Pass[] = [
+  {
+    id: 'selective',
+    name: 'Selective Card',
+    description: 'Ideal for first-time visitors. Enjoy access to a curated selection of attractions and basic customization options to get your journey started.',
+    price: '$39',
+    period: '/24 hours',
+    originalPrice: '$65',
+    forText: 'For first-time visitors',
+    features: [
+      'Access to 5+ top attractions',
+      'Skip-the-line at selected venues',
+      'Valid for 24 consecutive hours',
+      'Mobile ticket delivery',
+      'Free cancellation up to 24h',
+      'Basic audio guide access'
+    ]
+  },
+  {
+    id: 'unlimited',
+    name: 'Unlimited Card',
+    description: 'Perfect for adventure seekers, providing unlimited access to all attractions, an extensive library of experiences and integration with popular travel tools.',
+    price: '$79',
+    period: '/48 hours',
+    originalPrice: '$150',
+    popular: true,
+    forText: 'For adventure seekers',
+    features: [
+      'Unlimited access to all attractions',
+      'Skip-the-line at every venue', 
+      'Valid for 48 consecutive hours',
+      'Free public transport included',
+      'Priority customer support',
+      'Enhanced regular updates',
+      'Perfect for exploring teams',
+      'Integration with 25+ travel tool including Maps, Reviews, and Local Guides'
+    ]
+  }
+];
+
+export function PassComparison() {
+  return (
+    <section className="py-16 md:py-24 bg-gray-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center space-y-4 mb-12">
+          <p className="text-purple-600 font-medium">Pricing Plans</p>
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
+            Choose the perfect plan for your needs
+          </h2>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
+          {passes.map((pass) => (
+            <div
+              key={pass.id}
+              className={`relative bg-white rounded-3xl p-8 transition-all duration-300 ${
+                pass.popular 
+                  ? 'border-2 border-purple-500 shadow-xl transform scale-105' 
+                  : 'border border-gray-200 shadow-lg hover:shadow-xl'
+              }`}
+            >
+              {pass.popular && (
+                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                  <span className="bg-yellow-400 text-black px-4 py-1 rounded-full text-sm font-medium">
+                    Most Popular
+                  </span>
+                </div>
+              )}
+              
+              <div className="text-center mb-8">
+                <h3 className="text-2xl font-bold text-gray-900 mb-3">{pass.name}</h3>
+                <p className="text-gray-600 text-sm mb-6 leading-relaxed">
+                  {pass.description}
+                </p>
+                
+                <div className="mb-2">
+                  <span className="text-4xl font-bold text-gray-900">{pass.price}</span>
+                  <span className="text-lg text-gray-500">{pass.period}</span>
+                </div>
+                {pass.originalPrice && (
+                  <div className="text-sm text-gray-500">
+                    <span className="line-through">{pass.originalPrice}</span> billed annually
+                  </div>
+                )}
+
+                <Button 
+                  className={`w-full mt-6 h-12 rounded-xl font-medium ${
+                    pass.popular 
+                      ? 'bg-primary hover:bg-primary/90 text-white' 
+                      : 'bg-primary hover:bg-primary/90 text-white'
+                  }`}
+                >
+                  Choose plan
+                </Button>
+              </div>
+
+              <div className="space-y-6">
+                <div>
+                  <h4 className="font-semibold text-gray-900 mb-4">{pass.forText}</h4>
+                  <ul className="space-y-3">
+                    {pass.features.map((feature, index) => (
+                      <li key={index} className="flex items-start space-x-3">
+                        <div className="mt-0.5">
+                          <Check className="w-5 h-5 text-gray-400" />
+                        </div>
+                        <span className="text-sm text-gray-700 leading-relaxed">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-12">
+          <p className="text-gray-600 mb-4">
+            Not sure which pass is right for you?
+          </p>
+          <Button variant="outline" size="lg" className="h-12 px-8">
+            Compare All Features
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/PassesPage.tsx b/src/components/PassesPage.tsx
new file mode 100644
index 0000000..b8a8794
--- /dev/null
+++ b/src/components/PassesPage.tsx
@@ -0,0 +1,657 @@
+import { useState } from 'react';
+import { Check, X, Star, Shield, Clock, Smartphone, Download, QrCode, Heart, Users, Award, Headphones } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { Footer } from './Footer';
+import { ReviewsSection } from './ReviewsSection';
+
+interface PassesPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick?: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick?: () => void;
+  onProfileClick?: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  onContactUsClick?: () => void;
+  currentPage: string;
+  user?: { email: string; name: string; } | null;
+}
+
+interface PassType {
+  id: string;
+  name: string;
+  title: string;
+  description: string;
+  price: string;
+  originalPrice?: string;
+  period: string;
+  popular?: boolean;
+  features: string[];
+  tableFeatures: {
+    freeDelivery: boolean | string;
+    attractionsIncluded: string;
+    validityPeriod: string;
+    audioGuide: boolean;
+    skipTheLine: boolean | string;
+    mobileApp: boolean;
+    cancellationPolicy: string;
+    customerSupport: string;
+    additionalPerks: string;
+  };
+}
+
+const passTypes: PassType[] = [
+  {
+    id: 'selective',
+    name: 'Selective Pass',
+    title: 'SELECTIVE PASS',
+    description: 'Perfect for travelers who want to explore selected attractions at their own pace with essential features.',
+    price: '$59.99',
+    originalPrice: '$89.99',
+    period: 'per person',
+    features: [
+      'Access to selected attractions',
+      'Limited number of attractions per pass',
+      'Flexible validity period',
+      'Priority entry where available',
+      'Mobile ticket delivery'
+    ],
+    tableFeatures: {
+      freeDelivery: true,
+      attractionsIncluded: 'Up to 5 attractions',
+      validityPeriod: '30 days',
+      audioGuide: false,
+      skipTheLine: 'Selected venues',
+      mobileApp: true,
+      cancellationPolicy: '24 hours free cancellation',
+      customerSupport: 'Email support',
+      additionalPerks: 'Basic travel tips'
+    }
+  },
+  {
+    id: 'unlimited',
+    name: 'Unlimited Pass',
+    title: 'UNLIMITED CARD',
+    description: 'The ultimate experience for adventure seekers who want unlimited access to all attractions with premium features.',
+    price: '$89.99',
+    originalPrice: '$149.99',
+    period: 'per person',
+    popular: true,
+    features: [
+      'Unlimited access to all attractions',
+      'Time-limited validity (7 days)',
+      'Skip-the-line access',
+      'Expert guide inclusion',
+      'Mobile app access',
+      'Premium customer support'
+    ],
+    tableFeatures: {
+      freeDelivery: true,
+      attractionsIncluded: 'All attractions (50+)',
+      validityPeriod: '7 consecutive days',
+      audioGuide: true,
+      skipTheLine: 'All venues',
+      mobileApp: true,
+      cancellationPolicy: '24 hours free cancellation',
+      customerSupport: '24/7 Phone & Email',
+      additionalPerks: 'Exclusive discounts & priority booking'
+    }
+  }
+];
+
+const featureComparison = [
+  { key: 'freeDelivery', label: 'Free Delivery' },
+  { key: 'attractionsIncluded', label: 'Attractions Included' },
+  { key: 'validityPeriod', label: 'Validity Period' },
+  { key: 'audioGuide', label: 'Audio Guide' },
+  { key: 'skipTheLine', label: 'Skip-the-Line Access' },
+  { key: 'mobileApp', label: 'Mobile App' },
+  { key: 'cancellationPolicy', label: 'Cancellation Policy' },
+  { key: 'customerSupport', label: 'Customer Support' },
+  { key: 'additionalPerks', label: 'Additional Perks' }
+];
+
+const trustFeatures = [
+  {
+    icon: Star,
+    title: 'Unique Benefits',
+    description: 'Exclusive access to premium attractions and experiences',
+    stat: '50+ Partner Venues',
+    color: 'from-yellow-400 to-orange-500'
+  },
+  {
+    icon: Users,
+    title: 'Proven Performance',
+    description: 'Trusted by thousands of satisfied travelers worldwide',
+    stat: '4.8/5 Rating',
+    color: 'from-blue-400 to-cyan-500'
+  },
+  {
+    icon: Shield,
+    title: 'Quality Assurance',
+    description: 'Safety-first approach with verified partners and secure booking',
+    stat: '100% Secure',
+    color: 'from-green-400 to-emerald-500'
+  },
+  {
+    icon: Headphones,
+    title: 'Award-winning Support',
+    description: 'Round-the-clock assistance for seamless travel experience',
+    stat: '24/7 Available',
+    color: 'from-purple-400 to-pink-500'
+  }
+];
+
+export function PassesPage({ 
+  onHomeClick, 
+  onMelbourneClick, 
+  onPassesClick,
+  onCheckoutClick, 
+  onSignInClick, 
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  onContactUsClick,
+  currentPage,
+  user
+}: PassesPageProps) {
+  const [selectedPass, setSelectedPass] = useState<string>('unlimited');
+
+  const renderFeatureValue = (value: boolean | string) => {
+    if (typeof value === 'boolean') {
+      return value ? (
+        <Check className="w-5 h-5 text-green-500 mx-auto" />
+      ) : (
+        <X className="w-5 h-5 text-red-400 mx-auto" />
+      );
+    }
+    return <span className="text-gray-700">{value}</span>;
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navigation */}
+      <Navbar 
+        activeCity="Melbourne"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+      
+      <CitySubmenu 
+        currentPage={currentPage}
+        onClose={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
+        {/* Page Header */}
+        <div className="text-center mb-16">
+          <div className="mb-6">
+
+            <h1 className="font-merchant font-light text-4xl md:text-5xl lg:text-6xl mb-4">
+              Buy <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Passes</span>
+            </h1>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
+              Skip the lines, save money, and explore more with our flexible city cards designed for modern travelers
+            </p>
+          </div>
+        </div>
+
+        {/* Pass Comparison Section */}
+        <div className="mb-20">
+          <RadioGroup 
+            value={selectedPass} 
+            onValueChange={setSelectedPass}
+            className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto"
+          >
+            {passTypes.map((pass) => (
+              <div key={pass.id} className="relative h-full">
+                <Card className={`relative h-full flex flex-col transition-all duration-300 cursor-pointer ${
+                  pass.popular 
+                    ? 'ring-2 ring-primary shadow-xl' 
+                    : selectedPass === pass.id 
+                      ? 'ring-2 ring-primary/50 shadow-lg' 
+                      : 'border-gray-200 shadow-md hover:shadow-lg hover:border-primary/30'
+                }`}>
+                  
+                  {/* Popular Badge */}
+                  {pass.popular && (
+                    <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 z-10">
+                      <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-6 py-1.5 font-semibold shadow-lg font-poppins">
+                        Most Popular
+                      </Badge>
+                    </div>
+                  )}
+
+                  {/* Radio Button */}
+                  <div className="absolute top-5 right-5 z-10">
+                    <RadioGroupItem value={pass.id} id={pass.id} className="w-5 h-5" />
+                  </div>
+
+                  {/* Header - Fixed Height */}
+                  <CardHeader className="text-center pb-4 pt-8 flex-shrink-0">
+                    <CardTitle className="font-merchant text-2xl leading-tight mb-3 text-gray-900">
+                      {pass.title}
+                    </CardTitle>
+                    <CardDescription className="font-poppins text-sm text-gray-600 leading-relaxed font-normal min-h-[48px] flex items-center justify-center px-4">
+                      {pass.description}
+                    </CardDescription>
+                  </CardHeader>
+                  
+                  {/* Pricing Section - Fixed Height */}
+                  <div className="px-6 pb-6 flex-shrink-0">
+                    <div className="flex items-baseline justify-center gap-2 mb-2">
+                      <span className="text-5xl font-bold text-gray-900 font-poppins">{pass.price}</span>
+                      <span className="text-gray-500 font-poppins text-base">/ {pass.period}</span>
+                    </div>
+                    <div className="h-5 flex items-center justify-center">
+                      {pass.originalPrice && (
+                        <div className="text-sm text-gray-500 font-poppins">
+                          <span className="line-through mr-2">{pass.originalPrice}</span>
+                          <span className="text-green-600 font-medium">Save {Math.round(((parseFloat(pass.originalPrice.slice(1)) - parseFloat(pass.price.slice(1))) / parseFloat(pass.originalPrice.slice(1))) * 100)}%</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  
+                  {/* Content - Flexible Height with Fixed Features Area */}
+                  <CardContent className="pt-0 pb-6 px-6 flex-grow flex flex-col">
+                    {/* Features List - Fixed height */}
+                    <div className="flex-grow mb-6">
+                      <div className="space-y-3">
+                        {pass.features.slice(0, 6).map((feature, index) => (
+                          <div key={index} className="flex items-start gap-3">
+                            <Check className="w-4 h-4 text-green-500 mt-1 flex-shrink-0" />
+                            <span className="text-sm text-gray-700 font-poppins leading-relaxed font-normal">{feature}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* CTA Button - Pushed to bottom */}
+                    <div className="flex-shrink-0 space-y-3">
+                      <Button 
+                        className={`w-full h-12 rounded-lg font-semibold transition-all duration-300 font-poppins ${
+                          pass.popular 
+                            ? 'bg-primary hover:bg-primary/90 text-white shadow-md hover:shadow-lg' 
+                            : 'bg-gray-900 hover:bg-gray-800 text-white hover:shadow-md'
+                        }`}
+                        onClick={onCheckoutClick}
+                      >
+                        PURCHASE NOW
+                      </Button>
+                      
+                      <p className="text-xs text-gray-500 text-center font-poppins font-normal leading-tight">
+                        ✓ Free cancellation up to 24 hours • Instant delivery
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+
+        {/* Detailed Features Comparison Table */}
+        <Card className="overflow-hidden mb-20 bg-white shadow-lg">
+          <CardHeader className="text-center">
+            <CardTitle className="font-merchant text-3xl font-bold text-gray-900 mb-2">
+              Detailed Feature Comparison
+            </CardTitle>
+            <CardDescription className="text-lg text-gray-600 font-light">
+              See exactly what's included with each pass type
+            </CardDescription>
+          </CardHeader>
+          
+          <CardContent className="p-0">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-gray-200 bg-gray-50">
+                    <th className="text-left p-6 font-semibold text-gray-900 min-w-[200px]">Features</th>
+                    <th className="text-center p-6 font-semibold text-gray-900 min-w-[200px]">Selective Pass</th>
+                    <th className="text-center p-6 font-semibold text-gray-900 min-w-[200px] bg-primary/5">Premium Unlimited</th>
+                  </tr>
+                </thead>
+                
+                <tbody>
+                  {featureComparison.map((feature, index) => (
+                    <tr key={feature.key} className={`border-b border-gray-100 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}`}>
+                      <td className="p-6 font-medium text-gray-900">
+                        <div className="flex items-center">
+                          <span className="w-2 h-2 bg-primary rounded-full mr-3"></span>
+                          {feature.label}
+                        </div>
+                      </td>
+                      <td className="p-6 text-center">
+                        {renderFeatureValue(passTypes[0].tableFeatures[feature.key as keyof typeof passTypes[0]['tableFeatures']])}
+                      </td>
+                      <td className="p-6 text-center bg-primary/5">
+                        {renderFeatureValue(passTypes[1].tableFeatures[feature.key as keyof typeof passTypes[1]['tableFeatures']])}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Mobile App Promotion Banner */}
+        <div className="mb-20">
+          <Card className="bg-gray-50 overflow-hidden shadow-lg">
+            <CardContent className="p-0">
+              <div className="grid lg:grid-cols-2 gap-12 items-center">
+                
+                {/* Smartphone Mockup */}
+                <div className="relative flex justify-center p-8 lg:p-16">
+                  <div className="relative">
+                    {/* Phone Frame */}
+                    <div className="w-64 h-[520px] bg-black rounded-[2.5rem] p-2 shadow-2xl">
+                      <div className="w-full h-full bg-white rounded-[2rem] relative overflow-hidden">
+                        
+                        {/* Screen Content */}
+                        <div className="absolute inset-0 bg-gradient-to-b from-primary/90 to-secondary/90">
+                          
+                          {/* Status Bar */}
+                          <div className="flex justify-between items-center px-6 pt-4 pb-2 text-white text-sm">
+                            <span>9:41</span>
+                            <div className="flex gap-1">
+                              <div className="w-4 h-2 bg-white rounded-sm opacity-80"></div>
+                              <div className="w-4 h-2 bg-white rounded-sm opacity-60"></div>
+                              <div className="w-4 h-2 bg-white rounded-sm opacity-40"></div>
+                            </div>
+                          </div>
+                          
+                          {/* App Header */}
+                          <div className="px-6 py-4">
+                            <div className="flex items-center gap-3 mb-6">
+                              <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                                <span className="text-xl">🏙️</span>
+                              </div>
+                              <div>
+                                <h3 className="text-white font-semibold text-lg">CityCards</h3>
+                                <p className="text-white/70 text-sm">Melbourne Explorer</p>
+                              </div>
+                            </div>
+                          </div>
+                          
+                          {/* Active Pass Card */}
+                          <div className="mx-6 mb-6">
+                            <div className="bg-white/15 backdrop-blur-md rounded-2xl p-4 border border-white/20">
+                              <div className="flex justify-between items-center mb-3">
+                                <span className="text-white font-semibold">Premium Pass</span>
+                                <Badge className="bg-green-400 text-green-900 text-xs">Active</Badge>
+                              </div>
+                              <div className="h-2 bg-white/20 rounded-full mb-3">
+                                <div className="h-2 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full w-3/4"></div>
+                              </div>
+                              <p className="text-white/80 text-xs">18 of 24 attractions visited</p>
+                            </div>
+                          </div>
+                          
+                          {/* Quick Actions */}
+                          <div className="px-6 mb-6">
+                            <div className="grid grid-cols-3 gap-3">
+                              {[
+                                { icon: '🗺️', label: 'Map' },
+                                { icon: '📍', label: 'Near Me' },
+                                { icon: '⭐', label: 'Favorites' }
+                              ].map((action, index) => (
+                                <div key={index} className="bg-white/10 backdrop-blur-sm rounded-xl p-3 text-center border border-white/20">
+                                  <span className="text-lg mb-1 block">{action.icon}</span>
+                                  <span className="text-white text-xs">{action.label}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                          
+                          {/* Featured Attraction */}
+                          <div className="mx-6">
+                            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
+                              <h4 className="text-white font-medium mb-2">Today's Highlight</h4>
+                              <div className="flex items-center gap-3">
+                                <div className="w-12 h-12 bg-white/20 rounded-lg"></div>
+                                <div>
+                                  <p className="text-white text-sm font-medium">Royal Botanic Gardens</p>
+                                  <p className="text-white/70 text-xs">2.5km away • Open now</p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          
+                          {/* Bottom Tab Bar */}
+                          <div className="absolute bottom-6 left-4 right-4">
+                            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-2 border border-white/20">
+                              <div className="grid grid-cols-4 gap-2 text-center">
+                                {['Home', 'Passes', 'Map', 'Profile'].map((tab, index) => (
+                                  <div key={index} className="py-2">
+                                    <span className="text-white text-xs">{tab}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                {/* Content */}
+                <div className="p-8 lg:p-16">
+                  <h2 className="heading-dynamic text-4xl text-gray-900 mb-6">
+                    <span className="font-light">Access all your</span>{' '}
+                    <span className="font-bold italic text-gradient-primary">city cards</span>{' '}
+                    <span className="font-normal">on your</span>{' '}
+                    <span className="font-semibold text-emphasis">phone</span>
+                  </h2>
+                  <p className="text-xl text-gray-600 mb-8 leading-relaxed font-light">
+                    Download our mobile app for easy access to your passes, maps, and exclusive offers. 
+                    Never worry about losing your tickets again.
+                  </p>
+                  
+                  {/* App Features */}
+                  <div className="space-y-4 mb-8">
+                    {[
+                      'Instant pass activation and QR code access',
+                      'Offline maps and attraction information',
+                      'Real-time updates and exclusive app-only offers',
+                      'Track your progress and plan your journey'
+                    ].map((feature, index) => (
+                      <div key={index} className="flex items-center gap-3">
+                        <Check className="w-5 h-5 text-green-500" />
+                        <span className="text-gray-700 font-light">{feature}</span>
+                      </div>
+                    ))}
+                  </div>
+                  
+                  {/* Download Buttons */}
+                  <div className="flex flex-col sm:flex-row gap-4 mb-8">
+                    <Button className="bg-black text-white hover:bg-gray-800 flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-semibold">
+                      <Download className="w-5 h-5" />
+                      Download for iOS
+                    </Button>
+                    <Button className="bg-black text-white hover:bg-gray-800 flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-semibold">
+                      <Download className="w-5 h-5" />
+                      Get it on Google Play
+                    </Button>
+                  </div>
+                  
+                  {/* QR Code */}
+                  <div className="flex items-center gap-4">
+                    <div className="w-16 h-16 bg-black rounded-xl p-2">
+                      <div className="w-full h-full bg-white rounded-lg flex items-center justify-center">
+                        <QrCode className="w-8 h-8 text-black" />
+                      </div>
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900">Scan to download</p>
+                      <p className="text-sm text-gray-600 font-light">Available on iOS and Android</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Why Choose Us Section */}
+        <div className="mb-20">
+          <div className="text-center mb-12">
+            <h2 className="heading-dynamic text-4xl text-gray-900 mb-4">
+              <span className="font-light">Why Choose</span>{' '}
+              <span className="font-bold italic text-gradient-primary">CityCards</span><span className="font-normal">?</span>
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-light">
+              We're committed to providing the best city exploration experience with unmatched value and service
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {trustFeatures.map((feature, index) => {
+              const IconComponent = feature.icon;
+              return (
+                <Card key={index} className="text-center p-8 border-gray-200 hover:shadow-lg transition-shadow duration-300">
+                  <CardContent className="p-0">
+                    <div className={`w-16 h-16 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mx-auto mb-6`}>
+                      <IconComponent className="w-8 h-8 text-white" />
+                    </div>
+                    <h4 className="font-semibold text-gray-900 mb-3">{feature.title}</h4>
+                    <p className="text-gray-600 mb-4 leading-relaxed font-light">{feature.description}</p>
+                    <div className="text-2xl font-bold text-primary mb-1">{feature.stat}</div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Enhanced Testimonials Section */}
+        <EnhancedTestimonials />
+
+        {/* Reviews Section */}
+        <ReviewsSection />
+
+        {/* Final CTA Section */}
+        <div className="text-center bg-gradient-to-r from-primary to-secondary rounded-3xl p-12 text-white relative overflow-hidden">
+          {/* Background Pattern */}
+          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
+          <div className="absolute top-10 right-10 w-32 h-32 bg-white/5 rounded-full"></div>
+          <div className="absolute bottom-10 left-10 w-24 h-24 bg-white/5 rounded-full"></div>
+          
+          <div className="relative z-10">
+            <h3 className="heading-dynamic text-4xl mb-4">
+              <span className="font-light">Ready to</span>{' '}
+              <span className="font-bold italic text-emphasis">explore</span>{' '}
+              <span className="font-semibold">Melbourne?</span>
+            </h3>
+            <p className="text-xl mb-8 max-w-2xl mx-auto opacity-90 font-light">
+              Choose your pass and start discovering amazing attractions with skip-the-line access. 
+              Money-back guarantee included.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
+              <Button 
+                size="lg" 
+                className="bg-white text-primary hover:bg-gray-100 py-4 px-8 rounded-2xl font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-200"
+              >
+                Choose Your Pass
+              </Button>
+              <div className="flex items-center gap-2 text-white/80">
+                <Check className="w-5 h-5" />
+                <span className="font-light">No hidden fees • Instant confirmation</span>
+              </div>
+            </div>
+            
+            <div className="flex justify-center items-center gap-8 text-sm text-white/70">
+              <span className="flex items-center gap-2 font-light">
+                <Shield className="w-4 h-4" />
+                SSL Secured
+              </span>
+              <span className="flex items-center gap-2 font-light">
+                <Heart className="w-4 h-4" />
+                Money Back Guarantee
+              </span>
+              <span className="flex items-center gap-2 font-light">
+                <Clock className="w-4 h-4" />
+                24/7 Support
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
+
+export default PassesPage;
\ No newline at end of file
diff --git a/src/components/PostCardsPage.tsx b/src/components/PostCardsPage.tsx
new file mode 100644
index 0000000..16fa380
--- /dev/null
+++ b/src/components/PostCardsPage.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Camera, Edit3, Upload, Heart, Star, Download, Share2 } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import SubNavbar from './SubNavbar';
+import { Footer } from './Footer';
+import { MobileAppSection } from './MobileAppSection';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { CustomPostcards } from './CustomPostcards';
+import { HowItWorks } from './HowItWorks';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface PostCardsPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+export function PostCardsPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: PostCardsPageProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar
+        activeCity=""
+        onCityChange={() => {}}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage="postcards"
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* Sub Navbar */}
+      <SubNavbar
+        activeTab="postcards"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
+
+      {/* Hero Section */}
+      <section className="relative pt-52 pb-20 overflow-hidden">
+        {/* Background gradient */}
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
+        
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            className="max-w-4xl mx-auto text-center"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
+              <span className="font-light">Create Beautiful</span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Custom Postcards
+              </span>
+            </h1>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
+              Transform your travel memories into stunning, personalized postcards with authentic handwritten messages. 
+              Share your journey in a way that feels truly personal and meaningful.
+            </p>
+            <Button 
+              onClick={onCheckoutClick}
+              className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
+            >
+              Start Creating Postcards
+            </Button>
+          </motion.div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
+        <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
+      </section>
+
+      {/* Reuse CustomPostcards Component */}
+      <CustomPostcards />
+
+      {/* How It Works Section */}
+      <HowItWorks />
+
+      {/* Features Section */}
+
+
+      {/* Gallery Section */}
+      <section className="py-16 bg-gradient-to-br from-amber-50 to-orange-50">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-center mb-12"
+          >
+            <h2 className="font-merchant text-3xl mb-4">Postcard Gallery</h2>
+            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
+              Get inspired by beautiful postcards created by our community of travelers
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              {
+                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
+                title: 'Tropical Paradise',
+                message: 'Greetings from paradise! The beaches here are absolutely breathtaking...',
+                location: 'Maldives'
+              },
+              {
+                image: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=400&h=600&fit=crop',
+                title: 'City Adventures',
+                message: 'Having the most amazing time exploring this incredible city...',
+                location: 'Paris, France'
+              },
+              {
+                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
+                title: 'Mountain Views',
+                message: 'The views from up here are simply unbelievable. Wish you were here...',
+                location: 'Swiss Alps'
+              },
+              {
+                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
+                title: 'Cultural Journey',
+                message: 'Immersing myself in the rich culture and history of this amazing place...',
+                location: 'Kyoto, Japan'
+              },
+              {
+                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
+                title: 'Safari Adventure',
+                message: 'Just saw the most incredible wildlife! This experience is unforgettable...',
+                location: 'Kenya, Africa'
+              },
+              {
+                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
+                title: 'Island Escape',
+                message: 'Living the island life and loving every moment of this peaceful retreat...',
+                location: 'Santorini, Greece'
+              }
+            ].map((postcard, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
+              >
+                <Card className="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+                  <CardContent className="p-0">
+                    <div className="relative">
+                      <ImageWithFallback
+                        src={postcard.image}
+                        alt={postcard.title}
+                        className="w-full h-48 object-cover rounded-t-lg"
+                      />
+                      <Badge className="absolute top-3 left-3 bg-white/90 text-gray-700">
+                        {postcard.location}
+                      </Badge>
+                    </div>
+                    <div className="p-6">
+                      <h3 className="font-merchant text-lg mb-2">{postcard.title}</h3>
+                      <p className="text-gray-600 font-poppins text-sm italic">"{postcard.message}"</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ready to Explore Melbourne Section */}
+
+
+
+
+      {/* Mobile App Section */}
+      <MobileAppSection />
+
+      {/* Customer Reviews */}
+      <EnhancedTestimonials />
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/PrivacyPolicyPage.tsx b/src/components/PrivacyPolicyPage.tsx
new file mode 100644
index 0000000..a762fae
--- /dev/null
+++ b/src/components/PrivacyPolicyPage.tsx
@@ -0,0 +1,420 @@
+import { useState, useEffect } from 'react';
+import { motion, useScroll, useTransform } from 'motion/react';
+import { ArrowLeft } from 'lucide-react';
+import Navbar from './Navbar';
+import { CitySubmenu } from './CitySubmenu';
+import { Footer } from './Footer';
+import { MobileAppSection } from './MobileAppSection';
+import { WhyChooseCityCards } from './WhyChooseCityCards';
+import { EnhancedTestimonials } from './EnhancedTestimonials';
+import { ReviewsSection } from './ReviewsSection';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface PrivacyPolicyPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+  user: User | null;
+}
+
+export function PrivacyPolicyPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: PrivacyPolicyPageProps) {
+  const { scrollY } = useScroll();
+  const headerOpacity = useTransform(scrollY, [0, 200], [1, 0.3]);
+  const headerY = useTransform(scrollY, [0, 200], [0, -50]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navigation */}
+      <Navbar 
+        activeCity="Melbourne"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onSignInClick={onSignInClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+      
+      <CitySubmenu 
+        currentPage={currentPage}
+        onClose={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onAttractionsClick={onAttractionsClick}
+        onPassesClick={onPassesClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+      />
+
+      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
+        {/* Page Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <h1 className="font-merchant font-light text-4xl md:text-5xl lg:text-6xl mb-4">
+            Privacy{' '}
+            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Policy
+            </span>
+          </h1>
+          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
+            Learn how we collect, use, and protect your personal information
+          </p>
+        </motion.div>
+
+        {/* Privacy Policy Content */}
+        <div className="max-w-6xl mx-auto space-y-16">
+            
+            {/* Section 1: Data Protection */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                1. DATA PROTECTION, CONTROLLER AND DATA PRIVACY OFFICER
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <p className="text-muted-foreground leading-relaxed">
+                  We would like to inform you about how we collect personal data when you use our website.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  Personal data is any data which relates to you personally, such as your name, address, e-mail 
+                  addresses, and user behavior.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  The controller responsible for processing your personal data through this website is
+                </p>
+                
+                <div className="text-muted-foreground space-y-1">
+                  <p>CityCards Australia Pty Ltd</p>
+                  <p>Level 15, 333 Collins Street</p>
+                  <p>Melbourne VIC 3000</p>
+                  <p>Australia</p>
+                  <p className="text-primary">hello@citycards.com.au</p>
+                  <p>e-mail: <span className="text-primary">privacy@citycards.com.au</span></p>
+                </div>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  You can contact our data privacy officer using the email address{' '}
+                  <span className="text-primary">privacy@citycards.com.au</span> or our postal address, 
+                  with the addition of "The Data Privacy Officer".
+                </p>
+              </div>
+            </motion.section>
+
+            {/* Section 2: Cookies */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                2. COOKIES
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <div className="bg-primary/5 rounded-xl p-6 border border-primary/10">
+                  <h4 className="text-lg font-medium text-foreground mb-4">Change cookie settings</h4>
+                  <p className="text-muted-foreground text-sm">
+                    You can manage your cookie preferences at any time through your browser settings.
+                  </p>
+                </div>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  To make our website easier to use, we use functional cookies, in which we e.g. store your language 
+                  settings. Using functional cookies represents a legitimate interest on our part. The legal basis of this 
+                  is also Art. 6, Par. 1 lit. f GDPR.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  Cookies are small text files which are copied onto your hard drive and deleted again automatically 
+                  according to the settings in your browser or after a defined period. Cookies cannot execute any 
+                  programs or place viruses on your computer. They serve to make the website more user-friendly and 
+                  effective as a whole.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  You can set your browser at any time to permit or exclude the use of cookies, or to ask for your 
+                  confirmation before using them, and to delete them automatically after each session. If you do 
+                  not allow cookies, it may be that not all the functions of our website are available to you.
+                </p>
+              </div>
+            </motion.section>
+
+            {/* Section 3: Data Transfer */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                3. INFORMATION ON DATA TRANSFER TO THE USA AND OTHER NON-EU COUNTRIES
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <p className="text-muted-foreground leading-relaxed">
+                  Among other things, we use tools of companies domiciled in the United States or other from a data 
+                  protection perspective non-secure non-EU countries.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  If these tools are active, your personal data may potentially be transferred to these non-EU countries 
+                  and may be processed there. We must point out that in these countries, a data protection level that is 
+                  comparable to that in the EU cannot be guaranteed. For instance, U.S. enterprises are under a mandate 
+                  to release personal data to the security agencies and you as the data subject do not have any litigation 
+                  options to defend yourself in court. Hence, it cannot be ruled out that U.S. agencies (e.g., the Secret 
+                  Service) may process, analyze, and permanently archive your personal data for surveillance purposes. 
+                  We have no control over these processing activities.
+                </p>
+              </div>
+            </motion.section>
+
+            {/* Section 4: Data Collection */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                4. DATA COLLECTION ON OUR WEBSITE
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <p className="text-muted-foreground leading-relaxed">
+                  When you visit our website, we collect certain information automatically as part of the website's 
+                  basic functionality. This includes your IP address, browser type, operating system, referring website, 
+                  and the date and time of your visit.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  We also collect information that you provide to us directly, such as when you create an account, 
+                  make a purchase, or contact us with questions or feedback. This may include your name, email 
+                  address, phone number, payment information, and any other information you choose to provide.
+                </p>
+              </div>
+            </motion.section>
+
+            {/* Section 5: Your Rights */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                5. YOUR RIGHTS
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <p className="text-muted-foreground leading-relaxed">
+                  Under data protection law, you have the following rights in relation to your personal data:
+                </p>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
+                  <div className="bg-muted/30 rounded-lg p-4">
+                    <h4 className="font-medium text-foreground mb-2">Right of Access</h4>
+                    <p className="text-sm text-muted-foreground">
+                      You can request information about the personal data we hold about you.
+                    </p>
+                  </div>
+                  
+                  <div className="bg-muted/30 rounded-lg p-4">
+                    <h4 className="font-medium text-foreground mb-2">Right to Rectification</h4>
+                    <p className="text-sm text-muted-foreground">
+                      You can request that we correct any inaccurate personal data.
+                    </p>
+                  </div>
+                  
+                  <div className="bg-muted/30 rounded-lg p-4">
+                    <h4 className="font-medium text-foreground mb-2">Right to Erasure</h4>
+                    <p className="text-sm text-muted-foreground">
+                      You can request that we delete your personal data in certain circumstances.
+                    </p>
+                  </div>
+                  
+                  <div className="bg-muted/30 rounded-lg p-4">
+                    <h4 className="font-medium text-foreground mb-2">Right to Portability</h4>
+                    <p className="text-sm text-muted-foreground">
+                      You can request a copy of your personal data in a structured format.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </motion.section>
+
+            {/* Section 6: Updates */}
+            <motion.section
+              className="space-y-8"
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+            >
+              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
+                6. UPDATES TO THIS PRIVACY POLICY
+              </h3>
+              
+              <div className="max-w-3xl space-y-6 text-left">
+                <p className="text-muted-foreground leading-relaxed">
+                  We may update this privacy policy from time to time to reflect changes in our practices or 
+                  applicable laws. When we make changes, we will update the "Last Updated" date at the bottom 
+                  of this policy and notify you through our website or other appropriate means.
+                </p>
+                
+                <p className="text-muted-foreground leading-relaxed">
+                  We encourage you to review this privacy policy periodically to stay informed about how we 
+                  collect, use, and protect your information.
+                </p>
+              </div>
+            </motion.section>
+
+            {/* Last Updated */}
+            <motion.div
+              className="text-center pt-8 border-t border-border/20"
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.6 }}
+            >
+              <p className="text-sm text-muted-foreground">
+                Last updated: December 2024
+              </p>
+            </motion.div>
+          </div>
+        </div>
+
+        {/* Additional Sections from Homepage */}
+        
+        {/* Mobile App Section - "Access all your city cards" */}
+        <motion.section
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <MobileAppSection />
+        </motion.section>
+
+        {/* Why Choose Us Section */}
+        <motion.section
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
+        >
+          <WhyChooseCityCards />
+        </motion.section>
+
+        {/* Enhanced Testimonials Section */}
+        <motion.section
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
+        >
+          <EnhancedTestimonials />
+        </motion.section>
+
+        {/* Customer Reviews Section */}
+        <motion.section
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, ease: "easeOut", delay: 0.4 }}
+        >
+          <ReviewsSection />
+        </motion.section>
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ProfilePage.tsx b/src/components/ProfilePage.tsx
new file mode 100644
index 0000000..63894c2
--- /dev/null
+++ b/src/components/ProfilePage.tsx
@@ -0,0 +1,786 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { 
+  ArrowLeft, 
+  User, 
+  CreditCard, 
+  Calendar, 
+  MapPin, 
+  Settings,
+  Download,
+  QrCode,
+  Plus,
+  Clock,
+  Star,
+  Badge as BadgeIcon,
+  Camera
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Separator } from './ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+interface ProfilePageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onCreateItineraryClick: () => void;
+  onViewItineraryClick?: () => void;
+  onOffersClick: () => void;
+  onDownloadAppClick?: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage: string;
+}
+
+// Mock user data
+const mockUserData = {
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john.doe@example.com',
+  phone: '+1 (555) 123-4567',
+  country: 'us',
+  address: '123 Main Street',
+  city: 'New York',
+  postalCode: '10001'
+};
+
+// Mock passes data
+const mockPasses = [
+  {
+    id: '1',
+    name: 'Melbourne Unlimited Card',
+    city: 'Melbourne',
+    type: 'Unlimited Pass',
+    status: 'active',
+    price: 149.00,
+    originalPrice: 249.00,
+    discount: 40,
+    attractions: 25,
+    validFrom: '2024-01-15',
+    validUntil: '2024-01-22',
+    daysRemaining: 3,
+    image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=400',
+    usedAttractions: 8
+  },
+  {
+    id: '2', 
+    name: 'Melbourne Selective Card',
+    city: 'Melbourne',
+    type: 'Selective Pass',
+    status: 'active',
+    price: 89.00,
+    originalPrice: 149.00,
+    discount: 40,
+    attractions: 12,
+    validFrom: '2024-02-01',
+    validUntil: '2024-02-08',
+    daysRemaining: 12,
+    image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?w=400',
+    usedAttractions: 3
+  },
+  {
+    id: '3',
+    name: 'Sydney Explorer Pass',
+    city: 'Sydney',
+    type: 'Standard Pass',
+    status: 'expired',
+    price: 89.00,
+    originalPrice: 149.00,
+    discount: 40,
+    attractions: 15,
+    validFrom: '2023-12-01',
+    validUntil: '2023-12-08',
+    daysRemaining: 0,
+    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    usedAttractions: 12
+  }
+];
+
+// Mock itineraries data
+const mockItineraries = [
+  {
+    id: '1',
+    name: 'Melbourne Unlimited Card',
+    city: 'Melbourne',
+    duration: '7 days',
+    attractions: 25,
+    createdDate: '2024-01-15',
+    status: 'active'
+  }
+];
+
+export function ProfilePage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onCreateItineraryClick,
+  onViewItineraryClick,
+  onOffersClick,
+  onDownloadAppClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage
+}: ProfilePageProps) {
+  const [activeTab, setActiveTab] = useState('profile');
+  const [formData, setFormData] = useState(mockUserData);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleSaveProfile = () => {
+    console.log('Saving profile...', formData);
+    // Handle profile save
+  };
+
+  const activePasses = mockPasses.filter(pass => pass.status === 'active');
+  const expiredPasses = mockPasses.filter(pass => pass.status === 'expired');
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar */}
+      <Navbar 
+        activeCity=""
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={true}
+        user={{ email: "user@example.com", name: "John Doe" }}
+      />
+
+      {/* Header Section */}
+      <section className="pt-40 pb-8 bg-gradient-to-br from-muted/30 to-background">
+        <div className="container mx-auto px-4">
+          {/* Back Button */}
+          <motion.button
+            onClick={onBackClick}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors duration-200"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span className="font-normal">Back</span>
+          </motion.button>
+
+          {/* Page Title */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+          >
+            <h1 className="font-poppins text-3xl md:text-4xl lg:text-5xl mb-4">
+              <span className="font-light">My</span>{' '}
+              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Profile</span>
+            </h1>
+            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600">
+              Manage your account, passes, and travel itineraries
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="py-12">
+        <div className="container mx-auto px-4">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
+            {/* Tab Navigation */}
+            <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
+              <TabsTrigger value="profile" className="font-poppins font-light">My Profile</TabsTrigger>
+              <TabsTrigger value="passes" className="font-poppins font-light">My Passes</TabsTrigger>
+              <TabsTrigger value="itineraries" className="font-poppins font-light">My Itineraries</TabsTrigger>
+            </TabsList>
+
+            {/* My Profile Tab */}
+            <TabsContent value="profile" className="space-y-8">
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Profile Form */}
+                <div className="lg:col-span-2">
+                  <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                  >
+                    <Card>
+                      <CardHeader>
+                        <CardTitle className="flex items-center gap-2 font-poppins font-normal">
+                          <User className="w-5 h-5" />
+                          Personal Information
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
+                            <Input
+                              id="firstName"
+                              value={formData.firstName}
+                              onChange={(e) => handleInputChange('firstName', e.target.value)}
+                              className="mt-1 font-poppins font-light"
+                            />
+                          </div>
+                          <div>
+                            <Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
+                            <Input
+                              id="lastName"
+                              value={formData.lastName}
+                              onChange={(e) => handleInputChange('lastName', e.target.value)}
+                              className="mt-1 font-poppins font-light"
+                            />
+                          </div>
+                        </div>
+
+                        <div>
+                          <Label htmlFor="email" className="font-poppins font-light">Email Address</Label>
+                          <Input
+                            id="email"
+                            type="email"
+                            value={formData.email}
+                            onChange={(e) => handleInputChange('email', e.target.value)}
+                            className="mt-1 font-poppins font-light"
+                          />
+                        </div>
+
+                        <div>
+                          <Label htmlFor="phone" className="font-poppins font-light">Phone Number</Label>
+                          <Input
+                            id="phone"
+                            type="tel"
+                            value={formData.phone}
+                            onChange={(e) => handleInputChange('phone', e.target.value)}
+                            className="mt-1 font-poppins font-light"
+                          />
+                        </div>
+
+                        <Separator />
+
+                        <h3 className="font-poppins font-normal">Billing Address</h3>
+
+                        <div>
+                          <Label htmlFor="country" className="font-poppins font-light">Country</Label>
+                          <Select value={formData.country} onValueChange={(value) => handleInputChange('country', value)}>
+                            <SelectTrigger className="mt-1">
+                              <SelectValue placeholder="Select country" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="us">United States</SelectItem>
+                              <SelectItem value="au">Australia</SelectItem>
+                              <SelectItem value="uk">United Kingdom</SelectItem>
+                              <SelectItem value="ca">Canada</SelectItem>
+                              <SelectItem value="de">Germany</SelectItem>
+                              <SelectItem value="fr">France</SelectItem>
+                              <SelectItem value="in">India</SelectItem>
+                              <SelectItem value="jp">Japan</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <div>
+                          <Label htmlFor="address" className="font-poppins font-light">Street Address</Label>
+                          <Input
+                            id="address"
+                            value={formData.address}
+                            onChange={(e) => handleInputChange('address', e.target.value)}
+                            className="mt-1 font-poppins font-light"
+                          />
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <Label htmlFor="city" className="font-poppins font-light">City</Label>
+                            <Input
+                              id="city"
+                              value={formData.city}
+                              onChange={(e) => handleInputChange('city', e.target.value)}
+                              className="mt-1 font-poppins font-light"
+                            />
+                          </div>
+                          <div>
+                            <Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
+                            <Input
+                              id="postalCode"
+                              value={formData.postalCode}
+                              onChange={(e) => handleInputChange('postalCode', e.target.value)}
+                              className="mt-1 font-poppins font-light"
+                            />
+                          </div>
+                        </div>
+
+                        <Button
+                          onClick={handleSaveProfile}
+                          className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-normal py-3 font-poppins"
+                        >
+                          Save Changes
+                        </Button>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                </div>
+
+                {/* App Download Section */}
+                <div className="lg:col-span-1">
+                  <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.4 }}
+                  >
+                    <Card className="border border-gray-200 shadow-sm">
+                      <CardContent className="p-8 space-y-6">
+                        {(() => {
+                          // Determine which pass type to show
+                          const hasUnlimitedPass = activePasses.some(pass => pass.type === 'Unlimited Pass');
+                          const hasSelectivePass = activePasses.some(pass => pass.type === 'Selective Pass');
+                          
+                          if (hasUnlimitedPass) {
+                            return (
+                              <>
+                                <div className="space-y-3">
+                                  <h3 className="font-poppins text-xl font-normal">
+                                    Get{' '}
+                                    <span className="text-primary">Melbourne Unlimited Card</span>
+                                  </h3>
+                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
+                                    Unlimited access to 25+ attractions. Visit as many places as you want with one simple card. 
+                                    Save up to 40% compared to individual tickets.
+                                  </p>
+                                </div>
+
+                                {/* Card Benefits */}
+                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <CreditCard className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Unlimited entries to all attractions</span>
+                                  </div>
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <Calendar className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Valid for 7 consecutive days</span>
+                                  </div>
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <MapPin className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Skip the queue at major venues</span>
+                                  </div>
+                                </div>
+
+                                {/* Purchase CTA */}
+                                <div className="space-y-3">
+                                  <Button 
+                                    onClick={onPassesClick}
+                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
+                                  >
+                                    Purchase Unlimited Card
+                                  </Button>
+                                  <Button 
+                                    variant="outline"
+                                    onClick={onCityCardsClick}
+                                    className="w-full font-poppins font-normal"
+                                  >
+                                    Learn More
+                                  </Button>
+                                </div>
+                              </>
+                            );
+                          } else if (hasSelectivePass) {
+                            return (
+                              <>
+                                <div className="space-y-3">
+                                  <h3 className="font-poppins text-xl font-normal">
+                                    Get{' '}
+                                    <span className="text-primary">Selective Card</span>
+                                    {' '}now
+                                  </h3>
+                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
+                                    Choose your own adventure with 12 hand-picked attractions. Perfect for visitors 
+                                    who want flexibility and value.
+                                  </p>
+                                </div>
+
+                                {/* Card Benefits */}
+                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <CreditCard className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Choose from 12 curated attractions</span>
+                                  </div>
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <Calendar className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Flexible 7-day validity period</span>
+                                  </div>
+                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
+                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                      <Star className="w-3 h-3 text-white" />
+                                    </div>
+                                    <span>Save 40% on combined ticket price</span>
+                                  </div>
+                                </div>
+
+                                {/* Purchase CTA */}
+                                <div className="space-y-3">
+                                  <Button 
+                                    onClick={onPassesClick}
+                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
+                                  >
+                                    Purchase Selective Card
+                                  </Button>
+                                  <Button 
+                                    variant="outline"
+                                    onClick={onCityCardsClick}
+                                    className="w-full font-poppins font-normal"
+                                  >
+                                    View All Attractions
+                                  </Button>
+                                </div>
+                              </>
+                            );
+                          } else {
+                            return (
+                              <>
+                                <div className="space-y-3">
+                                  <h3 className="font-poppins text-xl font-normal">
+                                    Get{' '}
+                                    <span className="text-primary">CityCards</span>
+                                    {' '}now
+                                  </h3>
+                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
+                                    Explore Melbourne's best attractions with our flexible card options. 
+                                    Choose unlimited access or select your favorites.
+                                  </p>
+                                </div>
+
+                                {/* Card Options */}
+                                <div className="space-y-3">
+                                  <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4">
+                                    <div className="flex items-start justify-between mb-2">
+                                      <div>
+                                        <h4 className="font-poppins text-base font-medium mb-1">Unlimited Card</h4>
+                                        <p className="text-xs text-gray-600 font-poppins font-light">25+ attractions, unlimited visits</p>
+                                      </div>
+                                      <Badge className="bg-primary text-white">Popular</Badge>
+                                    </div>
+                                    <div className="text-2xl font-poppins font-semibold text-primary">$149</div>
+                                  </div>
+
+                                  <div className="bg-gray-50 rounded-lg p-4">
+                                    <div className="flex items-start justify-between mb-2">
+                                      <div>
+                                        <h4 className="font-poppins text-base font-medium mb-1">Selective Card</h4>
+                                        <p className="text-xs text-gray-600 font-poppins font-light">12 attractions of your choice</p>
+                                      </div>
+                                    </div>
+                                    <div className="text-2xl font-poppins font-semibold text-primary">$89</div>
+                                  </div>
+                                </div>
+
+                                {/* Purchase CTA */}
+                                <div className="space-y-3">
+                                  <Button 
+                                    onClick={onPassesClick}
+                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
+                                  >
+                                    Explore All Cards
+                                  </Button>
+                                  <Button 
+                                    variant="outline"
+                                    onClick={onCityCardsClick}
+                                    className="w-full font-poppins font-normal"
+                                  >
+                                    Learn More
+                                  </Button>
+                                </div>
+                              </>
+                            );
+                          }
+                        })()}
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* My Passes Tab */}
+            <TabsContent value="passes" className="space-y-8">
+              {/* Active Passes */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+              >
+                <h2 className="font-poppins text-2xl mb-6 font-normal">Active Passes</h2>
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  {activePasses.map((pass) => (
+                    <Card key={pass.id} className="overflow-hidden">
+                      <div 
+                        className="flex cursor-pointer hover:bg-gray-50 transition-colors duration-200 rounded-lg p-2 -m-2"
+                        onClick={() => onDownloadAppClick?.()}
+                      >
+                        <div className="w-32 h-32 flex-shrink-0">
+                          <ImageWithFallback
+                            src={pass.image}
+                            alt={pass.city}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        <div className="flex-1 p-6">
+                          <div className="flex items-start justify-between mb-2">
+                            <div>
+                              <h3 className="font-normal font-poppins">{pass.name}</h3>
+                              <Badge variant={pass.status === 'active' ? 'default' : 'secondary'} className="mt-1">
+                                {pass.status}
+                              </Badge>
+                            </div>
+                            <div className="text-right">
+                              <div className="font-semibold text-lg font-poppins">${pass.price}</div>
+                              <div className="text-sm text-gray-500 line-through font-poppins font-light">${pass.originalPrice}</div>
+                            </div>
+                          </div>
+                          
+                          <div className="space-y-2 text-sm font-poppins font-light">
+                            <div className="flex justify-between">
+                              <span>Attractions:</span>
+                              <span>{pass.usedAttractions}/{pass.attractions}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span>Valid until:</span>
+                              <span>{new Date(pass.validUntil).toLocaleDateString()}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span>Days remaining:</span>
+                              <span className="text-primary font-normal">{pass.daysRemaining} days</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
+                
+                {/* Offers Button */}
+                <div className="mt-8 text-center">
+                  <Button 
+                    onClick={onOffersClick}
+                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins px-8 py-3 font-normal"
+                  >
+                    <Star className="w-4 h-4 mr-2" />
+                    View Special Offers
+                  </Button>
+                </div>
+              </motion.div>
+
+              {/* Expired Passes */}
+              {expiredPasses.length > 0 && (
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: 0.4 }}
+                >
+                  <h2 className="font-poppins text-2xl mb-6 font-normal">Expired Passes</h2>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {expiredPasses.map((pass) => (
+                      <Card key={pass.id} className="overflow-hidden opacity-60">
+                        <div className="flex">
+                          <div className="w-32 h-32 flex-shrink-0">
+                            <ImageWithFallback
+                              src={pass.image}
+                              alt={pass.city}
+                              className="w-full h-full object-cover grayscale"
+                            />
+                          </div>
+                          <div className="flex-1 p-6">
+                            <div className="flex items-start justify-between mb-2">
+                              <div>
+                                <h3 className="font-normal font-poppins">{pass.name}</h3>
+                                <Badge variant="secondary" className="mt-1">
+                                  {pass.status}
+                                </Badge>
+                              </div>
+                              <div className="text-right">
+                                <div className="font-semibold text-lg font-poppins">${pass.price}</div>
+                              </div>
+                            </div>
+                            
+                            <div className="space-y-2 text-sm font-poppins font-light">
+                              <div className="flex justify-between">
+                                <span>Attractions visited:</span>
+                                <span>{pass.usedAttractions}/{pass.attractions}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span>Expired on:</span>
+                                <span>{new Date(pass.validUntil).toLocaleDateString()}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </Card>
+                    ))}
+                  </div>
+                </motion.div>
+              )}
+            </TabsContent>
+
+            {/* My Itineraries Tab */}
+            <TabsContent value="itineraries" className="space-y-8">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+              >
+                <div className="flex items-center justify-between mb-6">
+                  <h2 className="font-poppins text-2xl font-normal">My Itineraries</h2>
+                  <Button 
+                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-normal"
+                    onClick={onCreateItineraryClick}
+                  >
+                    <Plus className="w-4 h-4 mr-2" />
+                    Create Itinerary
+                  </Button>
+                </div>
+
+                {mockItineraries.length > 0 ? (
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {mockItineraries.map((itinerary) => (
+                      <Card key={itinerary.id}>
+                        <CardContent className="p-6">
+                          <div className="flex items-start justify-between mb-4">
+                            <div>
+                              <h3 className="font-normal font-poppins">{itinerary.name}</h3>
+                              <p className="text-sm text-gray-600 font-poppins font-light">{itinerary.city}</p>
+                            </div>
+                            <Badge variant={itinerary.status === 'active' ? 'default' : 'secondary'}>
+                              {itinerary.status}
+                            </Badge>
+                          </div>
+                          
+                          <div className="space-y-2 text-sm font-poppins font-light">
+                            <div className="flex items-center gap-2">
+                              <Calendar className="w-4 h-4 text-gray-500" />
+                              <span>{itinerary.duration}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <MapPin className="w-4 h-4 text-gray-500" />
+                              <span>{itinerary.attractions} attractions</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-gray-500" />
+                              <span>Created {new Date(itinerary.createdDate).toLocaleDateString()}</span>
+                            </div>
+                          </div>
+
+                          <Button 
+                            variant="outline" 
+                            className="w-full mt-4 font-poppins font-normal"
+                            onClick={onViewItineraryClick}
+                          >
+                            View Itinerary
+                          </Button>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-16">
+                    <div className="max-w-md mx-auto">
+                      <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <Calendar className="w-12 h-12 text-gray-400" />
+                      </div>
+                      <h3 className="font-poppins text-xl mb-4 font-normal">You don't have an itinerary yet</h3>
+                      <p className="text-gray-600 mb-6 font-poppins font-light">
+                        Create your first itinerary to plan your perfect trip
+                      </p>
+                      <Button 
+                        className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-normal"
+                        onClick={onCreateItineraryClick}
+                      >
+                        <Plus className="w-4 h-4 mr-2" />
+                        Create Itinerary
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </motion.div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onContactUsClick={onContactUsClick}
+        currentPage={currentPage}
+      />
+    </div>
+  );
+}
+
+export default ProfilePage;
\ No newline at end of file
diff --git a/src/components/ReviewsSection.tsx b/src/components/ReviewsSection.tsx
new file mode 100644
index 0000000..c5ef8e9
--- /dev/null
+++ b/src/components/ReviewsSection.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { Star, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+// Customer review data
+const reviews = [
+  {
+    id: 1,
+    name: 'Andrew Sarma',
+    role: 'Entrepreneur',
+    review: 'Salty helped me a lot in finding the best place for our first outdoor adventure trip. They responded very quickly and gave me a detailed account of the place— its history, as well as its best features.',
+    rating: 5,
+    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdCUyMGJ1c2luZXNzfGVufDF8fHx8MTc1NjEyNDA4M3ww&ixlib=rb-4.1.0&q=80&w=1080'
+  },
+  {
+    id: 2,
+    name: 'Sarah Chen',
+    role: 'Travel Blogger',
+    review: 'The Melbourne City Card exceeded all my expectations! The instant QR access made exploring so convenient, and I saved nearly 40% on attraction tickets. The exclusive perks were incredible.',
+    rating: 5,
+    image: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3b21hbiUyMHBvcnRyYWl0JTIwc21pbGluZ3xlbnwxfHx8fDE3NTYxMjQwODd8MA&ixlib=rb-4.1.0&q=80&w=1080'
+  },
+  {
+    id: 3,
+    name: 'Marcus Rodriguez',
+    role: 'Family Traveler',
+    review: 'Traveling with kids can be challenging, but CityCards made it seamless. The skip-the-line access and family-friendly recommendations were game-changers for our Melbourne trip.',
+    rating: 5,
+    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdCUyMHNtaWxpbmd8ZW58MXx8fHwxNzU2MTI0MDkxfDA&ixlib=rb-4.1.0&q=80&w=1080'
+  }
+];
+
+export function ReviewsSection() {
+  const [currentReview, setCurrentReview] = useState(0);
+
+  const nextReview = () => {
+    setCurrentReview((prev) => (prev + 1) % reviews.length);
+  };
+
+  const prevReview = () => {
+    setCurrentReview((prev) => (prev - 1 + reviews.length) % reviews.length);
+  };
+
+  const renderStars = (rating: number) => {
+    return Array.from({ length: 5 }, (_, index) => (
+      <Star
+        key={index}
+        className={`w-4 h-4 ${
+          index < rating ? 'text-yellow-400 fill-current' : 'text-gray-300'
+        }`}
+      />
+    ));
+  };
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/components/ScrollAnimatedJourney.tsx b/src/components/ScrollAnimatedJourney.tsx
new file mode 100644
index 0000000..78ac04a
--- /dev/null
+++ b/src/components/ScrollAnimatedJourney.tsx
@@ -0,0 +1,274 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion, useScroll, useTransform, useInView } from 'motion/react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+// Journey steps data
+const journeySteps = [
+  {
+    id: 1,
+    title: "Choose Your City",
+    subtitle: "Select Your Destination", 
+    description: "Browse our collection of amazing cities and pick the perfect destination for your next adventure. Each city offers unique experiences and attractions.",
+    leftImage: "https://images.unsplash.com/photo-1604488632867-721fbeda8451?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwc2t5bGluZSUyMHNlbGVjdGlvbiUyMHRyYXZlbCUyMGRlc3RpbmF0aW9ufGVufDF8fHx8MTc1NjIwMTkzMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1754299520114-a04483392973?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBndWlkZSUyMG1hcCUyMGRlc3RpbmF0aW9ufGVufDF8fHx8MTc1NjIwMTkzN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  },
+  {
+    id: 2,
+    title: "Select Your Pass",
+    subtitle: "Pick Your Perfect Plan",
+    description: "Choose from our flexible pass options that match your travel style and duration. From 1-day express to 7-day explorer passes.",
+    leftImage: "https://images.unsplash.com/photo-1721632093726-da7496162bd9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwcGFzcyUyMHRpY2tldCUyMG1vYmlsZSUyMHBob25lfGVufDF8fHx8MTc1NjIwMTkzMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1567748534085-467f8a8a475d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjB0aWNrZXRzJTIwYm9hcmRpbmclMjBwYXNzfGVufDF8fHx8MTc1NjIwMTkzOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  },
+  {
+    id: 3,
+    title: "Plan Your Itinerary",
+    subtitle: "Create Your Schedule",
+    description: "Use our smart planning tools to create the perfect itinerary with skip-the-line access to your favorite attractions and experiences.",
+    leftImage: "https://images.unsplash.com/photo-1532594722383-b75fb8381b55?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBwbGFubmluZyUyMGl0aW5lcmFyeSUyMG5vdGVib29rfGVufDF8fHx8MTc1NjIwMTkzMnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1654763001178-a263a55f9821?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwYXJjaGl0ZWN0dXJlJTIwYnVpbGRpbmdzfGVufDF8fHx8MTc1NjE2NDk5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  },
+  {
+    id: 4,
+    title: "Download the App",
+    subtitle: "Get Mobile Access",
+    description: "Download our mobile app to have instant access to your digital pass, maps, and real-time updates wherever you go.",
+    leftImage: "https://images.unsplash.com/photo-1587573578335-9672da4d0292?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2JpbGUlMjBhcHAlMjBkb3dubG9hZCUyMHNtYXJ0cGhvbmV8ZW58MXx8fHwxNzU2MTk2ODkzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1755286218783-5b8334109336?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydHBob25lJTIwdHJhdmVsJTIwYXBwcyUyMGludGVyZmFjZXxlbnwxfHx8fDE3NTYyMDE5Mzl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  },
+  {
+    id: 5,
+    title: "Enjoy Your Adventure",
+    subtitle: "Explore & Discover",
+    description: "Show your digital pass and enjoy instant access to attractions, tours, and experiences. No more waiting in long ticket lines.",
+    leftImage: "https://images.unsplash.com/photo-1695554124271-f26da5212a14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b3VyaXN0JTIwYXR0cmFjdGlvbnMlMjBhZHZlbnR1cmUlMjBleHBsb3JhdGlvbnxlbnwxfHx8fDE3NTYyMDE5MzJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1662714183155-f5d955df7e05?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b3VyaXN0JTIwbGFuZG1hcmslMjBtdXNldW0lMjBhdHRyYWN0aW9ufGVufDF8fHx8MTc1NjIwMTkzOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  },
+  {
+    id: 6,
+    title: "Create Memories",
+    subtitle: "Share Your Journey",
+    description: "Capture amazing moments and share your experiences with friends. Rate attractions and help future travelers discover the best spots.",
+    leftImage: "https://images.unsplash.com/photo-1594269732608-e9897da9baab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBwaG90b2dyYXBoeSUyMG1lbW9yaWVzJTIwc2hhcmluZ3xlbnwxfHx8fDE3NTYyMDE5MzJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    rightImage: "https://images.unsplash.com/photo-1649310655785-abdb55366303?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBqb3VybmFsJTIwY2FtZXJhJTIwbWVtb3JpZXN8ZW58MXx8fHwxNzU2MjAxOTM5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+  }
+];
+
+// Individual step component
+interface JourneyStepProps {
+  step: typeof journeySteps[0];
+  index: number;
+  isActive: boolean;
+  globalScrollProgress: any;
+}
+
+function JourneyStep({ step, index, isActive, globalScrollProgress }: JourneyStepProps) {
+  // Calculate simple parallax effects based on activity
+  const leftCardOffset = isActive ? 0 : -200;
+  const rightCardOffset = isActive ? 0 : 200;
+  const textOffset = isActive ? 0 : 40;
+
+  return (
+    <motion.div
+      className="absolute inset-0 flex items-center justify-center px-8"
+      initial={{ opacity: index === 0 ? 1 : 0 }}
+      animate={{ opacity: isActive ? 1 : 0 }}
+      transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+    >
+      {/* Background gradient overlay - Light mode */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white/90 via-gray-100/70 to-white/90" />
+
+      {/* Left Image Card */}
+      <motion.div
+        className="absolute left-[10%] top-1/2 -translate-y-1/2 w-64 h-80 z-10"
+        initial={{ x: index === 0 ? 0 : -200, opacity: index === 0 ? 1 : 0, rotate: -5 }}
+        animate={isActive ? { x: 0, opacity: 1, rotate: -5 } : { x: -200, opacity: 0, rotate: -5 }}
+        transition={{ duration: 0.8, delay: isActive ? 0.2 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        <div className="relative w-full h-full rounded-3xl overflow-hidden border-4 border-white shadow-2xl transform rotate-[-5deg]">
+          <ImageWithFallback
+            src={step.leftImage}
+            alt={`${step.title} - Left`}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
+        </div>
+      </motion.div>
+
+      {/* Right Image Card */}
+      <motion.div
+        className="absolute right-[10%] top-1/2 -translate-y-1/2 w-64 h-80 z-10"
+        initial={{ x: index === 0 ? 0 : 200, opacity: index === 0 ? 1 : 0, rotate: 5 }}
+        animate={isActive ? { x: 0, opacity: 1, rotate: 5 } : { x: 200, opacity: 0, rotate: 5 }}
+        transition={{ duration: 0.8, delay: isActive ? 0.4 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        <div className="relative w-full h-full rounded-3xl overflow-hidden border-4 border-white shadow-2xl transform rotate-[5deg]">
+          <ImageWithFallback
+            src={step.rightImage}
+            alt={`${step.title} - Right`}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
+        </div>
+      </motion.div>
+
+      {/* Center Text Content */}
+      <motion.div
+        className="relative z-20 text-center max-w-2xl mx-auto px-8"
+        initial={{ y: index === 0 ? 0 : 40, opacity: index === 0 ? 1 : 0 }}
+        animate={isActive ? { y: 0, opacity: 1 } : { y: 40, opacity: 0 }}
+        transition={{ duration: 0.8, delay: isActive ? 0.1 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        {/* Step Number */}
+        <motion.div
+          className="inline-block mb-6 px-4 py-2 bg-gradient-to-r from-primary to-secondary rounded-full"
+          initial={{ scale: index === 0 ? 1 : 0 }}
+          animate={isActive ? { scale: 1 } : { scale: 0 }}
+          transition={{ duration: 0.5, delay: isActive ? 0.3 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <span className="text-white font-semibold text-lg">Step {step.id}</span>
+        </motion.div>
+
+        {/* Title with mixed font weights - Dark text for light mode */}
+        <motion.h2
+          className="mb-4"
+          initial={{ y: index === 0 ? 0 : 20, opacity: index === 0 ? 1 : 0 }}
+          animate={isActive ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
+          transition={{ duration: 0.6, delay: isActive ? 0.4 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <span className="text-5xl text-foreground font-light">
+            {step.title.split(' ').slice(0, -1).join(' ')}{' '}
+          </span>
+          <span className="text-5xl text-foreground font-bold italic">
+            {step.title.split(' ').slice(-1)[0]}
+          </span>
+        </motion.h2>
+
+        {/* Subtitle with gradient */}
+        <motion.h3
+          className="mb-6 text-2xl font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
+          initial={{ y: index === 0 ? 0 : 20, opacity: index === 0 ? 1 : 0 }}
+          animate={isActive ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
+          transition={{ duration: 0.6, delay: isActive ? 0.5 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          {step.subtitle}
+        </motion.h3>
+
+        {/* Description - Muted text for light mode */}
+        <motion.p
+          className="text-xl text-muted-foreground leading-relaxed max-w-xl mx-auto font-poppins"
+          initial={{ y: index === 0 ? 0 : 20, opacity: index === 0 ? 1 : 0 }}
+          animate={isActive ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
+          transition={{ duration: 0.6, delay: isActive ? 0.6 : 0, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          {step.description}
+        </motion.p>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+// Main component
+export function ScrollAnimatedJourney() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeStep, setActiveStep] = useState(0);
+  
+  // Scroll progress for the entire section
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start center", "end center"]
+  });
+
+  // Calculate which step should be active based on scroll progress
+  useEffect(() => {
+    const unsubscribe = scrollYProgress.on("change", (progress) => {
+      // Ensure we have at least the first step active when progress is very low
+      const newActiveStep = Math.max(0, Math.min(Math.floor(progress * journeySteps.length), journeySteps.length - 1));
+      setActiveStep(newActiveStep);
+    });
+
+    return () => unsubscribe();
+  }, [scrollYProgress]);
+
+  return (
+    <section className="relative bg-gradient-to-b from-gray-50/50 to-white" ref={containerRef}>
+      {/* Section Header */}
+      <div className="relative z-10 py-20 text-center">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ y: 30, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
+          >
+            <h2 className="mb-6">
+              <span className="text-5xl md:text-6xl text-foreground font-light">Your</span>{' '}
+              <span className="text-5xl md:text-6xl font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Journey
+              </span>{' '}
+              <span className="text-5xl md:text-6xl text-foreground font-light">Starts Here</span>
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto font-poppins">
+              Follow these simple steps to unlock amazing experiences in your chosen city
+            </p>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Single Journey Steps Container - Tall enough for all steps */}
+      <div className="relative h-[4800px] w-full max-w-[1440px] mx-auto overflow-hidden">
+        {/* All steps stacked in the same position */}
+        {journeySteps.map((step, index) => (
+          <JourneyStep
+            key={step.id}
+            step={step}
+            index={index}
+            isActive={activeStep === index}
+            globalScrollProgress={scrollYProgress}
+          />
+        ))}
+
+        {/* Step Progress Indicator - Fixed position */}
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 flex space-x-3 z-30">
+          {journeySteps.map((_, i) => (
+            <div
+              key={i}
+              className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                i === activeStep ? 'bg-primary w-8' : 'bg-muted-foreground/30'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Background Effects - Light mode */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <motion.div
+          className="absolute top-1/4 -left-32 w-64 h-64 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl"
+          animate={{
+            y: [0, -30, 0],
+            x: [0, 20, 0],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        />
+        <motion.div
+          className="absolute bottom-1/4 -right-32 w-80 h-80 bg-gradient-to-l from-secondary/8 to-primary/8 rounded-full blur-3xl"
+          animate={{
+            y: [0, 40, 0],
+            x: [0, -15, 0],
+          }}
+          transition={{
+            duration: 10,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 1
+          }}
+        />
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/SectionWrapper.tsx b/src/components/SectionWrapper.tsx
new file mode 100644
index 0000000..877e267
--- /dev/null
+++ b/src/components/SectionWrapper.tsx
@@ -0,0 +1,55 @@
+import { motion } from 'motion/react';
+import { getVariants, getViewportSettings } from '../utils/helpers';
+import {
+  staggerContainer,
+  fastStaggerContainer,
+  backgroundVariants
+} from '../utils/animations';
+
+interface SectionWrapperProps {
+  id: string;
+  children: React.ReactNode;
+  containerType?: 'stagger' | 'fastStagger';
+  backgroundGradient?: string;
+  className?: string;
+  isMobile?: boolean;
+  variantType?: 'section' | 'card' | 'footer';
+}
+
+export function SectionWrapper({
+  id,
+  children,
+  containerType = 'stagger',
+  backgroundGradient,
+  className = '',
+  isMobile = false,
+  variantType = 'section'
+}: SectionWrapperProps) {
+  const containerVariants = containerType === 'fastStagger' ? fastStaggerContainer : staggerContainer;
+  const viewportType = variantType === 'footer' ? 'footer' : variantType;
+
+  return (
+    <motion.section
+      id={id}
+      className={`relative ${className}`}
+      initial="hidden"
+      whileInView="visible"
+      viewport={getViewportSettings(viewportType)}
+      variants={containerVariants}
+    >
+      {backgroundGradient && (
+        <motion.div
+          className={`absolute inset-0 ${backgroundGradient}`}
+          variants={backgroundVariants}
+        />
+      )}
+      
+      <motion.div 
+        className="relative z-10"
+        variants={getVariants(variantType, isMobile)}
+      >
+        {children}
+      </motion.div>
+    </motion.section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/SecureCheckoutPage.tsx b/src/components/SecureCheckoutPage.tsx
new file mode 100644
index 0000000..2b61d96
--- /dev/null
+++ b/src/components/SecureCheckoutPage.tsx
@@ -0,0 +1,527 @@
+import { useState } from 'react';
+import { motion } from 'motion/react';
+import { ArrowLeft, Lock, Shield, CreditCard, Check, X, Tag } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Separator } from './ui/separator';
+import { Badge } from './ui/badge';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+
+interface User {
+  email: string;
+  name: string;
+}
+
+interface SecureCheckoutPageProps {
+  onBackClick: () => void;
+  onHomeClick: () => void;
+  onMelbourneClick: () => void;
+  onPassesClick: () => void;
+  onCheckoutClick: () => void;
+  onSignInClick: () => void;
+  onSignOutClick: () => void;
+  onAttractionsClick: () => void;
+  onBlogsClick: () => void;
+  onHowItWorksClick: () => void;
+  onFAQClick: () => void;
+  onPrivacyPolicyClick: () => void;
+  onAboutUsClick: () => void;
+  onProfileClick: () => void;
+  onCityCardsClick: () => void;
+  onMagicItineraryClick: () => void;
+  onPostCardsClick: () => void;
+  onOffersClick: () => void;
+  onContactUsClick?: () => void;
+  onEsimsClick?: () => void;
+  onHotelDiscountsClick?: () => void;
+  currentPage?: string;
+  user: User | null;
+}
+
+export function SecureCheckoutPage({
+  onBackClick,
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onCheckoutClick,
+  onSignInClick,
+  onSignOutClick,
+  onAttractionsClick,
+  onBlogsClick,
+  onHowItWorksClick,
+  onFAQClick,
+  onPrivacyPolicyClick,
+  onAboutUsClick,
+  onProfileClick,
+  onCityCardsClick,
+  onMagicItineraryClick,
+  onPostCardsClick,
+  onOffersClick,
+  onContactUsClick,
+  onEsimsClick,
+  onHotelDiscountsClick,
+  currentPage,
+  user
+}: SecureCheckoutPageProps) {
+  const [selectedTab, setSelectedTab] = useState('myself');
+  const [formData, setFormData] = useState({
+    firstName: 'Frank',
+    lastName: 'Adam S',
+    email: 'frank2023@mail.com',
+    phone: '',
+    travelDate: '',
+    billingAddress: '',
+    city: '',
+    country: 'England',
+    state: '',
+    zipCode: '000000'
+  });
+  const [discountCode, setDiscountCode] = useState('');
+  const [isEmailVerified, setIsEmailVerified] = useState(false);
+  const [showPaymentSuccess, setShowPaymentSuccess] = useState(false);
+
+  const orderSummary = {
+    item: 'Melbourne - Unlimited Card',
+    duration: '2 Days',
+    adults: 3,
+    kids: 3,
+    quantity: 1,
+    price: 49.80,
+    discount: 7.20,
+    tax: 2.24
+  };
+
+  const subtotal = orderSummary.price;
+  const discount = orderSummary.discount;
+  const total = subtotal - discount;
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handlePayment = () => {
+    setShowPaymentSuccess(true);
+    setTimeout(() => {
+      setShowPaymentSuccess(false);
+      onHomeClick();
+    }, 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      <div className="container mx-auto px-4 py-12">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <Button
+            variant="ghost"
+            onClick={onBackClick}
+            className="mb-6 p-0 hover:bg-transparent"
+          >
+            <ArrowLeft className="w-5 h-5 mr-2" />
+            Back
+          </Button>
+          
+          <div className="flex items-center gap-4 mb-2">
+            <h1 className="font-merchant text-3xl md:text-4xl leading-tight">
+              Secure <span className="text-primary">Checkout</span>
+            </h1>
+            <div className="flex items-center gap-2 text-green-600">
+              <Shield className="w-5 h-5" />
+              <span className="font-poppins text-sm font-medium">SSL Secured</span>
+            </div>
+          </div>
+          
+          <p className="text-muted-foreground">
+            Complete your purchase securely. Your payment information is protected.
+          </p>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Checkout Form */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-2"
+          >
+            <Card className="shadow-lg border-0">
+              <CardHeader className="pb-6">
+                <Tabs value={selectedTab} onValueChange={setSelectedTab} className="w-full">
+                  <TabsList className="grid w-fit grid-cols-2 bg-muted/50">
+                    <TabsTrigger value="myself" className="px-6">For myself</TabsTrigger>
+                    <TabsTrigger value="gift" className="px-6">To gift Someone</TabsTrigger>
+                  </TabsList>
+                </Tabs>
+              </CardHeader>
+
+              <CardContent className="space-y-8">
+                {/* Personal Information */}
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.1 }}
+                  className="space-y-6"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
+                      1
+                    </div>
+                    <h2 className="font-merchant text-xl font-medium leading-snug">Personal Information</h2>
+                  </div>
+
+                  <div className="grid md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="firstName">First Name</Label>
+                      <Input
+                        id="firstName"
+                        value={formData.firstName}
+                        onChange={(e) => handleInputChange('firstName', e.target.value)}
+                        className="h-12"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="lastName">Last Name</Label>
+                      <Input
+                        id="lastName"
+                        value={formData.lastName}
+                        onChange={(e) => handleInputChange('lastName', e.target.value)}
+                        className="h-12"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email Address</Label>
+                    <div className="relative">
+                      <Input
+                        id="email"
+                        type="email"
+                        value={formData.email}
+                        onChange={(e) => handleInputChange('email', e.target.value)}
+                        className="h-12 pr-20"
+                      />
+                      <Button
+                        size="sm"
+                        variant={isEmailVerified ? "default" : "outline"}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 h-8"
+                        onClick={() => setIsEmailVerified(!isEmailVerified)}
+                      >
+                        {isEmailVerified ? (
+                          <>
+                            <Check className="w-3 h-3 mr-1" />
+                            Verified
+                          </>
+                        ) : (
+                          'Verify'
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="grid md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="phone">Phone Number</Label>
+                      <Input
+                        id="phone"
+                        type="tel"
+                        placeholder="Enter mobile number"
+                        value={formData.phone}
+                        onChange={(e) => handleInputChange('phone', e.target.value)}
+                        className="h-12"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="travelDate">Select Travel Date</Label>
+                      <Input
+                        id="travelDate"
+                        type="date"
+                        value={formData.travelDate}
+                        onChange={(e) => handleInputChange('travelDate', e.target.value)}
+                        className="h-12"
+                      />
+                    </div>
+                  </div>
+                </motion.div>
+
+                <Separator />
+
+                {/* Billing Information */}
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.2 }}
+                  className="space-y-6"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
+                      2
+                    </div>
+                    <h2 className="font-merchant text-xl font-medium leading-snug">Billing Information</h2>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="billingAddress">Billing Address</Label>
+                      <Input
+                        id="billingAddress"
+                        placeholder="Enter Address"
+                        value={formData.billingAddress}
+                        onChange={(e) => handleInputChange('billingAddress', e.target.value)}
+                        className="h-12"
+                      />
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="city">City</Label>
+                        <Input
+                          id="city"
+                          placeholder="Enter City"
+                          value={formData.city}
+                          onChange={(e) => handleInputChange('city', e.target.value)}
+                          className="h-12"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="country">Country</Label>
+                        <Input
+                          id="country"
+                          value={formData.country}
+                          onChange={(e) => handleInputChange('country', e.target.value)}
+                          className="h-12"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="state">State</Label>
+                        <Input
+                          id="state"
+                          placeholder="State"
+                          value={formData.state}
+                          onChange={(e) => handleInputChange('state', e.target.value)}
+                          className="h-12"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="zipCode">Zip Code</Label>
+                        <Input
+                          id="zipCode"
+                          value={formData.zipCode}
+                          onChange={(e) => handleInputChange('zipCode', e.target.value)}
+                          className="h-12"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Order Summary */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-1"
+          >
+            <Card className="shadow-lg border-0 sticky top-6">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <CreditCard className="w-5 h-5" />
+                  Order Summary
+                </CardTitle>
+              </CardHeader>
+
+              <CardContent className="space-y-6">
+                {/* Item Details */}
+                <div className="space-y-4">
+                  <div className="flex justify-between items-start">
+                    <div className="space-y-2">
+                      <h3 className="font-poppins font-medium">{orderSummary.item}</h3>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <span>{orderSummary.duration}</span>
+                        <span>•</span>
+                        <span>Adults-{orderSummary.adults}</span>
+                        <span>•</span>
+                        <span>Kids-{orderSummary.kids}</span>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Qty: {orderSummary.quantity}
+                      </div>
+                    </div>
+                    <div className="font-poppins text-lg font-medium">
+                      ${orderSummary.price.toFixed(2)}
+                    </div>
+                  </div>
+                </div>
+
+                <Separator />
+
+                {/* Discount Code */}
+                <div className="space-y-3">
+                  <div className="flex gap-2">
+                    <Input
+                      placeholder="Gift or discount code"
+                      value={discountCode}
+                      onChange={(e) => setDiscountCode(e.target.value)}
+                      className="flex-1"
+                    />
+                    <Button variant="outline" className="px-6">
+                      Apply
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator />
+
+                {/* Price Breakdown */}
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span>Subtotal</span>
+                    <span>${subtotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between text-green-600">
+                    <span>Discount</span>
+                    <span>-${discount.toFixed(2)}</span>
+                  </div>
+                </div>
+
+                <Separator />
+
+                {/* Total */}
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <div className="font-medium">Total</div>
+                      <div className="text-sm text-muted-foreground">
+                        Including ${orderSummary.tax.toFixed(2)} in taxes
+                      </div>
+                    </div>
+                    <div className="text-2xl font-bold text-primary">
+                      ${total.toFixed(2)}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Payment Button */}
+                <Button
+                  onClick={handlePayment}
+                  className="w-full h-14 text-lg bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 relative overflow-hidden group"
+                  disabled={showPaymentSuccess}
+                >
+                  {showPaymentSuccess ? (
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      className="flex items-center gap-2"
+                    >
+                      <Check className="w-5 h-5" />
+                      Payment Successful!
+                    </motion.div>
+                  ) : (
+                    <>
+                      <Lock className="w-5 h-5 mr-2" />
+                      Pay ${total.toFixed(2)}
+                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
+                    </>
+                  )}
+                </Button>
+
+                {/* Security Notice */}
+                <div className="text-xs text-muted-foreground leading-relaxed">
+                  Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.
+                </div>
+
+                {/* Trust Badges */}
+                <div className="flex items-center justify-center gap-4 pt-4">
+                  <div className="flex items-center gap-2 text-green-600">
+                    <Shield className="w-4 h-4" />
+                    <span className="text-xs">256-bit SSL</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-blue-600">
+                    <Lock className="w-4 h-4" />
+                    <span className="text-xs">Secure Payment</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+
+      <Footer 
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+      />
+
+      {/* Success Overlay */}
+      {showPaymentSuccess && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center"
+        >
+          <motion.div
+            initial={{ scale: 0, rotate: 180 }}
+            animate={{ scale: 1, rotate: 0 }}
+            className="bg-white p-8 rounded-2xl shadow-2xl text-center max-w-sm mx-4"
+          >
+            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Check className="w-8 h-8 text-green-600" />
+            </div>
+            <h3 className="text-xl font-medium mb-2">Payment Successful!</h3>
+            <p className="text-muted-foreground">
+              Your Melbourne CityCard has been purchased successfully.
+            </p>
+          </motion.div>
+        </motion.div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/SimpleNavbar.tsx b/src/components/SimpleNavbar.tsx
new file mode 100644
index 0000000..1c7adfe
--- /dev/null
+++ b/src/components/SimpleNavbar.tsx
@@ -0,0 +1,177 @@
+import { useState, useEffect } from 'react';
+import { Menu, X, ChevronDown, Globe } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Button } from './ui/button';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import logoImage from 'figma:asset/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png';
+
+interface SimpleNavbarProps {
+  onHomeClick?: () => void;
+  onMelbourneClick?: () => void;
+  onPassesClick?: () => void;
+  onSignInClick?: () => void;
+  onAttractionsClick?: () => void;
+  currentPage?: string;
+}
+
+export function Navbar({
+  onHomeClick,
+  onMelbourneClick,
+  onPassesClick,
+  onSignInClick,
+  onAttractionsClick,
+  currentPage = 'home'
+}: SimpleNavbarProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  // Handle scroll effect
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navItems = [
+    { label: 'Home', action: onHomeClick, active: currentPage === 'home' },
+    { label: 'Melbourne', action: onMelbourneClick, active: currentPage === 'melbourne' },
+    { label: 'Attractions', action: onAttractionsClick, active: currentPage === 'attractions' },
+    { label: 'Passes', action: onPassesClick, active: currentPage === 'passes' }
+  ];
+
+  return (
+    <motion.nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled
+          ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100'
+          : 'bg-transparent'
+      }`}
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <motion.div 
+            className="flex items-center cursor-pointer"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={onHomeClick}
+          >
+            <ImageWithFallback
+              src={logoImage}
+              alt="CityCards Logo"
+              className="h-8 w-auto"
+            />
+          </motion.div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navItems.map((item) => (
+              <motion.button
+                key={item.label}
+                onClick={item.action}
+                className={`font-poppins relative px-4 py-2 font-medium transition-all duration-200 ${
+                  item.active
+                    ? 'text-primary'
+                    : 'text-gray-700 hover:text-gray-900'
+                }`}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                {item.label}
+                {item.active && (
+                  <motion.div
+                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-primary to-secondary rounded-full"
+                    layoutId="activeTab"
+                  />
+                )}
+              </motion.button>
+            ))}
+          </div>
+
+          {/* Right Section */}
+          <div className="hidden md:flex items-center space-x-4">
+            <div className="font-poppins flex items-center space-x-2 text-gray-700 hover:text-gray-900 px-3 py-2 font-medium transition-colors duration-200 cursor-pointer rounded-lg hover:bg-gray-50">
+              <Globe className="w-4 h-4" />
+              <span>ENG</span>
+              <ChevronDown className="w-3 h-3" />
+            </div>
+
+            <Button
+              onClick={onSignInClick}
+              variant="outline"
+              className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
+            >
+              Sign In
+            </Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="md:hidden">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              className="md:hidden"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              <div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t border-gray-100">
+                {navItems.map((item) => (
+                  <motion.button
+                    key={item.label}
+                    onClick={() => {
+                      item.action?.();
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className={`block w-full text-left px-3 py-2 rounded-md font-medium transition-colors duration-200 ${
+                      item.active
+                        ? 'text-primary bg-primary/10'
+                        : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
+                    }`}
+                    whileHover={{ x: 4 }}
+                  >
+                    {item.label}
+                  </motion.button>
+                ))}
+                
+                <div className="pt-4 pb-2 border-t border-gray-100">
+                  <Button
+                    onClick={() => {
+                      onSignInClick?.();
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className="w-full"
+                  >
+                    Sign In
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.nav>
+  );
+}
\ No newline at end of file
diff --git a/src/components/SubNavbar.tsx b/src/components/SubNavbar.tsx
new file mode 100644
index 0000000..2b7c93b
--- /dev/null
+++ b/src/components/SubNavbar.tsx
@@ -0,0 +1,112 @@
+import { motion } from 'motion/react';
+
+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 activeProduct = activePage || activeTab;
+  
+  const products = [
+    {
+      id: 'citycards',
+      label: 'CityCards',
+      onClick: onCityCardsClick
+    },
+    {
+      id: 'magic-itinerary',
+      label: 'Magic Itinerary',
+      onClick: onMagicItineraryClick
+    },
+    {
+      id: 'postcards',
+      label: 'PostCards',
+      onClick: onPostCardsClick
+    },
+    {
+      id: 'offers',
+      label: 'Offers',
+      onClick: onOffersClick
+    },
+    {
+      id: 'esims',
+      label: 'eSIMs',
+      onClick: onEsimsClick
+    },
+    {
+      id: 'hotel-discounts',
+      label: 'Hotel Discounts',
+      onClick: onHotelDiscountsClick
+    }
+  ];
+
+  return (
+    <motion.div
+      className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ 
+        duration: 0.6, 
+        ease: [0.25, 0.1, 0.25, 1], 
+        delay: 0.4 
+      }}
+    >
+      <motion.div
+        className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
+        initial={{ scale: 0.9 }}
+        animate={{ 
+          scale: 1,
+          y: 0,
+          boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
+        }}
+        transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        <div className="flex items-center gap-1">
+          {products.map((product) => (
+            <motion.button
+              key={product.id}
+              onClick={product.onClick}
+              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'
+                  : 'text-gray-700 hover:text-white hover:bg-gray-800'
+              }`}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              {product.label}
+              
+              {/* Hover effect for non-active items */}
+              {activeProduct !== product.id && (
+                <motion.div
+                  className="absolute inset-0 bg-gray-800 rounded-full -z-10"
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  whileHover={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.2 }}
+                />
+              )}
+            </motion.button>
+          ))}
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export default SubNavbar;
\ No newline at end of file
diff --git a/src/components/TrustSection.tsx b/src/components/TrustSection.tsx
new file mode 100644
index 0000000..14fd60c
--- /dev/null
+++ b/src/components/TrustSection.tsx
@@ -0,0 +1,435 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion, AnimatePresence, useMotionValue, useTransform, PanInfo } from 'motion/react';
+
+const testimonials = [
+  {
+    id: 1,
+    name: 'Sarah Mitchell',
+    role: 'Travel Blogger',
+    company: 'Wanderlust Adventures',
+    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b1ac?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'CityCards completely transformed our Australian city-hopping adventure. The curated attraction passes saved us 60% on costs and the skip-the-line access was invaluable. Every city felt like a personalized experience tailored just for us.',
+    signature: 'Sarah M.'
+  },
+  {
+    id: 2,
+    name: 'Michael Chen',
+    role: 'Travel Photographer',
+    company: 'Urban Lens Studio',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'As someone who captures cities worldwide, CityCards gave me access to unique perspectives and hidden gems across Australia. The mobile city guide made discovering photo spots seamless, from Sydney\'s harbor to Melbourne\'s laneways.',
+    signature: 'Michael C.'
+  },
+  {
+    id: 3,
+    name: 'Emma Rodriguez',
+    role: 'Adventure Seeker',
+    company: 'Solo Travel Co.',
+    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'Solo traveling became effortless with CityCards. From instant bookings to local recommendations, I felt confident exploring Australian cities. The comprehensive city guides unlocked experiences I never knew existed.',
+    signature: 'Emma R.'
+  },
+  {
+    id: 4,
+    name: 'David Park',
+    role: 'Family Traveler',
+    company: 'Adventure Families',
+    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'Planning family trips used to be overwhelming, but CityCards simplified everything. The kids loved the interactive city experiences and we saved hours with skip-the-line access at every single attraction we visited.',
+    signature: 'David P.'
+  },
+  {
+    id: 5,
+    name: 'Lisa Thompson',
+    role: 'Business Traveler',
+    company: 'Global Solutions Inc.',
+    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'Between business meetings, CityCards helped me maximize my limited free time in every city. Quick access to top attractions without the hassle of traditional booking made every business trip memorable and productive.',
+    signature: 'Lisa T.'
+  },
+  {
+    id: 6,
+    name: 'James Wilson',
+    role: 'Cultural Explorer',
+    company: 'Heritage Travels',
+    avatar: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?q=80&w=150&auto=format&fit=crop&ixlib=rb-4.0.3',
+    quote: 'CityCards opened doors to authentic cultural experiences I would have missed otherwise. The curated recommendations led to discoveries that became the absolute highlights of our entire cultural journey through Australia\'s diverse cities.',
+    signature: 'James W.'
+  }
+];
+
+// Custom SVG quotation marks
+const QuoteStart = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 8C10 9.3 9.3 10 8 10C6.7 10 6 9.3 6 8C6 6.7 6.7 6 8 6C9.3 6 10 6.7 10 8ZM18 8C18 9.3 17.3 10 16 10C14.7 10 14 9.3 14 8C14 6.7 14.7 6 16 6C17.3 6 18 6.7 18 8ZM8 12L6 18H10L8 12ZM16 12L14 18H18L16 12Z" fill="currentColor"/>
+  </svg>
+);
+
+const QuoteEnd = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 16C14 14.7 14.7 14 16 14C17.3 14 18 14.7 18 16C18 17.3 17.3 18 16 18C14.7 18 14 17.3 14 16ZM6 16C6 14.7 6.7 14 8 14C9.3 14 10 14.7 10 16C10 17.3 9.3 18 8 18C6.7 18 6 17.3 6 16ZM16 12L18 6H14L16 12ZM8 12L10 6H6L8 12Z" fill="currentColor"/>
+  </svg>
+);
+
+export function TrustSection() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
+  const [dragConstraints, setDragConstraints] = useState({ left: 0, right: 0 });
+  const [showNameOnProgress, setShowNameOnProgress] = useState(false);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  
+  // Calculate how many cards to show based on screen size
+  const [cardsPerView, setCardsPerView] = useState(1);
+  
+  useEffect(() => {
+    const updateCardsPerView = () => {
+      if (window.innerWidth >= 1200) {
+        setCardsPerView(2);
+      } else {
+        setCardsPerView(1);
+      }
+    };
+    
+    updateCardsPerView();
+    window.addEventListener('resize', updateCardsPerView);
+    return () => window.removeEventListener('resize', updateCardsPerView);
+  }, []);
+
+  const totalSlides = Math.ceil(testimonials.length / cardsPerView);
+  const maxIndex = totalSlides - 1;
+
+  useEffect(() => {
+    if (carouselRef.current) {
+      const cardWidth = carouselRef.current.offsetWidth;
+      const maxDrag = -(cardWidth * maxIndex);
+      setDragConstraints({ left: maxDrag, right: 0 });
+    }
+  }, [maxIndex, cardsPerView]);
+
+  const handlePrevious = () => {
+    setCurrentIndex(prev => Math.max(0, prev - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex(prev => Math.min(maxIndex, prev + 1));
+  };
+
+  const handleDragEnd = (event: any, info: PanInfo) => {
+    const offset = info.offset.x;
+    const velocity = info.velocity.x;
+    
+    if (Math.abs(offset) > 100 || Math.abs(velocity) > 500) {
+      if (offset > 0 && currentIndex > 0) {
+        setCurrentIndex(prev => prev - 1);
+      } else if (offset < 0 && currentIndex < maxIndex) {
+        setCurrentIndex(prev => prev + 1);
+      }
+    }
+  };
+
+  const progress = totalSlides > 1 ? (currentIndex / maxIndex) * 100 : 0;
+  const getCurrentTestimonialNames = () => {
+    const startIndex = currentIndex * cardsPerView;
+    const endIndex = Math.min(startIndex + cardsPerView, testimonials.length);
+    return testimonials.slice(startIndex, endIndex).map(t => t.name).join(', ');
+  };
+
+  return (
+    <section className="py-16 md:py-24 bg-background relative overflow-hidden">
+      {/* Subtle background texture */}
+      <div 
+        className="absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z'/%3E%3C/g%3E%3C/svg%3E")`
+        }}
+      />
+
+      <div className="container mx-auto px-4" style={{ overflow: 'visible' }}>
+        {/* Header */}
+        <div className="text-center mb-16">
+          <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-6 text-gray-900">
+            <span className="font-light">What Our</span>{' '}
+            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Travelers
+            </span>{' '}
+            <span className="font-light">Say</span>
+          </h2>
+          
+          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
+            Real stories from real travelers who've discovered amazing cities with CityCards
+          </p>
+        </div>
+
+        {/* Carousel Container */}
+        <div className="relative max-w-7xl mx-auto" style={{ overflow: 'visible' }}>
+
+
+          {/* Carousel */}
+          <div className="mx-8 py-6">
+            <motion.div
+              ref={carouselRef}
+              className="flex"
+              animate={{ x: `${-currentIndex * 100}%` }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+              drag="x"
+              dragConstraints={dragConstraints}
+              onDragEnd={handleDragEnd}
+              style={{ cursor: 'grab', overflow: 'visible' }}
+              whileDrag={{ cursor: 'grabbing' }}
+            >
+              {testimonials.map((testimonial, index) => {
+                const cardRotation = (index % 3 - 1) * 1.5 + (Math.random() - 0.5) * 1;
+                const cardOffset = (index % 2) * 10;
+                
+                return (
+                  <motion.div
+                    key={testimonial.id}
+                    className="flex-shrink-0 px-8 py-4"
+                    style={{ 
+                      width: cardsPerView === 2 ? '50%' : '100%',
+                    }}
+                    whileHover={{ 
+                      scale: 1.02,
+                      y: -5,
+                      transition: { duration: 0.2 }
+                    }}
+                    onHoverStart={() => setHoveredCard(testimonial.id)}
+                    onHoverEnd={() => setHoveredCard(null)}
+                  >
+                    {/* Paper Card with enhanced realism */}
+                    <div
+                      className="relative bg-white rounded-lg p-8"
+                      style={{
+                        transform: `rotate(${cardRotation}deg) translateY(${cardOffset}px)`,
+                        transformOrigin: 'center center',
+                        minHeight: '480px',
+                        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%),
+                          linear-gradient(145deg, #ffffff 0%, #fefefe 25%, #fdfdfd 50%, #fcfcfc 75%, #fbfbfb 100%)
+                        `,
+                        boxShadow: `
+                          0 8px 32px rgba(0, 0, 0, 0.12),
+                          0 4px 16px rgba(0, 0, 0, 0.08),
+                          0 2px 8px rgba(0, 0, 0, 0.06),
+                          inset 0 1px 0 rgba(255, 255, 255, 0.8),
+                          inset 0 -1px 0 rgba(0, 0, 0, 0.02)
+                        `,
+                        border: '1px solid rgba(0, 0, 0, 0.04)',
+                        filter: hoveredCard === testimonial.id ? 'brightness(1.02)' : 'brightness(1)',
+                        transition: 'all 0.3s ease'
+                      }}
+                    >
+                      {/* Enhanced paper texture */}
+                      <div 
+                        className="absolute inset-0 rounded-lg opacity-40 pointer-events-none"
+                        style={{
+                          backgroundImage: `
+                            url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f5f0e8' fill-opacity='0.4'%3E%3Cpath d='M10 10h1v1h-1zM20 15h1v1h-1zM30 25h1v1h-1zM40 30h1v1h-1zM50 40h1v1h-1zM15 50h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E"),
+                            radial-gradient(circle at 25% 75%, rgba(245, 240, 232, 0.3) 0%, transparent 40%),
+                            radial-gradient(circle at 75% 25%, rgba(250, 245, 235, 0.2) 0%, transparent 35%)
+                          `,
+                          mixBlendMode: 'multiply'
+                        }}
+                      />
+
+                      {/* Paper creases and folds */}
+                      <div 
+                        className="absolute inset-0 rounded-lg opacity-20 pointer-events-none"
+                        style={{
+                          background: `
+                            linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.02) 45%, rgba(0,0,0,0.01) 55%, transparent 60%),
+                            linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.015) 35%, transparent 40%)
+                          `
+                        }}
+                      />
+
+                      {/* Corner fold effect */}
+                      <div 
+                        className="absolute top-0 right-0 w-12 h-12 opacity-15 pointer-events-none"
+                        style={{
+                          background: `
+                            linear-gradient(-45deg, 
+                              transparent 40%, 
+                              rgba(0,0,0,0.08) 45%, 
+                              rgba(0,0,0,0.12) 50%, 
+                              rgba(0,0,0,0.08) 55%, 
+                              transparent 60%
+                            )
+                          `,
+                          borderTopRightRadius: '8px',
+                          clipPath: 'polygon(60% 0%, 100% 0%, 100% 60%)'
+                        }}
+                      />
+
+                      {/* Paperclip decoration */}
+                      <div 
+                        className="absolute -top-2 -right-2 w-8 h-12 opacity-60 pointer-events-none z-10"
+                        style={{
+                          background: `
+                            linear-gradient(145deg, #e0e0e0 0%, #d0d0d0 50%, #c8c8c8 100%)
+                          `,
+                          borderRadius: '2px 2px 4px 4px',
+                          boxShadow: `
+                            0 2px 4px rgba(0,0,0,0.1),
+                            inset 0 1px 0 rgba(255,255,255,0.5),
+                            inset 0 -1px 0 rgba(0,0,0,0.1)
+                          `,
+                          transform: 'rotate(8deg)'
+                        }}
+                      >
+                        <div 
+                          className="absolute inset-1 border border-gray-400 rounded-sm"
+                          style={{
+                            background: 'transparent',
+                            borderStyle: 'solid',
+                            borderWidth: '1px'
+                          }}
+                        />
+                      </div>
+
+                      {/* Tape effect on left edge */}
+                      <div 
+                        className="absolute -left-1 top-16 w-4 h-16 opacity-30 pointer-events-none"
+                        style={{
+                          background: `
+                            linear-gradient(90deg, 
+                              rgba(255,255,220,0.8) 0%, 
+                              rgba(255,255,220,0.6) 50%, 
+                              rgba(255,255,220,0.4) 100%
+                            )
+                          `,
+                          borderRadius: '2px',
+                          boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',
+                          transform: 'rotate(-2deg)'
+                        }}
+                      />
+
+                      {/* Enhanced quotation marks */}
+                      <div className="mb-6">
+                        <QuoteStart className="w-8 h-8 text-amber-700/30 mb-4" />
+                        <p 
+                          className="text-gray-700 leading-relaxed text-base relative z-10"
+                          style={{
+                            fontFamily: "'Poppins', sans-serif"
+                          }}
+                        >
+                          {testimonial.quote}
+                        </p>
+                        <div className="flex justify-end mt-2">
+                          <QuoteEnd className="w-6 h-6 text-amber-700/30" />
+                        </div>
+                      </div>
+
+                      {/* Enhanced Profile Section with sticker effect */}
+                      <div className="mb-8 relative z-10">
+                        <div className="font-semibold text-gray-900 text-lg">
+                          {testimonial.name}
+                        </div>
+                        <div className="text-gray-600 text-sm">
+                          {testimonial.company}
+                        </div>
+                      </div>
+
+                      {/* Enhanced signature with writing animation */}
+                      <div className="flex justify-end relative z-10">
+                        <motion.div 
+                          className="text-right transform -rotate-1"
+                          initial={{ pathLength: 0, opacity: 0 }}
+                          animate={{ 
+                            pathLength: 1, 
+                            opacity: 1,
+                            transition: { 
+                              pathLength: { duration: 2, delay: index * 0.1 },
+                              opacity: { duration: 0.5, delay: index * 0.1 }
+                            }
+                          }}
+                          style={{
+                            fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+                            fontSize: '32px',
+                            color: 'rgba(101, 84, 63, 0.8)',
+                            textShadow: `
+                              1px 1px 2px rgba(0, 0, 0, 0.1),
+                              0 0 4px rgba(101, 84, 63, 0.2)
+                            `,
+                            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))'
+                          }}
+                        >
+                          {testimonial.signature}
+                        </motion.div>
+                      </div>
+
+                      {/* Subtle aging spots */}
+                      <div 
+                        className="absolute w-3 h-3 rounded-full opacity-8 pointer-events-none"
+                        style={{
+                          background: 'radial-gradient(circle, rgba(160, 120, 80, 0.15) 0%, transparent 70%)',
+                          top: '15%',
+                          right: '20%'
+                        }}
+                      />
+                      <div 
+                        className="absolute w-2 h-2 rounded-full opacity-8 pointer-events-none"
+                        style={{
+                          background: 'radial-gradient(circle, rgba(140, 110, 70, 0.12) 0%, transparent 70%)',
+                          bottom: '25%',
+                          left: '15%'
+                        }}
+                      />
+
+                      {/* Pin shadow effect */}
+                      {index % 3 === 0 && (
+                        <div 
+                          className="absolute w-2 h-2 rounded-full opacity-20 pointer-events-none"
+                          style={{
+                            background: 'radial-gradient(circle, rgba(0,0,0,0.3) 0%, transparent 70%)',
+                            top: '8px',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            filter: 'blur(1px)'
+                          }}
+                        />
+                      )}
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          </div>
+
+          {/* Enhanced Progress Bar with hover names */}
+          <div className="mt-10 max-w-md mx-auto">
+
+            
+            {/* Enhanced slide indicators */}
+            <div className="flex justify-center space-x-3">
+              {Array.from({ length: totalSlides }).map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentIndex(index)}
+                  className={`w-4 h-4 rounded-full transition-all duration-300 transform ${
+                    index === currentIndex 
+                      ? 'bg-gradient-to-r from-primary to-secondary scale-110 shadow-lg' 
+                      : 'bg-gray-300 hover:bg-gray-400 hover:scale-105'
+                  }`}
+                  style={{
+                    boxShadow: index === currentIndex 
+                      ? '0 4px 8px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(168, 85, 247, 0.2)'
+                      : '0 2px 4px rgba(0,0,0,0.1)'
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+
+
+        </div>
+
+
+      </div>
+
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/TrustedCompanies.tsx b/src/components/TrustedCompanies.tsx
new file mode 100644
index 0000000..419b354
--- /dev/null
+++ b/src/components/TrustedCompanies.tsx
@@ -0,0 +1,64 @@
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import amazonLogo from '../assets/cc387e616b2e6552715d051e5c9a41e1a1637857.png';
+import amdLogo from '../assets/f9d75a20370022ef4bcdb5f3d08841527703cee6.png';
+import spotifyLogo from '../assets/84f4f124e1476f3bb1eee24bc4c0fa75f1fed2a8.png';
+import logo4 from '../assets/eb1420e4d74097842eb197fc60970d29fa0afd1f.png';
+import logo5 from '../assets/01db7df74b38a6ea709f973ff1a3ce03c9a5a75d.png';
+import logo6 from '../assets/26f0daececd90e6473f4b370af7b26b7fb2a67ad.png';
+
+const companyLogos = [
+  {
+    name: 'Amazon',
+    image: amazonLogo,
+  },
+  {
+    name: 'AMD',
+    image: amdLogo,
+  },
+  {
+    name: 'Spotify',
+    image: spotifyLogo,
+  },
+  {
+    name: 'Partner 4',
+    image: logo4,
+  },
+  {
+    name: 'Partner 5',
+    image: logo5,
+  },
+  {
+    name: 'Partner 6',
+    image: logo6,
+  },
+];
+
+export function TrustedCompanies() {
+  // Duplicate the logos 4 times for seamless infinite scroll
+  const allLogos = [
+    ...companyLogos,
+    ...companyLogos,
+    ...companyLogos,
+    ...companyLogos,
+  ];
+
+  return (
+    <div className="w-full overflow-hidden py-12 flex items-center justify-center">
+      <div className="flex gap-16 items-center justify-center animate-moveLeft hover:pause">
+        {allLogos.map((company, index) => (
+          <div
+            key={`${company.name}-${index}`}
+            className="flex-shrink-0 flex items-center justify-center transition-all duration-300 opacity-70 hover:opacity-100"
+            style={{ minWidth: '120px', height: '80px' }}
+          >
+            <ImageWithFallback
+              src={company.image}
+              alt={company.name}
+              className="max-h-full max-w-full object-contain"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/UpcomingCities.tsx b/src/components/UpcomingCities.tsx
new file mode 100644
index 0000000..87588a5
--- /dev/null
+++ b/src/components/UpcomingCities.tsx
@@ -0,0 +1,328 @@
+import { ArrowRight } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Button } from './ui/button';
+import { useRef, useState, useEffect } from 'react';
+import Image592Traced from '../imports/Image592Traced-5025-559';
+
+const upcomingCities = [
+  {
+    id: 1,
+    name: 'Boston',
+    country: 'USA',
+    launchDate: 'Spring 2025',
+    attractions: 65,
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
+    image: 'https://images.unsplash.com/photo-1568271667303-14b2a1a36da1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: true
+  },
+  {
+    id: 2,
+    name: 'Rome',
+    country: 'Italy',
+    launchDate: 'Summer 2025',
+    attractions: 80,
+    image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 3,
+    name: 'Paris',
+    country: 'France',
+    launchDate: 'Fall 2025',
+    attractions: 95,
+    image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 4,
+    name: 'Dubai',
+    country: 'UAE',
+    launchDate: 'Winter 2025',
+    attractions: 70,
+    image: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false,
+    badge: 'New'
+  },
+  {
+    id: 5,
+    name: 'Tokyo',
+    country: 'Japan',
+    launchDate: 'Early 2026',
+    attractions: 120,
+    image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 6,
+    name: 'Sydney',
+    country: 'Australia',
+    launchDate: 'Spring 2026',
+    attractions: 85,
+    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 7,
+    name: 'New York',
+    country: 'USA',
+    launchDate: 'Summer 2026',
+    attractions: 150,
+    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false,
+    badge: 'Most Requested'
+  },
+  {
+    id: 8,
+    name: 'Singapore',
+    country: 'Singapore',
+    launchDate: 'Fall 2026',
+    attractions: 75,
+    image: 'https://images.unsplash.com/photo-1525625293386-3f8f99389edd?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 9,
+    name: 'Amsterdam',
+    country: 'Netherlands',
+    launchDate: 'Winter 2026',
+    attractions: 90,
+    image: 'https://images.unsplash.com/photo-1534351590666-13e3e96b5017?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  },
+  {
+    id: 10,
+    name: 'Barcelona',
+    country: 'Spain',
+    launchDate: 'Early 2027',
+    attractions: 110,
+    image: 'https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
+    showHoverState: false
+  }
+];
+
+export function UpcomingCities() {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [showDragHint, setShowDragHint] = useState(false);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!scrollContainerRef.current) return;
+    // Only start dragging if not clicking on a button or interactive element
+    const target = e.target as HTMLElement;
+    if (target.closest('button') || target.closest('[role="button"]')) {
+      return;
+    }
+    setIsDragging(true);
+    setStartX(e.pageX - scrollContainerRef.current.offsetLeft);
+    setScrollLeft(scrollContainerRef.current.scrollLeft);
+    setShowDragHint(false);
+  };
+
+  const handleMouseLeave = () => {
+    setIsDragging(false);
+    setShowDragHint(false);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging || !scrollContainerRef.current) return;
+    e.preventDefault();
+    const x = e.pageX - scrollContainerRef.current.offsetLeft;
+    const walk = (x - startX) * 1.5; // Reduced multiplier for smoother movement
+    scrollContainerRef.current.scrollLeft = scrollLeft - walk;
+  };
+
+  const handleMouseEnter = () => {
+    if (!isDragging) {
+      setShowDragHint(true);
+    }
+  };
+
+  useEffect(() => {
+    const handleGlobalMouseUp = () => setIsDragging(false);
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
+  }, []);
+
+  return (
+    <section className="py-20 bg-gray-50">
+      {/* Header - Contained and aligned */}
+      <div className="container mx-auto px-4">
+        <div className="mb-16">
+          <h2 className="heading-dynamic text-4xl md:text-5xl text-gray-900 mb-4">
+            <span className="font-light">Upcoming</span>{' '}
+            <span className="font-bold italic text-gradient-primary">Cities</span>
+          </h2>
+          <p className="text-lg text-gray-600 max-w-2xl">
+            Here are lots of interesting destinations to visit, but don't be confused—they're already grouped by category.
+          </p>
+        </div>
+      </div>
+
+      {/* Cities Carousel - Aligned with header, extending to screen edge */}
+      <div className="relative">
+        {/* Drag Hint Pill */}
+        {showDragHint && (
+          <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-20 bg-black/80 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm transition-all duration-300 pointer-events-none">
+            Drag to scroll
+          </div>
+        )}
+
+        <div 
+          ref={scrollContainerRef}
+          className={`flex gap-6 overflow-x-auto scrollbar-hide pb-2 ${isDragging ? 'cursor-grabbing dragging select-none' : 'cursor-grab'}`}
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none',
+            scrollBehavior: isDragging ? 'auto' : 'smooth',
+            paddingLeft: 'max(1rem, calc((100vw - 1280px) / 2 + 1rem))',
+            paddingRight: '1rem'
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseLeave={handleMouseLeave}
+          onMouseUp={handleMouseUp}
+          onMouseMove={handleMouseMove}
+          onMouseEnter={handleMouseEnter}
+        >
+            {upcomingCities.map((city) => (
+              <div
+                key={city.id}
+                className="flex-shrink-0 w-72 md:w-80 group relative h-[420px] rounded-3xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500"
+              >
+                {/* Background - Either solid color or image */}
+                {city.showHoverState ? (
+                  // Boston card with image background and same layout as other cards
+                  <>
+                    <ImageWithFallback
+                      src={city.image!}
+                      alt={city.name}
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    
+                    {/* Dark overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent group-hover:from-black/80 transition-all duration-500" />
+                    
+                    {/* City name overlay - matching Rome card layout */}
+                    <div className="absolute bottom-6 left-6 right-6 text-white">
+                      <h3 className="text-2xl font-bold mb-2">{city.name}</h3>
+                      <div className="flex items-center justify-between text-sm text-white/80">
+                        <span>{city.country}</span>
+                        <span>{city.launchDate}</span>
+                      </div>
+                    </div>
+
+                    {/* Hover state overlay - same as other cards */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/90 to-secondary/90 opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
+                      <div className="text-center text-white">
+                        <h3 className="text-2xl font-bold mb-2">{city.name}</h3>
+                        <p className="text-white/90 mb-4">{city.attractions}+ attractions</p>
+                        <p className="text-sm text-white/80 mb-6">Coming {city.launchDate}</p>
+                        <Button 
+                          variant="secondary" 
+                          className="bg-white/20 hover:bg-white/30 text-white border-white/30 hover:border-white/50 backdrop-blur-sm"
+                          onMouseDown={(e) => {
+                            e.stopPropagation();
+                            setIsDragging(false);
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            console.log('Notify Me button clicked');
+                          }}
+                        >
+                          Notify Me
+                          <ArrowRight className="w-4 h-4 ml-2" />
+                        </Button>
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  // Image background for other cards
+                  <>
+                    <ImageWithFallback
+                      src={city.image!}
+                      alt={city.name}
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    
+                    {/* Dark overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent group-hover:from-black/80 transition-all duration-500" />
+                    
+                    {/* Badge (if present) */}
+                    {city.badge && (
+                      <div className="absolute top-4 right-4 bg-white text-gray-900 px-3 py-1 rounded-full text-sm font-medium shadow-lg">
+                        {city.badge}
+                      </div>
+                    )}
+
+                    {/* City name overlay */}
+                    <div className="absolute bottom-6 left-6 right-6 text-white">
+                      <h3 className="text-2xl font-bold mb-2">{city.name}</h3>
+                      <div className="flex items-center justify-between text-sm text-white/80">
+                        <span>{city.country}</span>
+                        <span>{city.launchDate}</span>
+                      </div>
+                    </div>
+
+                    {/* Hover state overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/90 to-secondary/90 opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
+                      <div className="text-center text-white">
+                        <h3 className="text-2xl font-bold mb-2">{city.name}</h3>
+                        <p className="text-white/90 mb-4">{city.attractions}+ attractions</p>
+                        <p className="text-sm text-white/80 mb-6">Coming {city.launchDate}</p>
+                        <Button 
+                          variant="secondary" 
+                          className="bg-white/20 hover:bg-white/30 text-white border-white/30 hover:border-white/50 backdrop-blur-sm"
+                          onMouseDown={(e) => {
+                            e.stopPropagation();
+                            setIsDragging(false);
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            console.log('Notify Me button clicked');
+                          }}
+                        >
+                          Notify Me
+                          <ArrowRight className="w-4 h-4 ml-2" />
+                        </Button>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+        </div>
+      </div>
+
+      {/* Bottom CTA - Contained */}
+      <div className="container mx-auto px-4">
+
+      </div>
+
+      {/* Global Offices Section */}
+      <div className="container mx-auto px-4 mt-20">
+        {/* Global Presence Section - Exact Screenshot Recreation */}
+
+      </div>
+
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+          }
+          .scrollbar-hide {
+            scroll-behavior: smooth;
+            -webkit-overflow-scrolling: touch;
+          }
+          .scrollbar-hide.dragging {
+            scroll-behavior: auto;
+          }
+        `
+      }} />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/UpcomingDestinations.tsx b/src/components/UpcomingDestinations.tsx
new file mode 100644
index 0000000..a1e0cd2
--- /dev/null
+++ b/src/components/UpcomingDestinations.tsx
@@ -0,0 +1,251 @@
+import { Calendar, Users, Compass, Bell, ArrowRight, Sparkles } from 'lucide-react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Button } from './ui/button';
+import { motion } from 'motion/react';
+
+const upcomingDestinations = [
+  {
+    id: 1,
+    name: 'Reykjavik',
+    country: 'Iceland',
+    launchDate: 'March 2025',
+    season: 'Spring',
+    expectedAttractions: 45,
+    specialFeature: 'Northern Lights',
+    status: 'launching-soon',
+    image: 'https://images.unsplash.com/photo-1666003415555-1634ff3cd022?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXlramF2aWslMjBpY2VsYW5kJTIwbm9ydGhlcm4lMjBsaWdodHN8ZW58MXx8fHwxNzU2MTIzNjI1fDA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Experience the magic of Iceland with geothermal wonders, dramatic landscapes, and the enchanting Northern Lights.',
+    earlyBirdDiscount: '25%'
+  },
+  {
+    id: 2,
+    name: 'Cape Town',
+    country: 'South Africa',
+    launchDate: 'June 2025',
+    season: 'Winter',
+    expectedAttractions: 85,
+    specialFeature: 'Wildlife Safari',
+    status: 'in-development',
+    image: 'https://images.unsplash.com/photo-1635260980154-315c57168b12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXBlJTIwdG93biUyMHRhYmxlJTIwbW91bnRhaW58ZW58MXx8fHwxNzU2MTIzNjI5fDA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Discover the Mother City with Table Mountain adventures, wine tours, and incredible wildlife experiences.',
+    earlyBirdDiscount: '20%'
+  },
+  {
+    id: 3,
+    name: 'Oslo',
+    country: 'Norway',
+    launchDate: 'September 2025',
+    season: 'Autumn',
+    expectedAttractions: 65,
+    specialFeature: 'Fjord Tours',
+    status: 'planning',
+    image: 'https://images.unsplash.com/photo-1725993486972-f569d8038915?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvc2xvJTIwZmpvcmQlMjBub3J3YXl8ZW58MXx8fHwxNzU2MTIzNjMzfDA&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Explore Norwegian culture, stunning fjords, and modern Scandinavian design in this beautiful Nordic capital.',
+    earlyBirdDiscount: '15%'
+  },
+  {
+    id: 4,
+    name: 'Marrakech',
+    country: 'Morocco',
+    launchDate: 'December 2025',
+    season: 'Winter',
+    expectedAttractions: 70,
+    specialFeature: 'Desert Adventure',
+    status: 'coming-soon',
+    image: 'https://images.unsplash.com/photo-1589008207338-a9c80f8a2d23?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYXJyYWtlY2glMjBtb3JvY2NvJTIwbWVkaW5hfGVufDF8fHx8MTc1NjEyMzYzNnww&ixlib=rb-4.1.0&q=80&w=1080',
+    description: 'Immerse yourself in the imperial city\'s vibrant souks, stunning palaces, and Sahara desert adventures.',
+    earlyBirdDiscount: '30%'
+  }
+];
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'launching-soon':
+      return 'bg-green-100 text-green-800 border-green-200';
+    case 'in-development':
+      return 'bg-blue-100 text-blue-800 border-blue-200';
+    case 'planning':
+      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+    case 'coming-soon':
+      return 'bg-purple-100 text-purple-800 border-purple-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+};
+
+const getStatusText = (status: string) => {
+  switch (status) {
+    case 'launching-soon':
+      return 'Launching Soon';
+    case 'in-development':
+      return 'In Development';
+    case 'planning':
+      return 'Planning Stage';
+    case 'coming-soon':
+      return 'Coming Soon';
+    default:
+      return 'Upcoming';
+  }
+};
+
+export function UpcomingDestinations() {
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50/30">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full mb-6">
+            <Sparkles className="w-4 h-4" />
+            <span className="text-sm font-medium">New Destinations Coming</span>
+          </div>
+          
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+            <span className="font-light">Upcoming</span>{' '}
+            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              Destinations
+            </span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Be the first to explore these incredible new destinations. Get early access and exclusive discounts when they launch.
+          </p>
+        </motion.div>
+
+        {/* Destinations Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+          {upcomingDestinations.map((destination, index) => (
+            <motion.div
+              key={destination.id}
+              className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500"
+              initial={{ opacity: 0, x: index % 2 === 0 ? -30 : 30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.2 }}
+              viewport={{ once: true }}
+              whileHover={{ y: -5 }}
+            >
+              <div className="flex flex-col lg:flex-row">
+                {/* Image Section */}
+                <div className="relative lg:w-1/2 h-64 lg:h-auto overflow-hidden">
+                  <ImageWithFallback
+                    src={destination.image}
+                    alt={destination.name}
+                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                  />
+                  
+                  {/* Overlay */}
+                  <div className="absolute inset-0 bg-gradient-to-t lg:bg-gradient-to-r from-black/40 via-transparent to-transparent" />
+                  
+                  {/* Status Badge */}
+                  <div className={`absolute top-4 left-4 px-3 py-1 rounded-full border text-sm font-medium ${getStatusColor(destination.status)}`}>
+                    {getStatusText(destination.status)}
+                  </div>
+
+                  {/* Discount Badge */}
+                  {destination.earlyBirdDiscount && (
+                    <div className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
+                      -{destination.earlyBirdDiscount} Early Bird
+                    </div>
+                  )}
+                </div>
+
+                {/* Content Section */}
+                <div className="lg:w-1/2 p-8 flex flex-col">
+                  {/* Header */}
+                  <div className="mb-6">
+                    <h3 className="text-2xl font-bold text-gray-900 mb-2">{destination.name}</h3>
+                    <p className="text-gray-600 mb-4">{destination.country}</p>
+                    <p className="text-gray-700 text-sm leading-relaxed">
+                      {destination.description}
+                    </p>
+                  </div>
+
+                  {/* Stats */}
+                  <div className="space-y-3 mb-6">
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-2 text-gray-600">
+                        <Calendar className="w-4 h-4" />
+                        <span>Launch Date</span>
+                      </div>
+                      <span className="font-semibold text-primary">{destination.launchDate}</span>
+                    </div>
+                    
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-2 text-gray-600">
+                        <Compass className="w-4 h-4" />
+                        <span>Attractions</span>
+                      </div>
+                      <span className="font-semibold">{destination.expectedAttractions}+ planned</span>
+                    </div>
+                    
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-2 text-gray-600">
+                        <Sparkles className="w-4 h-4" />
+                        <span>Special Feature</span>
+                      </div>
+                      <span className="font-semibold text-secondary">{destination.specialFeature}</span>
+                    </div>
+                  </div>
+
+                  {/* CTA Buttons */}
+                  <div className="mt-auto space-y-3">
+                    <Button 
+                      className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3 rounded-2xl transition-all duration-300 group/btn"
+                    >
+                      <Bell className="w-4 h-4 mr-2" />
+                      <span>Notify Me</span>
+                      <ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
+                    </Button>
+                    
+                    <Button 
+                      variant="outline"
+                      className="w-full border-primary text-primary hover:bg-primary hover:text-white py-3 rounded-2xl transition-all duration-300"
+                    >
+                      <Users className="w-4 h-4 mr-2" />
+                      <span>Join Waitlist</span>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Newsletter Signup */}
+        <motion.div 
+          className="bg-gradient-to-r from-primary to-secondary rounded-3xl p-8 lg:p-12 text-center text-white"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <h3 className="text-3xl font-bold mb-4">Be the First to Explore</h3>
+          <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+            Subscribe to get exclusive early access, special discounts, and be notified the moment new destinations launch.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="flex-1 px-4 py-3 rounded-2xl text-gray-900 placeholder-gray-500 border-0 focus:ring-2 focus:ring-white/50 focus:outline-none"
+            />
+            <Button 
+              className="bg-white text-primary hover:bg-gray-100 font-semibold px-8 py-3 rounded-2xl transition-all duration-300"
+            >
+              Subscribe
+            </Button>
+          </div>
+          
+          <p className="text-sm text-white/70 mt-4">
+            Join 50,000+ travelers who get first access to new destinations
+          </p>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/VarietyOfAdventures.tsx b/src/components/VarietyOfAdventures.tsx
new file mode 100644
index 0000000..145c418
--- /dev/null
+++ b/src/components/VarietyOfAdventures.tsx
@@ -0,0 +1,353 @@
+import { Coffee, Palette, Trees, UtensilsCrossed, Music, Building2, Ship, ShoppingBag } from 'lucide-react';
+import { Button } from './ui/button';
+import { motion, AnimatePresence } from 'motion/react';
+import { useState } from 'react';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+export function VarietyOfAdventures() {
+  const [hoveredCategory, setHoveredCategory] = useState<string | null>(null);
+
+  const melbourneCategories = [
+    {
+      id: 'street-art',
+      title: 'Street Art & Laneways',
+      tourCount: '12+ tours',
+      icon: Palette,
+      image: 'https://images.unsplash.com/photo-1613910774524-0651750373ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdHJlZXQlMjBhcnQlMjBncmFmZml0aSUyMGxhbmV3YXlzfGVufDF8fHx8MTc1NjEwNTYwOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Hosier Lane',
+          image: 'https://images.unsplash.com/photo-1582076197789-5c2af0bb51fd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3NpZXIlMjBsYW5lJTIwbWVsYm91cm5lJTIwc3RyZWV0JTIwYXJ0fGVufDF8fHx8MTc1NjEwNjExMnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'AC/DC Lane',
+          image: 'https://images.unsplash.com/photo-1735704197205-823cfd615e13?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYyUyMGRjJTIwbGFuZSUyMG1lbGJvdXJuZSUyMGdyYWZmaXRpfGVufDF8fHx8MTc1NjEwNjExN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'coffee-culture',
+      title: 'Coffee Culture',
+      tourCount: '8+ experiences',
+      icon: Coffee,
+      image: 'https://images.unsplash.com/photo-1681745623555-efc392301d6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBjdWx0dXJlJTIwY2FmZSUyMGJhcmlzdGF8ZW58MXx8fHwxNzU2MTA1NjEyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Degraves Street',
+          image: 'https://images.unsplash.com/photo-1686052183140-088f1bd9a49b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkZWdyYXZlcyUyMHN0cmVldCUyMG1lbGJvdXJuZSUyMGNhZmV8ZW58MXx8fHwxNzU2MTA2MTIzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'Centre Place',
+          image: 'https://images.unsplash.com/photo-1583569695977-1e5758f793d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjZW50cmUlMjBwbGFjZSUyMG1lbGJvdXJuZSUyMGNvZmZlZSUyMGxhbmV3YXl8ZW58MXx8fHwxNzU2MTA2MTI3fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'gardens-parks',
+      title: 'Gardens & Parks',
+      tourCount: '6+ nature spots',
+      icon: Trees,
+      image: 'https://images.unsplash.com/photo-1639481326289-1efe7cbfbfe5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zJTIwbmF0dXJlfGVufDF8fHx8MTc1NjEwNTYxNnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Royal Botanic Gardens',
+          image: 'https://images.unsplash.com/photo-1670027537688-77def132d556?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zJTIwbWVsYm91cm5lJTIwbGFrZXxlbnwxfHx8fDE3NTYxMDYxMzN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'Fitzroy Gardens',
+          image: 'https://images.unsplash.com/photo-1735605918618-0193db0a30af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmaXR6cm95JTIwZ2FyZGVucyUyMG1lbGJvdXJuZSUyMGNvbnNlcnZhdG9yeXxlbnwxfHx8fDE3NTYxMDYxMzl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'food-markets',
+      title: 'Food & Markets',
+      tourCount: '10+ food spots',
+      icon: UtensilsCrossed,
+      image: 'https://images.unsplash.com/photo-1656177796132-3dab16b30652?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0JTIwZm9vZHxlbnwxfHx8fDE3NTYxMDU2MTl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Queen Victoria Market',
+          image: 'https://images.unsplash.com/photo-1708903965305-f8439248cebd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0JTIwbWVsYm91cm5lJTIwZm9vZCUyMHN0YWxsc3xlbnwxfHx8fDE3NTYxMDYxNDV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'South Melbourne Market',
+          image: 'https://images.unsplash.com/photo-1749229964993-f802d5203142?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb3V0aCUyMG1lbGJvdXJuZSUyMG1hcmtldCUyMGZvb2QlMjB2ZW5kb3JzfGVufDF8fHx8MTc1NjEwNjE1MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'music-entertainment',
+      title: 'Music & Entertainment',
+      tourCount: '15+ venues',
+      icon: Music,
+      image: 'https://images.unsplash.com/photo-1684679106461-dae134df8da6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBtdXNpYyUyMGxpdmUlMjBjb25jZXJ0JTIwdmVudWV8ZW58MXx8fHwxNzU2MTA1NjI1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Princess Theatre',
+          image: 'https://images.unsplash.com/photo-1709063370226-1369f8d26069?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcmluY2VzcyUyMHRoZWF0cmUlMjBtZWxib3VybmUlMjBoaXN0b3JpYyUyMHZlbnVlfGVufDF8fHx8MTc1NjEwNjE1N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'Rod Laver Arena',
+          image: 'https://images.unsplash.com/photo-1684679106461-dae134df8da6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBtdXNpYyUyMGxpdmUlMjBjb25jZXJ0JTIwdmVudWV8ZW58MXx8fHwxNzU2MTA1NjI1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'architecture',
+      title: 'Historic Architecture',
+      tourCount: '9+ heritage sites',
+      icon: Building2,
+      image: 'https://images.unsplash.com/photo-1719447001523-7474ec81ef80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhcmNoaXRlY3R1cmUlMjBoaXN0b3JpYyUyMGJ1aWxkaW5nc3xlbnwxfHx8fDE3NTYxMDU2Mjl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Block Arcade',
+          image: 'https://images.unsplash.com/photo-1695657678988-5bd451215eb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxibG9jayUyMGFyY2FkZSUyMG1lbGJvdXJuZSUyMGhlcml0YWdlJTIwc2hvcHBpbmd8ZW58MXx8fHwxNzU2MTA2MTYxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'St Paul\'s Cathedral',
+          image: 'https://images.unsplash.com/photo-1719447001523-7474ec81ef80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhcmNoaXRlY3R1cmUlMjBoaXN0b3JpYyUyMGJ1aWxkaW5nc3xlbnwxfHx8fDE3NTYxMDU2Mjl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'river-cruises',
+      title: 'River & Cruises',
+      tourCount: '5+ water experiences',
+      icon: Ship,
+      image: 'https://images.unsplash.com/photo-1722943661451-1a439d092ff2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByaXZlcnNpZGUlMjB5YXJyYSUyMHJpdmVyJTIwY3J1aXNlfGVufDF8fHx8MTc1NjEwNTYzM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Yarra River Cruise',
+          image: 'https://images.unsplash.com/photo-1668376212180-d4c25f929ce4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx5YXJyYSUyMHJpdmVyJTIwbWVsYm91cm5lJTIwY3J1aXNlJTIwYm9hdHN8ZW58MXx8fHwxNzU2MTA2MTY1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'Southbank Promenade',
+          image: 'https://images.unsplash.com/photo-1722943661451-1a439d092ff2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByaXZlcnNpZGUlMjB5YXJyYSUyMHJpdmVyJTIwY3J1aXNlfGVufDF8fHx8MTc1NjEwNTYzM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    },
+    {
+      id: 'shopping',
+      title: 'Shopping & Style',
+      tourCount: '7+ shopping areas',
+      icon: ShoppingBag,
+      image: 'https://images.unsplash.com/photo-1744357725934-12140170ebf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzaG9wcGluZyUyMGNvbGxpbnMlMjBzdHJlZXQlMjBib3V0aXF1ZXxlbnwxfHx8fDE3NTYxMDU2NDV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
+      attractions: [
+        {
+          name: 'Collins Street',
+          image: 'https://images.unsplash.com/photo-1583569695977-1e5758f793d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb2xsaW5zJTIwc3RyZWV0JTIwbWVsYm91cm5lJTIwYm91dGlxdWUlMjBzaG9wcGluZ3xlbnwxfHx8fDE3NTYxMDYxNjl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        },
+        {
+          name: 'Chapel Street',
+          image: 'https://images.unsplash.com/photo-1744357725934-12140170ebf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzaG9wcGluZyUyMGNvbGxpbnMlMjBzdHJlZXQlMjBib3V0aXF1ZXxlbnwxfHx8fDE3NTYxMDU2NDV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
+        }
+      ]
+    }
+  ];
+
+  // Create extended array for seamless infinite scroll
+  const extendedCategories = [...melbourneCategories, ...melbourneCategories, ...melbourneCategories];
+
+  return (
+    <section className="py-20 lg:py-28 bg-white overflow-hidden">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-16 max-w-4xl mx-auto">
+          <motion.h2 
+            className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight text-gray-900 mb-6"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+          >
+            <span className="font-light">A Melbourne</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">Experience</span>{' '}
+            <span className="font-light">for Every Traveller</span>
+          </motion.h2>
+          <motion.p 
+            className="font-poppins text-xl leading-relaxed font-normal text-gray-600"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+          >
+            From iconic laneways and world-class coffee to stunning gardens and vibrant markets, 
+            discover Melbourne's unique character through curated experiences that showcase the city's soul.
+          </motion.p>
+        </div>
+
+        {/* Full-Width Horizontal Scrolling Carousel */}
+        <div className="mb-16 relative">
+          {/* Carousel Container - Full Width */}
+          <div className="relative w-full overflow-hidden">
+            {/* Scrolling Track */}
+            <motion.div 
+              className="horizontal-scroll-track flex items-center gap-8 py-8"
+              style={{
+                width: 'max-content',
+                animation: 'scrollHorizontal 80s linear infinite'
+              }}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            >
+              {/* Adventure Category Cards */}
+              {extendedCategories.map((category, index) => (
+                <motion.div
+                  key={`${category.id}-${index}`}
+                  className="flex-shrink-0 w-80 h-96 group cursor-pointer relative"
+                  onMouseEnter={() => setHoveredCategory(`${category.id}-${index}`)}
+                  onMouseLeave={() => setHoveredCategory(null)}
+                  whileHover={{ scale: 1.02, y: -4 }}
+                  transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
+                >
+                  {/* Card Content */}
+                  <div className="relative rounded-3xl bg-white border border-gray-200/60 hover:border-gray-300/80 shadow-lg hover:shadow-2xl transition-all duration-500 h-full overflow-hidden">
+                    {/* Image Background */}
+                    <div className="relative h-48 overflow-hidden rounded-t-3xl">
+                      <ImageWithFallback
+                        src={category.image}
+                        alt={category.title}
+                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      />
+                      {/* Gradient Overlay */}
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+                      
+                      {/* Icon Overlay */}
+                      <motion.div 
+                        className="absolute top-4 right-4 w-12 h-12 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center"
+                        whileHover={{ scale: 1.1, rotate: 5 }}
+                        transition={{ duration: 0.2 }}
+                      >
+                        <category.icon className="w-6 h-6 text-primary" />
+                      </motion.div>
+                    </div>
+                    
+                    {/* Content Section */}
+                    <div className="p-6 relative">
+                      {/* Category Info */}
+                      <div className="space-y-3">
+                        <h3 className="text-xl font-bold text-gray-900 group-hover:text-primary transition-colors duration-300">
+                          {category.title}
+                        </h3>
+                        <p className="text-base font-medium text-primary/80 group-hover:text-primary transition-colors duration-300">
+                          {category.tourCount}
+                        </p>
+                      </div>
+
+                      {/* Background Gradient on Hover */}
+                      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-b-3xl pointer-events-none" />
+                    </div>
+
+                    {/* Subtle Animation Effect */}
+                    <div className="absolute -bottom-2 -right-2 w-16 h-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </div>
+
+                  {/* Popup Card - Attractions */}
+                  <AnimatePresence>
+                    {hoveredCategory === `${category.id}-${index}` && (
+                      <motion.div
+                        initial={{ opacity: 0, y: 20, scale: 0.95 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                        transition={{ 
+                          duration: 0.3, 
+                          ease: [0.25, 0.1, 0.25, 1],
+                          layout: { duration: 0.2 }
+                        }}
+                        className="absolute top-0 left-0 w-full h-full z-20 pointer-events-none"
+                      >
+                        {/* Popup Content */}
+                        <div className="relative w-full h-full bg-white/95 backdrop-blur-lg rounded-3xl border border-white/60 shadow-2xl overflow-hidden">
+                          {/* Header */}
+                          <div className="p-6 border-b border-white/40">
+                            <div className="flex items-center gap-3">
+                              <div className="w-10 h-10 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-xl flex items-center justify-center">
+                                <category.icon className="w-5 h-5 text-primary" />
+                              </div>
+                              <div>
+                                <h4 className="font-bold text-gray-900">{category.title}</h4>
+                                <p className="text-sm text-primary/80">Featured Attractions</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Attractions Grid */}
+                          <div className="p-6 space-y-4">
+                            {category.attractions.map((attraction, idx) => (
+                              <motion.div
+                                key={attraction.name}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ 
+                                  duration: 0.3, 
+                                  delay: idx * 0.1,
+                                  ease: [0.25, 0.1, 0.25, 1]
+                                }}
+                                className="flex items-center gap-4 p-3 rounded-2xl bg-white/60 backdrop-blur-sm border border-white/40 hover:bg-white/80 transition-all duration-300"
+                              >
+                                {/* Attraction Image */}
+                                <div className="w-16 h-16 flex-shrink-0 rounded-xl overflow-hidden">
+                                  <ImageWithFallback
+                                    src={attraction.image}
+                                    alt={attraction.name}
+                                    className="w-full h-full object-cover"
+                                  />
+                                </div>
+                                
+                                {/* Attraction Info */}
+                                <div className="flex-1">
+                                  <h5 className="font-semibold text-gray-900 mb-1">
+                                    {attraction.name}
+                                  </h5>
+                                  <div className="flex items-center gap-1">
+                                    <div className="w-1.5 h-1.5 bg-gradient-to-r from-primary to-secondary rounded-full" />
+                                    <span className="text-sm text-primary/80">
+                                      Included in Pass
+                                    </span>
+                                  </div>
+                                </div>
+                              </motion.div>
+                            ))}
+                          </div>
+
+                          {/* Footer */}
+                          <div className="p-6 pt-0">
+                            <div className="text-center">
+                              <p className="text-sm text-gray-600">
+                                + Many more attractions included
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {/* Gradient Fade Edges */}
+            <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-white via-white/80 to-transparent pointer-events-none z-10" />
+            <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-white via-white/80 to-transparent pointer-events-none z-10" />
+          </div>
+        </div>
+
+        {/* CTA Button */}
+        <motion.div 
+          className="text-center"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+        >
+          <Button 
+            withShine={true}
+            size="xl"
+            className="h-16 rounded-2xl text-lg px-8"
+          >
+            Get A City Card And Start Exploring
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/WhyChooseCityCards.tsx b/src/components/WhyChooseCityCards.tsx
new file mode 100644
index 0000000..72cf9f5
--- /dev/null
+++ b/src/components/WhyChooseCityCards.tsx
@@ -0,0 +1,344 @@
+import { useState, useEffect } from 'react';
+import { DollarSign, Coffee, Palette, MapPin, Star, Clock, Ticket, Banknote } from 'lucide-react';
+import { motion, useInView } from 'motion/react';
+import { useRef } from 'react';
+
+// Animation variants
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      duration: 0.2,
+    }
+  }
+};
+
+const itemVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 15,
+    scale: 0.98
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    scale: 1,
+    transition: { 
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1] 
+    }
+  }
+};
+
+const cardVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 15,
+    scale: 0.98
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    scale: 1,
+    transition: { 
+      duration: 0.25,
+      ease: [0.25, 0.1, 0.25, 1] 
+    }
+  }
+};
+
+export function WhyChooseCityCards() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.3 });
+
+  // Melbourne-focused benefits with Save Big first
+  const benefits = [
+    {
+      icon: DollarSign,
+      title: "Save Big",
+      subtitle: "Up to 43% off attractions",
+      description: "Why pay $350+ buying tickets individually when Melbourne City Card gives you 40+ attractions for as little as $199?",
+      highlight: "43% OFF"
+    },
+    {
+      icon: Coffee,
+      title: "Coffee Culture",
+      subtitle: "Melbourne's best cafés",
+      description: "Skip the queue at Melbourne's iconic coffee spots and hidden laneway gems with exclusive café partner discounts.",
+      highlight: "Free Coffee Tour"
+    },
+    {
+      icon: Palette,
+      title: "Street Art Tours",
+      subtitle: "World-famous laneways",
+      description: "Access guided street art tours through Melbourne's famous laneways with local artists and cultural insights.",
+      highlight: "Expert Guides"
+    }
+  ];
+
+  const melbourneStats = [
+    {
+      icon: MapPin,
+      value: "40+",
+      label: "Attractions",
+      description: "From Royal Botanic Gardens to Eureka Skydeck"
+    },
+    {
+      icon: Star,
+      value: "4.8",
+      label: "Rating",
+      description: "Top-rated by culture and food enthusiasts"
+    },
+    {
+      icon: Clock,
+      value: "3 Days",
+      label: "Valid",
+      description: "Perfect for a long weekend adventure"
+    }
+  ];
+
+  return (
+    <section ref={ref} className="relative py-20 bg-gradient-to-br from-blue-50/30 via-white to-purple-50/20 overflow-hidden">
+      {/* Enhanced background elements */}
+      {/* Why Choose Melbourne City Card Section */}
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Section Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <motion.h2 
+            className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+          >
+            <span className="font-light">Why Choose </span>
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
+              City Cards
+            </span>
+            <span className="font-light">?</span>
+          </motion.h2>
+          <motion.p 
+            className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            Unlock exclusive access to Australia's top destinations with premium city experiences, 
+            unbeatable savings, and seamless digital convenience that transforms how you explore.
+          </motion.p>
+        </motion.div>
+
+        {/* Benefits Grid */}
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? "visible" : "hidden"}
+        >
+          {/* Benefit 1: Save Big */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            {/* Save Badge */}
+            <motion.div 
+              className="absolute -top-3 -right-3 z-10"
+              initial={{ opacity: 0, scale: 0, rotate: 0 }}
+              animate={isInView ? { opacity: 1, scale: 1, rotate: 12 } : { opacity: 0, scale: 0, rotate: 0 }}
+              transition={{ 
+                duration: 0.6,
+                delay: 0.8,
+                type: "spring",
+                stiffness: 200 
+              }}
+            >
+              <div className="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-4 py-2 rounded-2xl">
+                <div className="text-center">
+                  <div className="text-xs font-medium">SAVE</div>
+                  <div className="text-lg font-bold">43% OFF</div>
+                </div>
+              </div>
+            </motion.div>
+
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <DollarSign className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Save Big</h3>
+            <p className="text-primary font-medium text-sm mb-4">Up to 43% off attractions</p>
+            <p className="text-gray-600 leading-relaxed">
+              Why pay $350+ buying tickets individually when City Cards give you 40+ attractions across multiple cities for as little as $199?
+            </p>
+          </motion.div>
+
+          {/* Benefit 2: Skip the Lines */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <Clock className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Skip the Lines</h3>
+            <p className="text-primary font-medium text-sm mb-4">Fast-track entry</p>
+            <p className="text-gray-600 leading-relaxed">
+              Jump straight to the fun with priority access to Australia's most popular attractions and experiences across all cities.
+            </p>
+          </motion.div>
+
+          {/* Benefit 3: Local Experiences */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <MapPin className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Local Experiences</h3>
+            <p className="text-primary font-medium text-sm mb-4">Hidden gems included</p>
+            <p className="text-gray-600 leading-relaxed">
+              Discover each city's best-kept secrets with insider access to local favorites and cultural hotspots across Australia.
+            </p>
+          </motion.div>
+
+          {/* Benefit 4: Coffee Culture */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <Coffee className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Food & Dining</h3>
+            <p className="text-primary font-medium text-sm mb-4">Exclusive restaurant perks</p>
+            <p className="text-gray-600 leading-relaxed">
+              Enjoy exclusive discounts and skip-the-wait access at premium restaurants, cafés, and local culinary hotspots across every city.
+            </p>
+          </motion.div>
+
+          {/* Benefit 5: Street Art Tours */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <Palette className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Cultural Tours</h3>
+            <p className="text-primary font-medium text-sm mb-4">Expert-guided experiences</p>
+            <p className="text-gray-600 leading-relaxed">
+              Access exclusive guided tours showcasing each city's unique culture, art, and heritage with local experts and insider stories.
+            </p>
+          </motion.div>
+
+          {/* Benefit 6: Digital Convenience */}
+          <motion.div
+            className="group relative bg-white/80 backdrop-blur-md border border-gray-200/50 shadow-lg rounded-3xl p-8 hover:bg-white hover:shadow-xl transition-all duration-300 cursor-pointer"
+            variants={cardVariants}
+            whileHover={{ 
+              y: -8,
+              scale: 1.02,
+              transition: { duration: 0.3 }
+            }}
+          >
+            <motion.div 
+              className="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6"
+              whileHover={{ 
+                scale: 1.1,
+                rotate: 5,
+                transition: { duration: 0.2 }
+              }}
+            >
+              <Ticket className="w-8 h-8 text-white" />
+            </motion.div>
+            
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Digital Convenience</h3>
+            <p className="text-primary font-medium text-sm mb-4">All in your phone</p>
+            <p className="text-gray-600 leading-relaxed">
+              Everything you need in one app - maps, tickets, recommendations, and real-time updates for seamless exploring.
+            </p>
+          </motion.div>
+        </motion.div>
+      </div>
+      
+      <motion.div 
+        className="container mx-auto px-4"
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        variants={containerVariants}
+      >
+
+      </motion.div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/WhyChooseUsSection.tsx b/src/components/WhyChooseUsSection.tsx
new file mode 100644
index 0000000..1a7cda6
--- /dev/null
+++ b/src/components/WhyChooseUsSection.tsx
@@ -0,0 +1,150 @@
+import { motion } from 'motion/react';
+import { Calendar, Star, Award, HeadphonesIcon } from 'lucide-react';
+
+export function WhyChooseUsSection() {
+  const features = [
+    {
+      icon: Calendar,
+      title: "Ultimate flexibility",
+      description: "You're in control, with free cancellation and payment options to satisfy any plan or budget.",
+      gradient: "from-blue-500 to-cyan-500"
+    },
+    {
+      icon: Star,
+      title: "Memorable experiences", 
+      description: "Browse and book tours and activities so incredible, you'll want to tell your friends.",
+      gradient: "from-purple-500 to-pink-500"
+    },
+    {
+      icon: Award,
+      title: "Quality at our core",
+      description: "High-quality standards. Millions of reviews. A tours company that's all about trust.",
+      gradient: "from-amber-500 to-orange-500"
+    },
+    {
+      icon: HeadphonesIcon,
+      title: "Award-winning support",
+      description: "New price? New plan? No problem. We're here to help, 24/7.",
+      gradient: "from-green-500 to-emerald-500"
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        {/* Heading */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
+            <span className="font-light">Why Choose</span>{' '}
+            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Us?
+            </span>
+          </h2>
+        </motion.div>
+
+        {/* Features Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
+          {features.map((feature, index) => {
+            const IconComponent = feature.icon;
+            
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="text-center group"
+              >
+                {/* Icon Container */}
+                <motion.div
+                  whileHover={{ scale: 1.05, y: -5 }}
+                  transition={{ duration: 0.3 }}
+                  className="relative mb-6 mx-auto w-20 h-20 flex items-center justify-center"
+                >
+                  {/* Background Shape */}
+                  <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} rounded-2xl opacity-10 group-hover:opacity-20 transition-opacity duration-300`}></div>
+                  
+                  {/* Icon */}
+                  <div className={`relative z-10 w-16 h-16 bg-gradient-to-br ${feature.gradient} rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-300`}>
+                    <IconComponent className="w-8 h-8 text-white" />
+                  </div>
+                  
+                  {/* Glow Effect */}
+                  <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} rounded-2xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300 -z-10`}></div>
+                </motion.div>
+
+                {/* Content */}
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  whileInView={{ opacity: 1 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 + 0.2 }}
+                  viewport={{ once: true }}
+                  className="space-y-3"
+                >
+                  <h3 className="font-merchant text-xl font-semibold text-gray-900 group-hover:text-gray-700 transition-colors duration-300">
+                    {feature.title}
+                  </h3>
+                  
+                  <p className="text-gray-600 leading-relaxed max-w-xs mx-auto group-hover:text-gray-700 transition-colors duration-300">
+                    {feature.description}
+                  </p>
+                </motion.div>
+
+                {/* Hover Effect Indicator */}
+                <motion.div
+                  initial={{ scaleX: 0 }}
+                  whileInView={{ scaleX: 1 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 + 0.4 }}
+                  viewport={{ once: true }}
+                  className={`w-12 h-1 bg-gradient-to-r ${feature.gradient} mx-auto mt-4 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
+                ></motion.div>
+              </motion.div>
+            );
+          })}
+        </div>
+
+        {/* Bottom CTA */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <p className="font-poppins text-lg text-gray-600 mb-6 max-w-2xl mx-auto leading-relaxed font-normal">
+            Join millions of travelers who trust CityCards for their urban adventures. 
+            Start exploring with confidence today.
+          </p>
+          
+          <motion.button
+            whileHover={{ scale: 1.05, y: -2 }}
+            whileTap={{ scale: 0.95 }}
+            className="inline-flex items-center gap-3 bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group"
+          >
+            <span>Discover CityCards</span>
+            <motion.div
+              animate={{ x: [0, 5, 0] }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+              className="group-hover:translate-x-1 transition-transform duration-300"
+            >
+              →
+            </motion.div>
+          </motion.button>
+        </motion.div>
+      </div>
+
+      {/* Background Decorations */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-primary/5 to-transparent rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tl from-secondary/5 to-transparent rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/figma/ImageWithFallback.tsx b/src/components/figma/ImageWithFallback.tsx
new file mode 100644
index 0000000..0e26139
--- /dev/null
+++ b/src/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..aa2c37b
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion@1.2.3";
+import { ChevronDownIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..68f3605
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog@1.1.6";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..856b94d
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..2a2f462
--- /dev/null
+++ b/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio@1.1.2";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..589b166
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar@1.1.3";
+
+import { cn } from "./utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..3f8eff8
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..d2adf98
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { ChevronRight, MoreHorizontal } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..2522923
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        shine: "relative bg-gradient-to-r from-primary to-secondary text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden group [&>span]:text-white [&>span]:font-medium",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        xl: "h-12 rounded-xl px-10 has-[>svg]:px-8",
+        icon: "size-9 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      withShine?: boolean;
+    }
+>(({ className, variant, size, asChild = false, withShine = false, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  
+  const buttonContent = withShine ? (
+    <>
+      <span className="relative z-10 text-white font-medium">{children}</span>
+      {/* Shine Wave Animation */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="wave-line-infinity h-full bg-gradient-to-r from-transparent via-white to-transparent animate-wave"></div>
+      </div>
+    </>
+  ) : children;
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant: withShine ? "shine" : variant, size, className }))}
+      ref={ref}
+      {...props}
+    >
+      {buttonContent}
+    </Comp>
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..b30236f
--- /dev/null
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react@0.487.0";
+import { DayPicker } from "react-day-picker@8.10.1";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-x-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100",
+        ),
+        day_range_start:
+          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end:
+          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("size-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("size-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..5f9d58a
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <h4
+      data-slot="card-title"
+      className={cn("leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 [&:last-child]:pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..2752b36
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react@8.6.0";
+import { ArrowLeft, ArrowRight } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import { Button } from "./button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..d558e19
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts@2.15.2";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          },
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center",
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..a175500
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox@1.1.4";
+import { CheckIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..baddbac
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible@1.1.3";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..8352a78
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk@1.1.1";
+import { SearchIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..d0eaf22
--- /dev/null
+++ b/src/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu@2.2.6";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..aaa507c
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog@1.1.6";
+import { XIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal data-slot="dialog-portal">
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="dialog-content"
+      className={cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+        className,
+      )}
+      aria-describedby={props["aria-describedby"] || undefined}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <XIcon />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    data-slot="dialog-title"
+    className={cn("text-lg leading-none font-semibold", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    data-slot="dialog-description"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..0afaf9f
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul@1.1.2";
+
+import { cn } from "./utils";
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..4a6042f
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu@2.1.6";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..a4e6cdd
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form@7.55.0";
+
+import { cn } from "./utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..7c2efcb
--- /dev/null
+++ b/src/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card@1.1.6";
+
+import { cn } from "./utils";
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
new file mode 100644
index 0000000..3cdd909
--- /dev/null
+++ b/src/components/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp@1.4.2";
+import { MinusIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..19b0c61
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..a8bb8a3
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
+
+import { cn } from "./utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
new file mode 100644
index 0000000..ef5fcb2
--- /dev/null
+++ b/src/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar@1.1.6";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  );
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  );
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+};
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..a4a30ed
--- /dev/null
+++ b/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu@1.2.5";
+import { cva } from "class-variance-authority@0.7.1";
+import { ChevronDownIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center",
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..bb81329
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..908620a
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover@1.1.6";
+
+import { cn } from "./utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..93f8fc8
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress@1.1.2";
+
+import { cn } from "./utils";
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..9620969
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group@1.2.3";
+import { CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..163ee35
--- /dev/null
+++ b/src/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react@0.487.0";
+import * as ResizablePrimitive from "react-resizable-panels@2.1.7";
+
+import { cn } from "./utils";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..97f2f40
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area@1.2.3";
+
+import { cn } from "./utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..bd1333f
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select@2.1.6";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..5589b91
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator@1.1.2";
+
+import { cn } from "./utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..d7445e4
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog@1.1.6";
+import { XIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+const SheetTrigger = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>
+>(({ ...props }, ref) => (
+  <SheetPrimitive.Trigger ref={ref} data-slot="sheet-trigger" {...props} />
+));
+SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
+
+const SheetClose = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>
+>(({ ...props }, ref) => (
+  <SheetPrimitive.Close ref={ref} data-slot="sheet-close" {...props} />
+));
+SheetClose.displayName = SheetPrimitive.Close.displayName;
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    data-slot="sheet-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+  }
+>(({ className, children, side = "right", ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      data-slot="sheet-content"
+      className={cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+        side === "right" &&
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+        side === "left" &&
+          "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        side === "top" &&
+          "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+        side === "bottom" &&
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <XIcon className="size-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    data-slot="sheet-title"
+    className={cn("text-foreground font-semibold", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    data-slot="sheet-description"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..aae55b2
--- /dev/null
+++ b/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { VariantProps, cva } from "class-variance-authority@0.7.1";
+import { PanelLeftIcon } from "lucide-react@0.487.0";
+
+import { useIsMobile } from "./use-mobile";
+import { cn } from "./utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet";
+import { Skeleton } from "./skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e5a04d6
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "./utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..3432fd0
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider@1.2.3";
+
+import { cn } from "./utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..40842fb
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes@0.4.6";
+import { Toaster as Sonner, ToasterProps } from "sonner@2.0.3";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..000e10c
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch@1.1.3";
+
+import { cn } from "./utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..59e4dcc
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..aeb0ff0
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs@1.1.3";
+
+import { cn } from "./utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..8f1810e
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..88e9fbc
--- /dev/null
+++ b/src/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group@1.1.2";
+import { type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+import { toggleVariants } from "./toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..e743879
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..79d9ab4
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip@1.1.8";
+
+import { cn } from "./utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/components/ui/use-mobile.ts b/src/components/ui/use-mobile.ts
new file mode 100644
index 0000000..a93d583
--- /dev/null
+++ b/src/components/ui/use-mobile.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/src/components/ui/utils.ts b/src/components/ui/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/components/ui/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..f7f59ba
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,29 @@
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
diff --git a/src/guidelines/Guidelines.md b/src/guidelines/Guidelines.md
new file mode 100644
index 0000000..4a00ca3
--- /dev/null
+++ b/src/guidelines/Guidelines.md
@@ -0,0 +1,345 @@
+# Image Reference Guidelines
+
+**IMPORTANT**: When I provide an image for reference, it is for design reference only. Do NOT use that image inside any image section in the code. The image is provided to help understand the layout, styling, and visual direction - not to be embedded as an actual image in the application.
+
+# CityCards Typography Guidelines
+
+**Project**: Typography Guidelines for CityCards Travel Website
+
+## Font System
+
+### Primary Font
+- **Poppins**: Used for all text including headings (H1–H6), body text, buttons, labels, and forms - Clean, readable, and consistent throughout
+
+### Font Weight Scale & Usage
+- **font-light (300)**: Hero headings only - For creating dynamic contrast in H1/H2
+- **font-normal (400)**: Standard body text - Default weight for paragraphs
+- **font-medium (500)**: Buttons, navigation links, subtle emphasis
+- **font-semibold (600)**: Section headings, primary buttons
+- **font-bold (700)**: Hero keywords, strong emphasis
+
+## Heading Typography Specifications
+
+### H1 - Hero/Main Page Headings
+- **Font**: Poppins
+- **Size**: `text-5xl md:text-6xl lg:text-7xl` (48px/60px/72px - targeting ~64px)
+- **Line Height**: `leading-tight`
+- **Pattern**: Dynamic multi-weight with gradient/italic accents (max 2 emphasis styles)
+
+```jsx
+<h1 className="font-poppins text-5xl md:text-6xl lg:text-7xl leading-tight">
+  <span className="font-light">Discover</span>{' '}
+  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+    Melbourne's
+  </span>{' '}
+  <span className="font-normal">Best Experiences</span>
+</h1>
+```
+
+### H2 - Section Headings
+- **Font**: Poppins
+- **Size**: `text-2xl md:text-3xl lg:text-4xl` (24px/36px/48px)
+- **Line Height**: `leading-tight`
+- **Pattern**: Mixed weights with gradient emphasis
+
+```jsx
+<h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
+  <span className="font-light">Explore</span>{' '}
+  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+    Amazing
+  </span>{' '}
+  <span className="font-normal">Cities</span>
+</h2>
+```
+
+### H3 - Subsection Headings
+- **Font**: Poppins
+- **Size**: `text-xl md:text-2xl` (24px/30px)
+- **Line Height**: `leading-snug`
+- **Weight**: `font-semibold`
+
+```jsx
+<h3 className="font-poppins text-xl md:text-2xl leading-snug font-semibold">
+  Feature Title
+</h3>
+```
+
+### H4 - Component Headings
+- **Font**: Poppins
+- **Size**: `text-lg md:text-xl` (20px/24px)
+- **Line Height**: `leading-snug`
+- **Weight**: `font-medium` or `font-semibold`
+
+```jsx
+<h4 className="font-poppins text-lg md:text-xl leading-snug font-medium">
+  Component Heading
+</h4>
+```
+
+### H5 - Card/Item Titles
+- **Font**: Poppins
+- **Size**: `text-lg` (18px)
+- **Line Height**: `leading-snug`
+- **Weight**: `font-medium`
+
+```jsx
+<h5 className="font-poppins text-lg leading-snug font-medium">
+  Card Title
+</h5>
+```
+
+### H6 - Small Headings
+- **Font**: Poppins
+- **Size**: `text-base` (16px)
+- **Line Height**: `leading-snug`
+- **Weight**: `font-medium`
+
+```jsx
+<h6 className="font-poppins text-base leading-snug font-medium">
+  Small Heading
+</h6>
+```
+
+## Body Typography Specifications
+
+### Large Body Text
+- **Font**: Poppins
+- **Size**: `text-xl` (20px)
+- **Line Height**: `leading-relaxed`
+- **Weight**: `font-normal`
+
+```jsx
+<p className="font-poppins text-xl leading-relaxed font-normal">
+  Large descriptive text for important sections
+</p>
+```
+
+### Regular Body Text
+- **Font**: Poppins
+- **Size**: `text-base` (16px)
+- **Line Height**: `leading-relaxed`
+- **Weight**: `font-normal`
+
+```jsx
+<p className="font-poppins text-base leading-relaxed font-normal">
+  Regular body text content
+</p>
+```
+
+### Small Body Text
+- **Font**: Poppins
+- **Size**: `text-sm` (14px)
+- **Line Height**: `leading-relaxed`
+- **Weight**: `font-normal` or `font-light`
+
+```jsx
+<p className="font-poppins text-sm leading-relaxed font-normal">
+  Caption or meta information
+</p>
+```
+
+## Interactive Element Typography
+
+### Buttons
+- **Font**: Poppins
+- **Primary Weight**: `font-semibold`
+- **Secondary Weight**: `font-medium`
+- **Min Size**: 16px
+
+```jsx
+// Primary Button
+<Button className="font-poppins font-semibold">
+  Primary Action
+</Button>
+
+// Secondary Button
+<Button className="font-poppins font-medium">
+  Secondary Action
+</Button>
+```
+
+### Navigation Links
+- **Font**: Poppins
+- **Weight**: `font-medium`
+- **Size**: `text-base` (16px)
+
+```jsx
+<a className="font-poppins font-medium text-base">
+  Navigation Link
+</a>
+```
+
+### Form Labels
+- **Font**: Poppins
+- **Weight**: `font-light` or `font-normal`
+- **Size**: `text-sm` or `text-base` (14px/16px)
+
+```jsx
+<Label className="font-poppins font-light text-sm">
+  Form Label
+</Label>
+```
+
+### Form Inputs
+- **Font**: Poppins
+- **Weight**: `font-normal`
+- **Size**: `text-base` (16px)
+
+```jsx
+<Input className="font-poppins font-normal text-base" />
+```
+
+## Accessibility Standards
+
+### Text Size Requirements
+- **Minimum Text Size**: 14px
+- **Interactive Minimum Size**: 16px
+- **Contrast**: WCAG AA or higher
+- **Heading Hierarchy**: Maintain semantic order (H1 → H2 → H3 etc.)
+
+### Implementation Requirements
+```jsx
+// Always include explicit font and size classes to override defaults
+<p className="font-poppins text-base font-normal leading-relaxed">
+  Content with explicit styling
+</p>
+```
+
+## Typography Rules
+
+### DO ✅
+- Use Poppins for all text (headings and body)
+- Apply max 2 emphasis styles per heading
+- Use gradient effects sparingly
+- Keep line-heights consistent
+- Always specify explicit font classes to override component defaults
+
+### DON'T ❌
+- Don't use font-light in small text
+- Don't mix more than 3 weights in one heading
+- Don't go below 14px for captions
+- Don't override font sizes without Tailwind classes
+- Don't break semantic heading hierarchy
+
+## Implementation Guidelines
+
+### Component Styling Override
+**IMPORTANT**: Always explicitly set typography classes to override component defaults:
+
+```jsx
+// ✅ CORRECT - Explicit typography classes
+<Card>
+  <CardHeader>
+    <CardTitle className="font-poppins text-xl font-semibold">
+      Card Title
+    </CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p className="font-poppins text-base font-normal leading-relaxed">
+      Card content with explicit styling
+    </p>
+  </CardContent>
+</Card>
+
+// ❌ INCORRECT - Relying on defaults
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Card content without explicit styling</p>
+  </CardContent>
+</Card>
+```
+
+### Dynamic Heading Patterns
+```jsx
+// Pattern 1: Light → Bold (H1/H2 only)
+<h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight">
+  <span className="font-light">Discover</span>{' '}
+  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+    Amazing
+  </span>{' '}
+  <span className="font-normal">Destinations</span>
+</h1>
+
+// Pattern 2: Normal → Semibold (H3/H4)
+<h3 className="font-poppins text-xl md:text-2xl leading-snug">
+  <span className="font-normal">Experience</span>{' '}
+  <span className="font-semibold">Melbourne's Culture</span>
+</h3>
+```
+
+### Responsive Typography
+```jsx
+// Mobile-first responsive scaling
+<h1 className="font-poppins text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
+  Responsive Heading
+</h1>
+
+<p className="font-poppins text-sm sm:text-base md:text-lg leading-relaxed font-normal">
+  Responsive body text
+</p>
+```
+
+**Add your own guidelines here**
+
diff --git a/src/imports/AfterLogin.tsx b/src/imports/AfterLogin.tsx
new file mode 100644
index 0000000..9ab7400
--- /dev/null
+++ b/src/imports/AfterLogin.tsx
@@ -0,0 +1,42 @@
+function Text() {
+  return (
+    <div className="h-[14px] relative shrink-0 w-[13.703px]" data-name="Text">
+      <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[14px] relative w-[13.703px]">
+        <div className="absolute font-['Poppins:Bold',_sans-serif] leading-[0] left-0 not-italic text-[10.5px] text-nowrap text-white top-0">
+          <p className="leading-[14px] whitespace-pre">JD</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Container() {
+  return (
+    <div className="box-border content-stretch flex items-center justify-center pl-0 pr-[0.016px] py-0 relative rounded-[3.35544e+07px] shrink-0 size-[28px]" data-name="Container" style={{ backgroundImage: "linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(90deg, rgb(249, 95, 98) 0%, rgb(249, 95, 98) 100%)" }}>
+      <Text />
+    </div>
+  );
+}
+
+function Text1() {
+  return (
+    <div className="content-stretch flex h-[17.5px] items-start relative shrink-0 w-[86.047px]" data-name="Text">
+      <div className="font-['Poppins:SemiBold',_sans-serif] leading-[0] not-italic relative shrink-0 text-[12.25px] text-nowrap text-white">
+        <p className="leading-[17.5px] whitespace-pre">MY CITY CARD</p>
+      </div>
+    </div>
+  );
+}
+
+export default function AfterLogin() {
+  return (
+    <div className="bg-[#f95f62] relative rounded-[3.35544e+07px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] size-full" data-name="After Login">
+      <div className="flex flex-row items-center justify-center relative size-full">
+        <div className="box-border content-stretch flex gap-[4px] items-center justify-center overflow-clip px-[15px] py-[12px] relative size-full">
+          <Container />
+          <Text1 />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/BeforeLogin.tsx b/src/imports/BeforeLogin.tsx
new file mode 100644
index 0000000..0b3a144
--- /dev/null
+++ b/src/imports/BeforeLogin.tsx
@@ -0,0 +1,21 @@
+function Text() {
+  return (
+    <div className="content-stretch flex h-[17.5px] items-start relative shrink-0" data-name="Text">
+      <div className="font-['Poppins:SemiBold',_sans-serif] leading-[0] not-italic relative shrink-0 text-[12.25px] text-nowrap text-white">
+        <p className="leading-[17.5px] whitespace-pre">GET A CITY CARD</p>
+      </div>
+    </div>
+  );
+}
+
+export default function BeforeLogin() {
+  return (
+    <div className="bg-[#f95f62] relative rounded-[3.35544e+07px] shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)] size-full" data-name="Before Login">
+      <div className="flex flex-col items-center relative size-full">
+        <div className="box-border content-stretch flex flex-col gap-[8px] items-center overflow-clip px-[47px] py-[17px] relative size-full">
+          <Text />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Component70.tsx b/src/imports/Component70.tsx
new file mode 100644
index 0000000..b9afbaf
--- /dev/null
+++ b/src/imports/Component70.tsx
@@ -0,0 +1,512 @@
+import svgPaths from "./svg-7twn37a15";
+import img938886Odhggd01 from "figma:asset/183ba346669a0a079762ab3f9535b7d1469ed4d9.png";
+import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
+import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";
+
+function ConvertTextToACircleFigmaPlugin1() {
+  return (
+    <div
+      className="absolute contents left-[521.618px] top-[252.432px]"
+      data-name="Convert text to a circle figma plugin!1"
+    >
+      <div className="absolute flex h-[13.106px] items-center justify-center left-[521.618px] top-[252.432px] w-[9.861px]">
+        <div className="flex-none rotate-[8.861deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.354px] items-center justify-center left-[530.732px] top-[254.994px] w-[6.959px]">
+        <div className="flex-none rotate-[19.54deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[13.822px] items-center justify-center left-[534.091px] top-[256.899px] w-[11.889px]">
+        <div className="flex-none rotate-[29.576deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[13.362px] items-center justify-center left-[537.732px] top-[261.994px] w-[14.038px]">
+        <div className="flex-none rotate-[51.084deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.08px] items-center justify-center left-[541.31px] top-[269.496px] w-[14.188px]">
+        <div className="flex-none rotate-[67.534deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[10.163px] items-center justify-center left-[545.732px] top-[278.994px] w-[13.453px]">
+        <div className="flex-none rotate-[76.015deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[8.211px] items-center justify-center left-[547.733px] top-[289.994px] w-[12.069px]">
+        <div className="flex-none rotate-[90.489deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[10.9px] items-center justify-center left-[545.732px] top-[295.995px] w-[13.671px]">
+        <div className="flex-none rotate-[104.769deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.472px] items-center justify-center left-[542.732px] top-[302.995px] w-[14.134px]">
+        <div className="flex-none rotate-[119.915deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConvertTextToACircleFigmaPlugin2() {
+  return (
+    <div
+      className="absolute contents left-[479.158px] top-[268.255px]"
+      data-name="Convert text to a circle figma plugin!1"
+    >
+      <div className="absolute flex h-[13.552px] items-center justify-center left-[510.832px] top-[317.739px] w-[10.668px]">
+        <div className="flex-none rotate-[193.391deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.231px] items-center justify-center left-[504.907px] top-[316.101px] w-[7.748px]">
+        <div className="flex-none rotate-[204.071deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[13.782px] items-center justify-center left-[495.956px] top-[312.468px] w-[12.408px]">
+        <div className="flex-none rotate-[214.106deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.954px] items-center justify-center left-[489.751px] top-[309.341px] w-[14.13px]">
+        <div className="flex-none rotate-[235.614deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[11.411px] items-center justify-center left-[485.483px] top-[302.964px] w-[13.914px]">
+        <div className="flex-none rotate-[252.064deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[9.354px] items-center justify-center left-[482.498px] top-[296.197px] w-[13.066px]">
+        <div className="flex-none rotate-[260.545deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[9.128px] items-center justify-center left-[482.137px] top-[288.595px] w-[12.663px]">
+        <div className="flex-none rotate-[275.019deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[11.62px] items-center justify-center left-[483.521px] top-[277.907px] w-[14.006px]">
+        <div className="flex-none rotate-[289.299deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[12.959px] items-center justify-center left-[487.643px] top-[268.833px] w-[14.129px]">
+        <div className="flex-none rotate-[304.445deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IconoirSeaWaves() {
+  return (
+    <div
+      className="h-[2.098px] relative w-[3.227px]"
+      data-name="iconoir:sea-waves"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 4 3"
+      >
+        <g clipPath="url(#clip0_2048_120)" id="iconoir:sea-waves">
+          <path
+            d={svgPaths.p1347bee0}
+            id="Vector"
+            stroke="var(--stroke-0, #87E9FF)"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="0.231944"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2048_120">
+            <rect fill="white" height="2.09758" width="3.22705" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function NounCoconutTree77945312() {
+  return (
+    <div
+      className="h-[8.39px] relative w-[6.849px]"
+      data-name="noun-coconut-tree-7794531 2"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 7 9"
+      >
+        <g id="noun-coconut-tree-7794531 2">
+          <path d={svgPaths.p80f500} fill="var(--fill-0, black)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58657() {
+  return (
+    <div className="absolute contents left-[498.158px] top-[278.432px]">
+      <div className="absolute flex h-[3.312px] items-center justify-center left-[515.343px] top-[296.008px] w-[3.815px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <IconoirSeaWaves />
+        </div>
+      </div>
+      <div className="absolute flex h-[30.203px] items-center justify-center left-[498.158px] top-[278.432px] w-[45.643px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="font-['Goodly:Medium',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[10.245px] text-left text-nowrap">
+            <p className="leading-[normal] whitespace-pre">
+              <span>{`C `}</span>
+              <span className="tracking-[-3.2px]"> </span>tyCards
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[10.552px] items-center justify-center left-[504.391px] top-[296.346px] w-[9.867px]">
+        <div className="flex-none rotate-[153.432deg] scale-y-[-100%]">
+          <NounCoconutTree77945312 />
+        </div>
+      </div>
+      <div className="absolute flex h-[4.822px] items-center justify-center left-[526.636px] top-[290.363px] w-[4.822px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="relative size-[3.596px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 4 4"
+            >
+              <circle
+                cx="1.79793"
+                cy="1.79793"
+                id="Ellipse 1"
+                r="1.49827"
+                stroke="var(--stroke-0, black)"
+                strokeWidth="0.59931"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-[1.999px] items-center justify-center left-[529.919px] top-[293.142px] w-[2.802px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="h-[0.899px] relative w-[2.697px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 3 1"
+            >
+              <path
+                d={svgPaths.p3794ff00}
+                fill="var(--fill-0, black)"
+                id="Vector 10"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258263() {
+  return (
+    <div className="absolute contents left-[479.158px] top-[252.432px]">
+      <div className="absolute bottom-[8.158%] flex items-center justify-center left-[80.601%] right-[5.415%] top-[69.036%]">
+        <div className="flex-none rotate-[358.074deg] size-[80.907px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.463%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 83 83"
+              >
+                <path
+                  d={svgPaths.p1a313240}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute bottom-[11.744%] flex items-center justify-center left-[82.811%] right-[7.617%] top-[72.645%]">
+        <div className="flex-none rotate-[356.727deg] size-[54.202px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.692%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 56 56"
+              >
+                <path
+                  d={svgPaths.pefd30f0}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ConvertTextToACircleFigmaPlugin1 />
+      <ConvertTextToACircleFigmaPlugin2 />
+      <Group58657 />
+    </div>
+  );
+}
+
+function MaskGroup() {
+  return (
+    <div
+      className="absolute contents left-[479.158px] top-[252.432px]"
+      data-name="Mask group"
+    >
+      <Group1216258263 />
+      <div className="absolute flex h-[313.017px] items-center justify-center left-[405.158px] top-[168.431px] w-[313.666px]">
+        <div className="flex-none rotate-[298.418deg]">
+          <div
+            className="bg-center bg-cover bg-no-repeat h-[231.987px] w-[230.381px]"
+            data-name="938886_ODHGGD0 1"
+            style={{ backgroundImage: `url('${img938886Odhggd01}')` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1000003903() {
+  return (
+    <div
+      className="absolute bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] h-[366.47px] left-[13.842px] rounded-[9px] top-[23.568px] w-[597.675px]"
+      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
+    >
+      <div
+        className="absolute bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[300px] left-[37.158px] rounded-[4.585px] top-[32.432px] w-[223px]"
+        data-name="7326e6090fb09c3ae7046baa345e8611 1"
+        style={{
+          backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
+        }}
+      />
+      <div className="[text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] absolute css-qhcors font-['Thesignature:Regular',_sans-serif] leading-[0] left-[309.973px] not-italic text-[#070707] text-[32.096px] text-left top-[127.781px] tracking-[0.321px] w-[223.192px]">
+        <p className="adjustLetterSpacing block leading-[0.82]">
+          Pick from iconic attraction images to frame your memory.
+        </p>
+      </div>
+      <div className="absolute flex h-[261px] items-center justify-center left-[284.158px] top-[48.432px] w-[0px]">
+        <div className="flex-none rotate-[90deg]">
+          <div className="h-0 relative w-[261px]">
+            <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 261 1"
+              >
+                <line
+                  id="Line 33"
+                  stroke="var(--stroke-0, #6E5D40)"
+                  strokeWidth="0.4"
+                  x2="261"
+                  y1="0.8"
+                  y2="0.8"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute h-0 left-[306.158px] top-[143.432px] w-[216px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+          <svg
+            className="block size-full"
+            fill="none"
+            preserveAspectRatio="none"
+            viewBox="0 0 216 1"
+          >
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="absolute h-0 left-[306.158px] top-[170.432px] w-[216px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+          <svg
+            className="block size-full"
+            fill="none"
+            preserveAspectRatio="none"
+            viewBox="0 0 216 1"
+          >
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="absolute h-0 left-[306.158px] top-[197.432px] w-[216px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+          <svg
+            className="block size-full"
+            fill="none"
+            preserveAspectRatio="none"
+            viewBox="0 0 216 1"
+          >
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="absolute h-0 left-[306.158px] top-[224.432px] w-[216px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+          <svg
+            className="block size-full"
+            fill="none"
+            preserveAspectRatio="none"
+            viewBox="0 0 216 1"
+          >
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+          </svg>
+        </div>
+      </div>
+      <MaskGroup />
+      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
+    </div>
+  );
+}
+
+function Group1216258262() {
+  return (
+    <div className="relative size-full">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 48 64"
+      >
+        <g id="Group 1216258262">
+          <path
+            d={svgPaths.p285ae700}
+            fill="var(--fill-0, #765840)"
+            id="Vector"
+          />
+          <path
+            d={svgPaths.p33bc9700}
+            fill="var(--fill-0, #F2E4CD)"
+            id="Vector_2"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group1000002456() {
+  return (
+    <div className="absolute contents left-[13.842px] top-[23.568px]">
+      <Frame1000003903 />
+      <div className="absolute bottom-[73.421%] flex items-center justify-center left-[82.833%] right-[6.485%] top-[8.185%]">
+        <div className="flex-none h-[63.844px] rotate-[339.573deg] w-[47.511px]">
+          <Group1216258262 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Component70() {
+  return (
+    <div className="relative size-full" data-name="Component 70">
+      <Group1000002456 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Cta06.tsx b/src/imports/Cta06.tsx
new file mode 100644
index 0000000..59887a8
--- /dev/null
+++ b/src/imports/Cta06.tsx
@@ -0,0 +1,134 @@
+import { imgDescription, imgText, imgGooglePlayLogo, imgStoreBadge, imgGroup, imgText1, imgImageSvgrepoCom } from "./svg-0l4uo";
+
+function SectionHeading() {
+  return (
+    <div className="content-stretch flex flex-col gap-2 items-start justify-start leading-[0] not-italic overflow-clip relative shrink-0 w-[592px]" data-name="Section heading">
+      <div className="css-9el0wq font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-[#2d3134] text-[48px] tracking-[-1.2px] w-full">
+        <p className="leading-[60px]">Access all your city cards on your phone.</p>
+      </div>
+      <div className="css-sdralp font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[18px] text-gray-900 w-full">
+        <p className="leading-[28px]">Download the app to manage your projects, keep track of the progress and complete tasks without procastinating. Stay on track and complete on time!</p>
+      </div>
+    </div>
+  );
+}
+
+function Bg() {
+  return <img className="block max-w-none size-full" src={imgDescription} />;
+}
+
+function Text() {
+  return (
+    <div className="absolute inset-[17.16%_6.8%_14.81%_30.4%]" data-name="Text">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.37%]">
+        <img className="block max-w-none size-full" src={imgText} />
+      </div>
+    </div>
+  );
+}
+
+function GooglePlayLogo() {
+  return (
+    <div className="absolute inset-[17.83%_75.51%_17.82%_7.38%]" data-name="Google Play logo">
+      <img className="block max-w-none size-full" src={imgGooglePlayLogo} />
+    </div>
+  );
+}
+
+function StoreBadge() {
+  return (
+    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg />
+      <Text />
+      <GooglePlayLogo />
+    </div>
+  );
+}
+
+function Bg1() {
+  return <img className="block max-w-none size-full" src={imgStoreBadge} />;
+}
+
+function Group() {
+  return (
+    <div className="absolute inset-[21.8%_73.54%_23.76%_13.33%]" data-name="<Group>">
+      <img className="block max-w-none size-full" src={imgGroup} />
+    </div>
+  );
+}
+
+function Text1() {
+  return (
+    <div className="absolute inset-[21.09%_12.95%_16.27%_31.45%]" data-name="Text">
+      <img className="block max-w-none size-full" src={imgText1} />
+    </div>
+  );
+}
+
+function StoreBadge1() {
+  return (
+    <div className="h-10 overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg1 />
+      <Group />
+      <Text1 />
+    </div>
+  );
+}
+
+function Badges() {
+  return (
+    <div className="content-stretch flex gap-3 items-start justify-start overflow-clip relative shrink-0" data-name="Badges">
+      <StoreBadge />
+      <StoreBadge1 />
+    </div>
+  );
+}
+
+function GetTheApp() {
+  return (
+    <div className="content-stretch flex flex-col gap-2 items-start justify-start overflow-clip relative shrink-0" data-name="Get the App">
+      <div className="css-sdralp font-['Inter:Medium',_sans-serif] font-medium leading-[0] not-italic relative shrink-0 text-[18px] text-gray-900 text-nowrap">
+        <p className="leading-[28px] whitespace-pre">Get the App</p>
+      </div>
+      <Badges />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="content-stretch flex flex-col gap-12 items-start justify-start overflow-clip relative shrink-0" data-name="Content">
+      <SectionHeading />
+      <GetTheApp />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <img className="block max-w-none size-full" src={imgImageSvgrepoCom} />
+    </div>
+  );
+}
+
+function Img() {
+  return (
+    <div className="bg-[#d9d9d9] h-[558px] relative shrink-0 w-[592px]" data-name="img">
+      <ImageSvgrepoCom />
+    </div>
+  );
+}
+
+export default function Cta06() {
+  return (
+    <div className="bg-white relative size-full" data-name="CTA 06">
+      <div className="flex flex-row items-center relative size-full">
+        <div className="box-border content-stretch flex gap-8 items-center justify-start px-28 py-0 relative size-full">
+          <Content />
+          <Img />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1000003903-2049-123.tsx b/src/imports/Frame1000003903-2049-123.tsx
new file mode 100644
index 0000000..db1656f
--- /dev/null
+++ b/src/imports/Frame1000003903-2049-123.tsx
@@ -0,0 +1,505 @@
+import svgPaths from "./svg-te3jp5uahp";
+import img938886Odhggd01 from "figma:asset/183ba346669a0a079762ab3f9535b7d1469ed4d9.png";
+import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
+import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";
+
+function Group1216258262() {
+  return (
+    <div className="h-[63.844px] relative w-[47.511px]">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 48 64"
+      >
+        <g id="Group 1216258262">
+          <path
+            d={svgPaths.p285ae700}
+            fill="var(--fill-0, #765840)"
+            id="Vector"
+          />
+          <path
+            d={svgPaths.p33bc9700}
+            fill="var(--fill-0, #F2E4CD)"
+            id="Vector_2"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group1216258507() {
+  return (
+    <div className="[grid-area:1_/_1] h-[81px] ml-1 mt-4 relative w-[216px]">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.494%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 216 82"
+        >
+          <g id="Group 1216258507">
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+            <line
+              id="Line 35"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="27.8"
+              y2="27.8"
+            />
+            <line
+              id="Line 36"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="54.8"
+              y2="54.8"
+            />
+            <line
+              id="Line 37"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="81.8"
+              y2="81.8"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258508() {
+  return (
+    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
+      <div className="[grid-area:1_/_1] [text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] css-qhcors font-['Thesignature:Regular',_sans-serif] ml-0 mt-0 not-italic relative text-[#070707] text-[32.096px] text-left tracking-[0.321px] w-[223.192px]">
+        <p className="adjustLetterSpacing block leading-[0.82]">
+          Pick from iconic attraction images to frame your memory.
+        </p>
+      </div>
+      <Group1216258507 />
+    </div>
+  );
+}
+
+function ConvertTextToACircleFigmaPlugin1() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[42.459px] mt-0 place-items-start relative"
+      data-name="Convert text to a circle figma plugin!1"
+    >
+      <div className="[grid-area:1_/_1] flex h-[18.133px] items-center justify-center ml-0 mt-0 relative w-[11.187px]">
+        <div className="flex-none rotate-[8.861deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[16.946px] items-center justify-center ml-[9.114px] mt-[2.563px] relative w-[8.292px]">
+        <div className="flex-none rotate-[19.54deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[17.785px] items-center justify-center ml-[12.473px] mt-[4.467px] relative w-[13.677px]">
+        <div className="flex-none rotate-[29.576deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.785px] items-center justify-center ml-[16.114px] mt-[9.563px] relative w-[17.35px]">
+        <div className="flex-none rotate-[51.084deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[14.51px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[19.024px]">
+        <div className="flex-none rotate-[67.534deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[11.447px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.324px]">
+        <div className="flex-none rotate-[76.015deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[6.973px] items-center justify-center ml-[26.115px] mt-[37.562px] relative w-[17.058px]">
+        <div className="flex-none rotate-[90.489deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[12.009px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.462px]">
+        <div className="flex-none rotate-[104.769deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[14.193px] items-center justify-center ml-[21.114px] mt-[50.563px] relative w-[18.023px]">
+        <div className="flex-none rotate-[119.915deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConvertTextToACircleFigmaPlugin2() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-[15.823px] place-items-start relative"
+      data-name="Convert text to a circle figma plugin!1"
+      style={{
+        width:
+          "calc(1px * ((var(--transform-inner-height) * 0.07898440957069397) + (var(--transform-inner-width) * 0.9968758225440979)))",
+        height:
+          "calc(1px * ((var(--transform-inner-width) * 0.07898440957069397) + (var(--transform-inner-height) * 0.9968758225440979)))",
+      }}
+    >
+      <div className="[grid-area:1_/_1] flex h-[18.546px] items-center justify-center ml-0 mt-0 relative w-[12.373px]">
+        <div className="flex-none rotate-[193.391deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[16.65px] items-center justify-center ml-[9.114px] mt-[2.562px] relative w-[9.459px]">
+        <div className="flex-none rotate-[204.071deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[17.484px] items-center justify-center ml-[12.473px] mt-[4.466px] relative w-[14.565px]">
+        <div className="flex-none rotate-[214.106deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.017px] items-center justify-center ml-[16.114px] mt-[9.562px] relative w-[17.736px]">
+        <div className="flex-none rotate-[235.614deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[13.486px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[18.844px]">
+        <div className="flex-none rotate-[252.064deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[10.252px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.011px]">
+        <div className="flex-none rotate-[260.545deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[8.289px] items-center justify-center ml-[26.116px] mt-[37.563px] relative w-[17.532px]">
+        <div className="flex-none rotate-[275.019deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[13.11px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.668px]">
+        <div className="flex-none rotate-[289.299deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.053px] items-center justify-center ml-[21.115px] mt-[50.562px] relative w-[17.749px]">
+        <div className="flex-none rotate-[304.445deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IconoirSeaWaves() {
+  return (
+    <div
+      className="h-[2.098px] relative w-[3.227px]"
+      data-name="iconoir:sea-waves"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 4 3"
+      >
+        <g clipPath="url(#clip0_2048_120)" id="iconoir:sea-waves">
+          <path
+            d={svgPaths.p1347bee0}
+            id="Vector"
+            stroke="var(--stroke-0, #87E9FF)"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="0.231944"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2048_120">
+            <rect fill="white" height="2.09758" width="3.22705" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function NounCoconutTree77945312() {
+  return (
+    <div
+      className="h-[8.39px] relative w-[6.849px]"
+      data-name="noun-coconut-tree-7794531 2"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 7 9"
+      >
+        <g id="noun-coconut-tree-7794531 2">
+          <path d={svgPaths.p80f500} fill="var(--fill-0, black)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58657() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[19px] mt-[26px] place-items-start relative"
+      style={{
+        width:
+          "calc(1px * ((var(--transform-inner-height) * 0.44725897908210754) + (var(--transform-inner-width) * 0.8944044709205627)))",
+        height:
+          "calc(1px * ((var(--transform-inner-width) * 0.44725897908210754) + (var(--transform-inner-height) * 0.8944044709205627)))",
+      }}
+    >
+      <div className="[grid-area:1_/_1] flex h-[3.312px] items-center justify-center ml-[16.665px] mt-[5.095px] relative w-[3.815px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <IconoirSeaWaves />
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[30.203px] items-center justify-center ml-0 mt-0 relative w-[45.643px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="font-['Goodly:Medium',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[10.245px] text-left text-nowrap">
+            <p className="leading-[normal] whitespace-pre">
+              <span>{`C `}</span>
+              <span className="tracking-[-3.2px]"> </span>tyCards
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[10.552px] items-center justify-center ml-[5.994px] mt-[1.948px] relative w-[9.867px]">
+        <div className="flex-none rotate-[153.432deg] scale-y-[-100%]">
+          <NounCoconutTree77945312 />
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[4.822px] items-center justify-center ml-[29.217px] mt-[5.245px] relative w-[4.822px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="relative size-[3.596px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 4 4"
+            >
+              <circle
+                cx="1.79793"
+                cy="1.79793"
+                id="Ellipse 1"
+                r="1.49827"
+                stroke="var(--stroke-0, black)"
+                strokeWidth="0.59931"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[1.999px] items-center justify-center ml-[31.091px] mt-[8.839px] relative w-[2.802px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="h-[0.899px] relative w-[2.697px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 3 1"
+            >
+              <path
+                d={svgPaths.p3794ff00}
+                fill="var(--fill-0, black)"
+                id="Vector 10"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258263() {
+  return (
+    <div className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-0 place-items-start relative">
+      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[2.575px] mt-[0.563px] relative size-[83.58px]">
+        <div className="flex-none rotate-[358.074deg] size-[80.907px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.463%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 83 83"
+              >
+                <path
+                  d={svgPaths.p1a313240}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[15.782px] mt-[13.79px] relative size-[57.208px]">
+        <div className="flex-none rotate-[356.727deg] size-[54.202px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.692%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 56 56"
+              >
+                <path
+                  d={svgPaths.pefd30f0}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ConvertTextToACircleFigmaPlugin1 />
+      <ConvertTextToACircleFigmaPlugin2 />
+      <Group58657 />
+    </div>
+  );
+}
+
+function MaskGroup() {
+  return (
+    <div
+      className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0"
+      data-name="Mask group"
+    >
+      <Group1216258263 />
+      <div className="[grid-area:1_/_1] flex h-[313.017px] items-center justify-center ml-[-74px] mt-[-84px] relative w-[313.666px]">
+        <div className="flex-none rotate-[298.418deg]">
+          <div
+            className="bg-center bg-cover bg-no-repeat h-[231.987px] w-[230.381px]"
+            data-name="938886_ODHGGD0 1"
+            style={{ backgroundImage: `url('${img938886Odhggd01}')` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884915() {
+  return (
+    <div className="box-border content-stretch flex flex-col gap-5 items-end justify-start p-0 relative shrink-0">
+      <div className="flex h-[76.407px] items-center justify-center relative shrink-0 w-[66.796px]">
+        <div className="flex-none rotate-[339.573deg]">
+          <Group1216258262 />
+        </div>
+      </div>
+      <Group1216258508 />
+      <MaskGroup />
+    </div>
+  );
+}
+
+export default function Frame1000003903() {
+  return (
+    <div
+      className="bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] relative rounded-[9px] size-full"
+      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
+    >
+      <div className="relative size-full">
+        <div className="[flex-flow:wrap] box-border content-start flex gap-5 items-start justify-start p-[30px] relative size-full">
+          <div
+            className="bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[315px] rounded-[4.585px] shrink-0 w-[234px]"
+            data-name="7326e6090fb09c3ae7046baa345e8611 1"
+            style={{
+              backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
+            }}
+          />
+          <div className="flex h-[261px] items-center justify-center relative shrink-0 w-[0px]">
+            <div className="flex-none rotate-[90deg]">
+              <div className="h-0 relative w-[261px]">
+                <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+                  <svg
+                    className="block size-full"
+                    fill="none"
+                    preserveAspectRatio="none"
+                    viewBox="0 0 261 1"
+                  >
+                    <line
+                      id="Line 33"
+                      stroke="var(--stroke-0, #6E5D40)"
+                      strokeWidth="0.4"
+                      x2="261"
+                      y1="0.8"
+                      y2="0.8"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Frame1597884915 />
+        </div>
+      </div>
+      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1000003903-2049-150.tsx b/src/imports/Frame1000003903-2049-150.tsx
new file mode 100644
index 0000000..798f99c
--- /dev/null
+++ b/src/imports/Frame1000003903-2049-150.tsx
@@ -0,0 +1,115 @@
+import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
+import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";
+
+function Group1216258507() {
+  return (
+    <div className="absolute h-[81px] left-1 top-4 w-[216px]">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.494%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 216 82"
+        >
+          <g id="Group 1216258507">
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+            <line
+              id="Line 35"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="27.8"
+              y2="27.8"
+            />
+            <line
+              id="Line 36"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="54.8"
+              y2="54.8"
+            />
+            <line
+              id="Line 37"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="81.8"
+              y2="81.8"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258508() {
+  return (
+    <div className="absolute contents left-0 top-0">
+      <div className="[text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] absolute css-qhcors font-['Thesignature:Regular',_sans-serif] leading-[0] left-0 not-italic text-[#070707] text-[32.096px] text-left top-0 tracking-[0.321px] w-[223.192px]">
+        <p className="adjustLetterSpacing block leading-[0.82]">
+          Pick from iconic attraction images to frame your memory.
+        </p>
+      </div>
+      <Group1216258507 />
+    </div>
+  );
+}
+
+function Frame1597884915() {
+  return (
+    <div className="absolute h-[97px] left-[304px] top-1/2 translate-y-[-50%] w-[223.192px]">
+      <Group1216258508 />
+    </div>
+  );
+}
+
+export default function Frame1000003903() {
+  return (
+    <div
+      className="bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] relative rounded-[9px] size-full"
+      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
+    >
+      <div
+        className="absolute bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[315px] left-[30px] rounded-[4.585px] top-[30px] w-[234px]"
+        data-name="7326e6090fb09c3ae7046baa345e8611 1"
+        style={{
+          backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
+        }}
+      />
+      <div className="absolute flex h-[261px] items-center justify-center left-[284px] top-1/2 translate-y-[-50%] w-[0px]">
+        <div className="flex-none rotate-[90deg]">
+          <div className="h-0 relative w-[261px]">
+            <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 261 1"
+              >
+                <line
+                  id="Line 33"
+                  stroke="var(--stroke-0, #6E5D40)"
+                  strokeWidth="0.4"
+                  x2="261"
+                  y1="0.8"
+                  y2="0.8"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Frame1597884915 />
+      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1000003903-2051-25.tsx b/src/imports/Frame1000003903-2051-25.tsx
new file mode 100644
index 0000000..798f99c
--- /dev/null
+++ b/src/imports/Frame1000003903-2051-25.tsx
@@ -0,0 +1,115 @@
+import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
+import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";
+
+function Group1216258507() {
+  return (
+    <div className="absolute h-[81px] left-1 top-4 w-[216px]">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.494%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 216 82"
+        >
+          <g id="Group 1216258507">
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+            <line
+              id="Line 35"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="27.8"
+              y2="27.8"
+            />
+            <line
+              id="Line 36"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="54.8"
+              y2="54.8"
+            />
+            <line
+              id="Line 37"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="81.8"
+              y2="81.8"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258508() {
+  return (
+    <div className="absolute contents left-0 top-0">
+      <div className="[text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] absolute css-qhcors font-['Thesignature:Regular',_sans-serif] leading-[0] left-0 not-italic text-[#070707] text-[32.096px] text-left top-0 tracking-[0.321px] w-[223.192px]">
+        <p className="adjustLetterSpacing block leading-[0.82]">
+          Pick from iconic attraction images to frame your memory.
+        </p>
+      </div>
+      <Group1216258507 />
+    </div>
+  );
+}
+
+function Frame1597884915() {
+  return (
+    <div className="absolute h-[97px] left-[304px] top-1/2 translate-y-[-50%] w-[223.192px]">
+      <Group1216258508 />
+    </div>
+  );
+}
+
+export default function Frame1000003903() {
+  return (
+    <div
+      className="bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] relative rounded-[9px] size-full"
+      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
+    >
+      <div
+        className="absolute bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[315px] left-[30px] rounded-[4.585px] top-[30px] w-[234px]"
+        data-name="7326e6090fb09c3ae7046baa345e8611 1"
+        style={{
+          backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
+        }}
+      />
+      <div className="absolute flex h-[261px] items-center justify-center left-[284px] top-1/2 translate-y-[-50%] w-[0px]">
+        <div className="flex-none rotate-[90deg]">
+          <div className="h-0 relative w-[261px]">
+            <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 261 1"
+              >
+                <line
+                  id="Line 33"
+                  stroke="var(--stroke-0, #6E5D40)"
+                  strokeWidth="0.4"
+                  x2="261"
+                  y1="0.8"
+                  y2="0.8"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Frame1597884915 />
+      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1000003903.tsx b/src/imports/Frame1000003903.tsx
new file mode 100644
index 0000000..0493232
--- /dev/null
+++ b/src/imports/Frame1000003903.tsx
@@ -0,0 +1,505 @@
+import svgPaths from "./svg-haxfz4hsaa";
+import img938886Odhggd01 from "figma:asset/183ba346669a0a079762ab3f9535b7d1469ed4d9.png";
+import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
+import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";
+
+function Group1216258262() {
+  return (
+    <div className="h-[63.844px] relative w-[47.511px]">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 48 64"
+      >
+        <g id="Group 1216258262">
+          <path
+            d={svgPaths.p285ae700}
+            fill="var(--fill-0, #765840)"
+            id="Vector"
+          />
+          <path
+            d={svgPaths.p33bc9700}
+            fill="var(--fill-0, #F2E4CD)"
+            id="Vector_2"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group1216258507() {
+  return (
+    <div className="[grid-area:1_/_1] h-[81px] ml-1 mt-4 relative w-[216px]">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.494%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 216 82"
+        >
+          <g id="Group 1216258507">
+            <line
+              id="Line 34"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="0.8"
+              y2="0.8"
+            />
+            <line
+              id="Line 35"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="27.8"
+              y2="27.8"
+            />
+            <line
+              id="Line 36"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="54.8"
+              y2="54.8"
+            />
+            <line
+              id="Line 37"
+              stroke="var(--stroke-0, #6E5D40)"
+              strokeWidth="0.4"
+              x2="216"
+              y1="81.8"
+              y2="81.8"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258508() {
+  return (
+    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
+      <div className="[grid-area:1_/_1] [text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] css-qhcors font-['Thesignature:Regular',_sans-serif] ml-0 mt-0 not-italic relative text-[#070707] text-[32.096px] text-left tracking-[0.321px] w-[223.192px]">
+        <p className="adjustLetterSpacing block leading-[0.82]">
+          Pick from iconic attraction images to frame your memory.
+        </p>
+      </div>
+      <Group1216258507 />
+    </div>
+  );
+}
+
+function ConvertTextToACircleFigmaPlugin1() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[42.459px] mt-0 place-items-start relative"
+      data-name="Convert text to a circle figma plugin!1"
+    >
+      <div className="[grid-area:1_/_1] flex h-[18.133px] items-center justify-center ml-0 mt-0 relative w-[11.187px]">
+        <div className="flex-none rotate-[8.861deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[16.946px] items-center justify-center ml-[9.114px] mt-[2.563px] relative w-[8.292px]">
+        <div className="flex-none rotate-[19.54deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[17.785px] items-center justify-center ml-[12.473px] mt-[4.467px] relative w-[13.677px]">
+        <div className="flex-none rotate-[29.576deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.785px] items-center justify-center ml-[16.114px] mt-[9.563px] relative w-[17.35px]">
+        <div className="flex-none rotate-[51.084deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[14.51px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[19.024px]">
+        <div className="flex-none rotate-[67.534deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[11.447px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.324px]">
+        <div className="flex-none rotate-[76.015deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[6.973px] items-center justify-center ml-[26.115px] mt-[37.562px] relative w-[17.058px]">
+        <div className="flex-none rotate-[90.489deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[12.009px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.462px]">
+        <div className="flex-none rotate-[104.769deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[14.193px] items-center justify-center ml-[21.114px] mt-[50.563px] relative w-[18.023px]">
+        <div className="flex-none rotate-[119.915deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConvertTextToACircleFigmaPlugin2() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-[15.823px] place-items-start relative"
+      data-name="Convert text to a circle figma plugin!1"
+      style={{
+        width:
+          "calc(1px * ((var(--transform-inner-height) * 0.07898440957069397) + (var(--transform-inner-width) * 0.9968758225440979)))",
+        height:
+          "calc(1px * ((var(--transform-inner-width) * 0.07898440957069397) + (var(--transform-inner-height) * 0.9968758225440979)))",
+      }}
+    >
+      <div className="[grid-area:1_/_1] flex h-[18.546px] items-center justify-center ml-0 mt-0 relative w-[12.373px]">
+        <div className="flex-none rotate-[193.391deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[16.65px] items-center justify-center ml-[9.114px] mt-[2.562px] relative w-[9.459px]">
+        <div className="flex-none rotate-[204.071deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">i</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[17.484px] items-center justify-center ml-[12.473px] mt-[4.466px] relative w-[14.565px]">
+        <div className="flex-none rotate-[214.106deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">t</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.017px] items-center justify-center ml-[16.114px] mt-[9.562px] relative w-[17.736px]">
+        <div className="flex-none rotate-[235.614deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">y</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[13.486px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[18.844px]">
+        <div className="flex-none rotate-[252.064deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">C</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[10.252px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.011px]">
+        <div className="flex-none rotate-[260.545deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">a</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[8.289px] items-center justify-center ml-[26.116px] mt-[37.563px] relative w-[17.532px]">
+        <div className="flex-none rotate-[275.019deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">r</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[13.11px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.668px]">
+        <div className="flex-none rotate-[289.299deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">d</p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[15.053px] items-center justify-center ml-[21.115px] mt-[50.562px] relative w-[17.749px]">
+        <div className="flex-none rotate-[304.445deg]">
+          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
+            <p className="block leading-[normal] whitespace-pre">s</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IconoirSeaWaves() {
+  return (
+    <div
+      className="h-[2.098px] relative w-[3.227px]"
+      data-name="iconoir:sea-waves"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 4 3"
+      >
+        <g clipPath="url(#clip0_2048_120)" id="iconoir:sea-waves">
+          <path
+            d={svgPaths.p1347bee0}
+            id="Vector"
+            stroke="var(--stroke-0, #87E9FF)"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="0.231944"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2048_120">
+            <rect fill="white" height="2.09758" width="3.22705" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function NounCoconutTree77945312() {
+  return (
+    <div
+      className="h-[8.39px] relative w-[6.849px]"
+      data-name="noun-coconut-tree-7794531 2"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 7 9"
+      >
+        <g id="noun-coconut-tree-7794531 2">
+          <path d={svgPaths.p80f500} fill="var(--fill-0, black)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58657() {
+  return (
+    <div
+      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[19px] mt-[26px] place-items-start relative"
+      style={{
+        width:
+          "calc(1px * ((var(--transform-inner-height) * 0.44725897908210754) + (var(--transform-inner-width) * 0.8944044709205627)))",
+        height:
+          "calc(1px * ((var(--transform-inner-width) * 0.44725897908210754) + (var(--transform-inner-height) * 0.8944044709205627)))",
+      }}
+    >
+      <div className="[grid-area:1_/_1] flex h-[3.312px] items-center justify-center ml-[16.665px] mt-[5.095px] relative w-[3.815px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <IconoirSeaWaves />
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[30.203px] items-center justify-center ml-0 mt-0 relative w-[45.643px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="font-['Goodly:Medium',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[10.245px] text-left text-nowrap">
+            <p className="leading-[normal] whitespace-pre">
+              <span>{`C `}</span>
+              <span className="tracking-[-3.2px]"> </span>tyCards
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[10.552px] items-center justify-center ml-[5.994px] mt-[1.948px] relative w-[9.867px]">
+        <div className="flex-none rotate-[153.432deg] scale-y-[-100%]">
+          <NounCoconutTree77945312 />
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[4.822px] items-center justify-center ml-[29.217px] mt-[5.245px] relative w-[4.822px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="relative size-[3.596px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 4 4"
+            >
+              <circle
+                cx="1.79793"
+                cy="1.79793"
+                id="Ellipse 1"
+                r="1.49827"
+                stroke="var(--stroke-0, black)"
+                strokeWidth="0.59931"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[1.999px] items-center justify-center ml-[31.091px] mt-[8.839px] relative w-[2.802px]">
+        <div className="flex-none rotate-[333.432deg]">
+          <div className="h-[0.899px] relative w-[2.697px]">
+            <svg
+              className="block size-full"
+              fill="none"
+              preserveAspectRatio="none"
+              viewBox="0 0 3 1"
+            >
+              <path
+                d={svgPaths.p3794ff00}
+                fill="var(--fill-0, black)"
+                id="Vector 10"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Group1216258263() {
+  return (
+    <div className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-0 place-items-start relative">
+      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[2.575px] mt-[0.563px] relative size-[83.58px]">
+        <div className="flex-none rotate-[358.074deg] size-[80.907px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.463%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 83 83"
+              >
+                <path
+                  d={svgPaths.p1a313240}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[15.782px] mt-[13.79px] relative size-[57.208px]">
+        <div className="flex-none rotate-[356.727deg] size-[54.202px]">
+          <div className="relative size-full" data-name="Vector">
+            <div className="absolute inset-[-0.692%]">
+              <svg
+                className="block size-full"
+                fill="none"
+                preserveAspectRatio="none"
+                viewBox="0 0 56 56"
+              >
+                <path
+                  d={svgPaths.pefd30f0}
+                  id="Vector"
+                  stroke="var(--stroke-0, #765840)"
+                  strokeMiterlimit="10"
+                  strokeWidth="0.75"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ConvertTextToACircleFigmaPlugin1 />
+      <ConvertTextToACircleFigmaPlugin2 />
+      <Group58657 />
+    </div>
+  );
+}
+
+function MaskGroup() {
+  return (
+    <div
+      className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0"
+      data-name="Mask group"
+    >
+      <Group1216258263 />
+      <div className="[grid-area:1_/_1] flex h-[313.017px] items-center justify-center ml-[-74px] mt-[-84px] relative w-[313.666px]">
+        <div className="flex-none rotate-[298.418deg]">
+          <div
+            className="bg-center bg-cover bg-no-repeat h-[231.987px] w-[230.381px]"
+            data-name="938886_ODHGGD0 1"
+            style={{ backgroundImage: `url('${img938886Odhggd01}')` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884915() {
+  return (
+    <div className="box-border content-stretch flex flex-col gap-5 items-end justify-start p-0 relative shrink-0">
+      <div className="flex h-[76.407px] items-center justify-center relative shrink-0 w-[66.796px]">
+        <div className="flex-none rotate-[339.573deg]">
+          <Group1216258262 />
+        </div>
+      </div>
+      <Group1216258508 />
+      <MaskGroup />
+    </div>
+  );
+}
+
+export default function Frame1000003903() {
+  return (
+    <div
+      className="bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] relative rounded-[9px] size-full"
+      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
+    >
+      <div className="relative size-full">
+        <div className="[flex-flow:wrap] box-border content-start flex gap-5 items-start justify-start p-[30px] relative size-full">
+          <div
+            className="bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[315px] rounded-[4.585px] shrink-0 w-[234px]"
+            data-name="7326e6090fb09c3ae7046baa345e8611 1"
+            style={{
+              backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
+            }}
+          />
+          <div className="flex h-[261px] items-center justify-center relative shrink-0 w-[0px]">
+            <div className="flex-none rotate-[90deg]">
+              <div className="h-0 relative w-[261px]">
+                <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
+                  <svg
+                    className="block size-full"
+                    fill="none"
+                    preserveAspectRatio="none"
+                    viewBox="0 0 261 1"
+                  >
+                    <line
+                      id="Line 33"
+                      stroke="var(--stroke-0, #6E5D40)"
+                      strokeWidth="0.4"
+                      x2="261"
+                      y1="0.8"
+                      y2="0.8"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Frame1597884915 />
+        </div>
+      </div>
+      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884853.tsx b/src/imports/Frame1597884853.tsx
new file mode 100644
index 0000000..2343db8
--- /dev/null
+++ b/src/imports/Frame1597884853.tsx
@@ -0,0 +1,298 @@
+import svgPaths from "./svg-7b6pdtz4h8";
+
+function IconoirSeaWaves() {
+  return (
+    <div
+      className="absolute h-[6.871px] left-[72.59px] top-[20.69px] w-[10.571px]"
+      data-name="iconoir:sea-waves"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 11 7"
+      >
+        <g clipPath="url(#clip0_5035_107)" id="iconoir:sea-waves">
+          <path
+            d={svgPaths.p2e6ec460}
+            id="Vector"
+            stroke="var(--stroke-0, #87E9FF)"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="0.759792"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_5035_107">
+            <rect fill="white" height="6.87117" width="10.571" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function NounCoconutTree77945312() {
+  return (
+    <div
+      className="h-[27.485px] relative w-[22.436px]"
+      data-name="noun-coconut-tree-7794531 2"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 23 28"
+      >
+        <g id="noun-coconut-tree-7794531 2">
+          <path
+            d={svgPaths.pd3b5ac0}
+            fill="var(--fill-0, #3B8782)"
+            id="Vector"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58656() {
+  return (
+    <div className="absolute contents left-[18px] top-1">
+      <IconoirSeaWaves />
+      <div className="absolute font-['Goodly:Medium',_sans-serif] leading-[0] left-[18px] not-italic text-[#3b8782] text-[33.559px] text-left text-nowrap top-1">
+        <p className="leading-[normal] whitespace-pre">
+          <span>{`C `}</span>
+          <span className="tracking-[-3.2px]"> </span>tyCards
+        </p>
+      </div>
+      <div className="absolute flex h-[27.485px] items-center justify-center left-[37.63px] top-[10.38px] w-[22.436px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <NounCoconutTree77945312 />
+        </div>
+      </div>
+      <div className="absolute left-[113.71px] size-[11.779px] top-[21.18px]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 12 12"
+        >
+          <circle
+            cx="5.88957"
+            cy="5.88957"
+            id="Ellipse 1"
+            r="4.90798"
+            stroke="var(--stroke-0, #3B8782)"
+            strokeWidth="1.96319"
+          />
+        </svg>
+      </div>
+      <div className="absolute h-[2.945px] left-[119.84px] top-[32.96px] w-[8.834px]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 9 3"
+        >
+          <path
+            d={svgPaths.pa2b3d80}
+            fill="var(--fill-0, #3B8782)"
+            id="Vector 10"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884922() {
+  return (
+    <div className="bg-[#ffffff] h-12 relative rounded-[100px] shrink-0 w-[196px]">
+      <Group58656 />
+    </div>
+  );
+}
+
+function Group1000001931() {
+  return (
+    <div className="capitalize font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0 text-[#1e1e1e] text-[14px] text-left text-nowrap">
+      <div className="[grid-area:1_/_1] ml-0 mt-0 relative">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          About Us
+        </p>
+      </div>
+      <div className="[grid-area:1_/_1] ml-[94px] mt-0 relative">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          Our Products
+        </p>
+      </div>
+      <div className="[grid-area:1_/_1] ml-[285px] mt-0 relative">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          Your Card
+        </p>
+      </div>
+      <div className="[grid-area:1_/_1] ml-[216px] mt-0 relative">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">Offer</p>
+      </div>
+    </div>
+  );
+}
+
+function WeuiArrowOutlined() {
+  return (
+    <div className="h-2.5 relative w-[6.667px]" data-name="weui:arrow-outlined">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 7 10"
+      >
+        <g id="weui:arrow-outlined">
+          <path
+            d={svgPaths.p2d96d520}
+            fill="var(--fill-0, #1E1E1E)"
+            id="Vector"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group1000002493() {
+  return (
+    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
+      <div className="[grid-area:1_/_1] font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium ml-0 mt-0 relative text-[#1e1e1e] text-[14px] text-left text-nowrap uppercase">
+        <p className="block leading-[1.2] whitespace-pre">eng</p>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[6.656px] items-center justify-center ml-[35px] mt-[5px] relative w-[10px]">
+        <div className="flex-none rotate-[90deg]">
+          <WeuiArrowOutlined />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UilCart() {
+  return (
+    <div className="relative shrink-0 size-6" data-name="uil:cart">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 24 24"
+      >
+        <g id="uil:cart">
+          <path
+            d={svgPaths.p268fe000}
+            fill="var(--fill-0, #1E1E1E)"
+            id="Vector"
+            stroke="var(--stroke-0, white)"
+            strokeWidth="0.545455"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function WeuiArrowOutlined1() {
+  return (
+    <div
+      className="absolute h-[13px] translate-x-[-50%] translate-y-[-50%] w-[7.8px]"
+      data-name="weui:arrow-outlined"
+      style={{ top: "calc(50% + 0.5px)", left: "calc(50% + 0.9px)" }}
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 8 13"
+      >
+        <g clipPath="url(#clip0_5035_86)" id="weui:arrow-outlined">
+          <path
+            d={svgPaths.p1a0ff300}
+            fill="var(--fill-0, white)"
+            id="Vector"
+          />
+          <path
+            d={svgPaths.p5f6c800}
+            fill="var(--fill-0, white)"
+            id="Vector_2"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_5035_86">
+            <rect fill="white" height="13" width="7.8" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function Frame1597884878() {
+  return (
+    <div className="absolute bg-[#4aa9a3] left-[139px] overflow-clip rounded-[100px] size-[30px] top-2">
+      <WeuiArrowOutlined1 />
+    </div>
+  );
+}
+
+function Frame1597884879() {
+  return (
+    <div className="absolute font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium h-[17px] leading-[0] left-4 overflow-clip text-[#2c6562] text-[14px] text-left text-nowrap top-[14.5px] uppercase w-[115px]">
+      <div className="absolute left-0 top-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          get a city card
+        </p>
+      </div>
+      <div className="absolute left-0 top-4">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          get a city card
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884880() {
+  return (
+    <div className="h-[46px] relative rounded-[100px] shrink-0 w-[177px]">
+      <div className="h-[46px] overflow-clip relative w-[177px]">
+        <Frame1597884878 />
+        <Frame1597884879 />
+      </div>
+      <div
+        aria-hidden="true"
+        className="absolute border border-[#4aa9a3] border-solid inset-0 pointer-events-none rounded-[100px]"
+      />
+    </div>
+  );
+}
+
+function Frame1597884921() {
+  return (
+    <div className="box-border content-stretch flex flex-row gap-5 items-center justify-start p-0 relative shrink-0">
+      <Group1000002493 />
+      <UilCart />
+      <Frame1597884880 />
+    </div>
+  );
+}
+
+export default function Frame1597884853() {
+  return (
+    <div className="backdrop-blur-[5px] backdrop-filter bg-[rgba(250,250,250,0.8)] relative rounded-[100px] shadow-[0px_4px_20px_0px_rgba(59,135,130,0.15)] size-full">
+      <div className="flex flex-row items-center justify-center relative size-full">
+        <div className="[flex-flow:wrap] box-border content-center flex gap-20 items-center justify-center overflow-clip p-[8px] relative size-full">
+          <Frame1597884922 />
+          <Group1000001931 />
+          <Frame1597884921 />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884873.tsx b/src/imports/Frame1597884873.tsx
new file mode 100644
index 0000000..671b5f6
--- /dev/null
+++ b/src/imports/Frame1597884873.tsx
@@ -0,0 +1,298 @@
+import svgPaths from "./svg-k72gxajo7j";
+
+function IconoirSeaWaves() {
+  return (
+    <div
+      className="absolute h-[6.871px] left-[72.59px] top-[20.69px] w-[10.571px]"
+      data-name="iconoir:sea-waves"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 11 7"
+      >
+        <g clipPath="url(#clip0_5035_107)" id="iconoir:sea-waves">
+          <path
+            d={svgPaths.p2e6ec460}
+            id="Vector"
+            stroke="var(--stroke-0, #87E9FF)"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="0.759792"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_5035_107">
+            <rect fill="white" height="6.87117" width="10.571" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function NounCoconutTree77945312() {
+  return (
+    <div
+      className="h-[27.485px] relative w-[22.436px]"
+      data-name="noun-coconut-tree-7794531 2"
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 23 28"
+      >
+        <g id="noun-coconut-tree-7794531 2">
+          <path
+            d={svgPaths.pd3b5ac0}
+            fill="var(--fill-0, #3B8782)"
+            id="Vector"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58656() {
+  return (
+    <div className="absolute contents left-[18px] top-1">
+      <IconoirSeaWaves />
+      <div className="absolute font-['Goodly:Medium',_sans-serif] leading-[0] left-[18px] not-italic text-[#3b8782] text-[33.559px] text-left text-nowrap top-1">
+        <p className="leading-[normal] whitespace-pre">
+          <span>{`C `}</span>
+          <span className="tracking-[-3.2px]"> </span>tyCards
+        </p>
+      </div>
+      <div className="absolute flex h-[27.485px] items-center justify-center left-[37.63px] top-[10.38px] w-[22.436px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <NounCoconutTree77945312 />
+        </div>
+      </div>
+      <div className="absolute left-[113.71px] size-[11.779px] top-[21.18px]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 12 12"
+        >
+          <circle
+            cx="5.88957"
+            cy="5.88957"
+            id="Ellipse 1"
+            r="4.90798"
+            stroke="var(--stroke-0, #3B8782)"
+            strokeWidth="1.96319"
+          />
+        </svg>
+      </div>
+      <div className="absolute h-[2.945px] left-[119.84px] top-[32.96px] w-[8.834px]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 9 3"
+        >
+          <path
+            d={svgPaths.pa2b3d80}
+            fill="var(--fill-0, #3B8782)"
+            id="Vector 10"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884922() {
+  return (
+    <div className="bg-[#ffffff] h-12 relative rounded-[100px] shrink-0 w-[196px]">
+      <Group58656 />
+    </div>
+  );
+}
+
+function Frame1597884923() {
+  return (
+    <div className="box-border capitalize content-stretch flex flex-row font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium gap-[51px] items-center justify-start leading-[0] p-0 relative shrink-0 text-[#1e1e1e] text-[14px] text-left text-nowrap">
+      <div className="relative shrink-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          About Us
+        </p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          Our Products
+        </p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          Your Card
+        </p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">Offer</p>
+      </div>
+    </div>
+  );
+}
+
+function WeuiArrowOutlined() {
+  return (
+    <div className="h-2.5 relative w-[6.667px]" data-name="weui:arrow-outlined">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 7 10"
+      >
+        <g id="weui:arrow-outlined">
+          <path
+            d={svgPaths.p2d96d520}
+            fill="var(--fill-0, #1E1E1E)"
+            id="Vector"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group1000002493() {
+  return (
+    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
+      <div className="[grid-area:1_/_1] font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium ml-0 mt-0 relative text-[#1e1e1e] text-[14px] text-left text-nowrap uppercase">
+        <p className="block leading-[1.2] whitespace-pre">eng</p>
+      </div>
+      <div className="[grid-area:1_/_1] flex h-[6.656px] items-center justify-center ml-[35px] mt-[5px] relative w-[10px]">
+        <div className="flex-none rotate-[90deg]">
+          <WeuiArrowOutlined />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UilCart() {
+  return (
+    <div className="relative shrink-0 size-6" data-name="uil:cart">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 24 24"
+      >
+        <g id="uil:cart">
+          <path
+            d={svgPaths.p268fe000}
+            fill="var(--fill-0, #1E1E1E)"
+            id="Vector"
+            stroke="var(--stroke-0, white)"
+            strokeWidth="0.545455"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function WeuiArrowOutlined1() {
+  return (
+    <div
+      className="absolute h-[13px] translate-x-[-50%] translate-y-[-50%] w-[7.8px]"
+      data-name="weui:arrow-outlined"
+      style={{ top: "calc(50% + 0.5px)", left: "calc(50% + 0.9px)" }}
+    >
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 8 13"
+      >
+        <g clipPath="url(#clip0_5035_86)" id="weui:arrow-outlined">
+          <path
+            d={svgPaths.p1a0ff300}
+            fill="var(--fill-0, white)"
+            id="Vector"
+          />
+          <path
+            d={svgPaths.p5f6c800}
+            fill="var(--fill-0, white)"
+            id="Vector_2"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_5035_86">
+            <rect fill="white" height="13" width="7.8" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function Frame1597884878() {
+  return (
+    <div className="absolute bg-[#4aa9a3] left-[139px] overflow-clip rounded-[100px] size-[30px] top-2">
+      <WeuiArrowOutlined1 />
+    </div>
+  );
+}
+
+function Frame1597884879() {
+  return (
+    <div className="absolute font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium h-[17px] leading-[0] left-4 overflow-clip text-[#2c6562] text-[14px] text-left text-nowrap top-[14.5px] uppercase w-[115px]">
+      <div className="absolute left-0 top-0">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          get a city card
+        </p>
+      </div>
+      <div className="absolute left-0 top-4">
+        <p className="block leading-[1.2] text-nowrap whitespace-pre">
+          get a city card
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884880() {
+  return (
+    <div className="h-[46px] relative rounded-[100px] shrink-0 w-[177px]">
+      <div className="h-[46px] overflow-clip relative w-[177px]">
+        <Frame1597884878 />
+        <Frame1597884879 />
+      </div>
+      <div
+        aria-hidden="true"
+        className="absolute border border-[#4aa9a3] border-solid inset-0 pointer-events-none rounded-[100px]"
+      />
+    </div>
+  );
+}
+
+function Frame1597884921() {
+  return (
+    <div className="box-border content-stretch flex flex-row gap-5 items-center justify-start p-0 relative shrink-0">
+      <Group1000002493 />
+      <UilCart />
+      <Frame1597884880 />
+    </div>
+  );
+}
+
+export default function Frame1597884873() {
+  return (
+    <div className="backdrop-blur-[5px] backdrop-filter bg-[rgba(250,250,250,0.8)] relative rounded-[100px] shadow-[0px_4px_20px_0px_rgba(59,135,130,0.15)] size-full">
+      <div className="flex flex-row items-center relative size-full">
+        <div className="[flex-flow:wrap] box-border content-between flex items-center justify-between overflow-clip p-[8px] relative size-full">
+          <Frame1597884922 />
+          <Frame1597884923 />
+          <Frame1597884921 />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884936-5110-276.tsx b/src/imports/Frame1597884936-5110-276.tsx
new file mode 100644
index 0000000..ef951b7
--- /dev/null
+++ b/src/imports/Frame1597884936-5110-276.tsx
@@ -0,0 +1,153 @@
+import svgPaths from "./svg-8a8pqw9e9t";
+
+function Group() {
+  return (
+    <div
+      className="absolute inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <div className="absolute inset-[-0.24%_-0.19%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 405 315"
+        >
+          <g id="Group">
+            <foreignObject
+              height="330.153"
+              width="420.715"
+              x="-7.75008"
+              y="-7.75031"
+            >
+              <div
+                style={{
+                  backdropFilter: "blur(4px)",
+                  clipPath: "url(#bgblur_0_5102_103_clip_path)",
+                  height: "100%",
+                  width: "100%",
+                }}
+                xmlns="http://www.w3.org/1999/xhtml"
+              />
+            </foreignObject>
+            <path
+              d={svgPaths.p39dfe300}
+              data-figma-bg-blur-radius="8"
+              fill="var(--fill-0, white)"
+              fillOpacity="0.2"
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M157.654 45.0464V225.73"
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p28e1e680}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p3aafe380}
+              id="Vector_4"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.pcf0600}
+              id="Vector_5"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p2c99d260}
+              id="Vector_6"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+          </g>
+          <defs>
+            <clipPath
+              id="bgblur_0_5102_103_clip_path"
+              transform="translate(7.75008 7.75031)"
+            >
+              <path d={svgPaths.p39dfe300} />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group />
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group1 />
+    </div>
+  );
+}
+
+function Group3() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group2 />
+    </div>
+  );
+}
+
+function Objects() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="OBJECTS"
+    >
+      <Group3 />
+    </div>
+  );
+}
+
+export default function Frame1597884936() {
+  return (
+    <div className="relative size-full">
+      <Objects />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884936-5110-331.tsx b/src/imports/Frame1597884936-5110-331.tsx
new file mode 100644
index 0000000..81e3356
--- /dev/null
+++ b/src/imports/Frame1597884936-5110-331.tsx
@@ -0,0 +1,153 @@
+import svgPaths from "./svg-1i81mccly7";
+
+function Group() {
+  return (
+    <div
+      className="absolute inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <div className="absolute inset-[-0.24%_-0.19%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 405 315"
+        >
+          <g id="Group">
+            <foreignObject
+              height="354.153"
+              width="444.715"
+              x="-19.7501"
+              y="-19.7503"
+            >
+              <div
+                style={{
+                  backdropFilter: "blur(10px)",
+                  clipPath: "url(#bgblur_0_5110_335_clip_path)",
+                  height: "100%",
+                  width: "100%",
+                }}
+                xmlns="http://www.w3.org/1999/xhtml"
+              />
+            </foreignObject>
+            <path
+              d={svgPaths.p39dfe300}
+              data-figma-bg-blur-radius="20"
+              fill="var(--fill-0, white)"
+              fillOpacity="0.26"
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M157.654 45.0464V225.73"
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p28e1e680}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p3aafe380}
+              id="Vector_4"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.pcf0600}
+              id="Vector_5"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p2c99d260}
+              id="Vector_6"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+          </g>
+          <defs>
+            <clipPath
+              id="bgblur_0_5110_335_clip_path"
+              transform="translate(19.7501 19.7503)"
+            >
+              <path d={svgPaths.p39dfe300} />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group />
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group1 />
+    </div>
+  );
+}
+
+function Group3() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group2 />
+    </div>
+  );
+}
+
+function Objects() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="OBJECTS"
+    >
+      <Group3 />
+    </div>
+  );
+}
+
+export default function Frame1597884936() {
+  return (
+    <div className="relative size-full">
+      <Objects />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884936.tsx b/src/imports/Frame1597884936.tsx
new file mode 100644
index 0000000..a3516db
--- /dev/null
+++ b/src/imports/Frame1597884936.tsx
@@ -0,0 +1,447 @@
+import svgPaths from "./svg-lkr1u58vid";
+
+function Group() {
+  return (
+    <div
+      className="absolute inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <div className="absolute inset-[-0.24%_-0.19%]">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 405 315"
+        >
+          <g id="Group">
+            <foreignObject
+              height="330.153"
+              width="420.715"
+              x="-7.75008"
+              y="-7.75031"
+            >
+              <div
+                style={{
+                  backdropFilter: "blur(4px)",
+                  clipPath: "url(#bgblur_0_5102_103_clip_path)",
+                  height: "100%",
+                  width: "100%",
+                }}
+                xmlns="http://www.w3.org/1999/xhtml"
+              />
+            </foreignObject>
+            <path
+              d={svgPaths.p39dfe300}
+              data-figma-bg-blur-radius="8"
+              fill="var(--fill-0, white)"
+              fillOpacity="0.2"
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M157.654 45.0464V225.73"
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p28e1e680}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p3aafe380}
+              id="Vector_4"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.pcf0600}
+              id="Vector_5"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+            <path
+              d={svgPaths.p2c99d260}
+              id="Vector_6"
+              stroke="var(--stroke-0, white)"
+              strokeDasharray="1.17 1.17"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+            />
+          </g>
+          <defs>
+            <clipPath
+              id="bgblur_0_5102_103_clip_path"
+              transform="translate(7.75008 7.75031)"
+            >
+              <path d={svgPaths.p39dfe300} />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group1() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group />
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div
+      className="absolute inset-[44.64%_75.27%_44.62%_17.72%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.26%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 30 36"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.pe3d3f00}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.55"
+            />
+            <path
+              d={svgPaths.p233d5780}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.55"
+            />
+            <path
+              d={svgPaths.p3bded280}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.55"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group3() {
+  return (
+    <div
+      className="absolute inset-[23.15%_46.85%_66.14%_46.21%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.2%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 30 35"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.p1d740f00}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p5b98f00}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p2721ce40}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group4() {
+  return (
+    <div
+      className="absolute inset-[55.88%_40.36%_32.55%_51.39%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.03%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 35 38"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.p101cc600}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p2652ee80}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p3b0a6800}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group5() {
+  return (
+    <div
+      className="absolute inset-[32.95%_19.57%_55.49%_72.17%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.03%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 35 38"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.p309f35c0}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p248aac00}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p12274f80}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group6() {
+  return (
+    <div
+      className="absolute inset-[66.8%_15.49%_22.43%_77.49%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.18%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 30 36"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.p19123700}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p3bb5a800}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p1d788c80}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group7() {
+  return (
+    <div
+      className="absolute inset-[83.19%_23.47%_5.24%_68.28%]"
+      data-name="Group"
+    >
+      <div className="absolute bottom-[-2.03%] left-0 right-0 top-0">
+        <svg
+          className="block size-full"
+          fill="none"
+          preserveAspectRatio="none"
+          viewBox="0 0 35 38"
+        >
+          <g id="Group">
+            <path
+              d={svgPaths.p173a1880}
+              id="Vector"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p1588bc00}
+              id="Vector_2"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+            <path
+              d={svgPaths.p2c6e5280}
+              id="Vector_3"
+              stroke="var(--stroke-0, white)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeMiterlimit="10"
+              strokeWidth="1.5"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Group8() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group1 />
+      <Group2 />
+      <Group3 />
+      <Group4 />
+      <Group5 />
+      <Group6 />
+      <Group7 />
+    </div>
+  );
+}
+
+function Group9() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="Group"
+    >
+      <Group8 />
+    </div>
+  );
+}
+
+function Objects() {
+  return (
+    <div
+      className="absolute contents inset-[-0.06%_2.32%_2.05%_1.68%]"
+      data-name="OBJECTS"
+    >
+      <Group9 />
+    </div>
+  );
+}
+
+export default function Frame1597884936() {
+  return (
+    <div className="relative size-full">
+      <Objects />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Frame1597884945.tsx b/src/imports/Frame1597884945.tsx
new file mode 100644
index 0000000..038ecba
--- /dev/null
+++ b/src/imports/Frame1597884945.tsx
@@ -0,0 +1,125 @@
+import imgFrame1597884939 from "figma:asset/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png";
+
+function Frame1597884937() {
+  return (
+    <div className="basis-0 bg-[#000000] grow min-h-px min-w-px relative shrink-0">
+      <div className="flex flex-row items-center justify-center relative size-full">
+        <div className="box-border content-stretch flex flex-row gap-2 items-center justify-center p-[8px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#ffffff] text-[16px] text-left text-nowrap">
+            <p className="block leading-[normal] whitespace-pre">
+              Android button
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884938() {
+  return (
+    <div className="basis-0 bg-[#000000] grow min-h-px min-w-px relative shrink-0">
+      <div className="flex flex-row items-center justify-center relative size-full">
+        <div className="box-border content-stretch flex flex-row gap-2 items-center justify-center p-[8px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#ffffff] text-[16px] text-left text-nowrap">
+            <p className="block leading-[normal] whitespace-pre">IOS button</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1597884942() {
+  return (
+    <div className="box-border content-stretch flex flex-row gap-[22px] items-center justify-start p-0 relative shrink-0 w-full">
+      <Frame1597884937 />
+      <Frame1597884938 />
+    </div>
+  );
+}
+
+function Frame1597884943() {
+  return (
+    <div className="box-border content-stretch flex flex-col gap-[31px] items-start justify-start p-0 relative shrink-0 w-[346px]">
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#ffffff] text-[16px] text-left w-full">
+        <p className="block leading-[normal]">
+          Download our mobile app and unlock instant access to premium city
+          experiences across Australia.
+        </p>
+      </div>
+      <Frame1597884942 />
+    </div>
+  );
+}
+
+function Frame1597884944() {
+  return (
+    <div className="box-border content-stretch flex flex-row items-start justify-between p-0 relative shrink-0 w-full">
+      <div className="basis-0 font-['Inter:Regular',_sans-serif] font-normal grow leading-[normal] min-h-px min-w-px not-italic relative shrink-0 text-[#ffffff] text-[44px] text-left">
+        <p className="block mb-0">Experience seamless</p>
+        <p className="block">city exploration</p>
+      </div>
+      <Frame1597884943 />
+    </div>
+  );
+}
+
+function Frame1597884941() {
+  return (
+    <div className="absolute bg-[#ffffff] h-[314px] left-[481px] rounded-[20px] top-[-68px] w-[164px]">
+      <div className="h-[314px] overflow-clip relative w-[164px]">
+        <div
+          className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[#000000] text-[16px] text-left text-nowrap top-[149px]"
+          style={{ left: "calc(50% - 31px)" }}
+        >
+          <p className="block leading-[normal] whitespace-pre">Mockup</p>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        className="absolute border-2 border-[#000000] border-solid inset-0 pointer-events-none rounded-[20px]"
+      />
+    </div>
+  );
+}
+
+function Frame1597884940() {
+  return (
+    <div className="absolute bg-[#ffffff] h-[314px] left-[357px] rounded-[20px] top-[78px] w-[164px]">
+      <div className="h-[314px] overflow-clip relative w-[164px]">
+        <div
+          className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[#000000] text-[16px] text-left text-nowrap top-[149px]"
+          style={{ left: "calc(50% - 31px)" }}
+        >
+          <p className="block leading-[normal] whitespace-pre">Mockup</p>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        className="absolute border-2 border-[#000000] border-solid inset-0 pointer-events-none rounded-[20px]"
+      />
+    </div>
+  );
+}
+
+function Frame1597884939() {
+  return (
+    <div
+      className="bg-[#ffffff] bg-[position:50%_50%,_0%_0%] bg-size-[cover,auto] h-[328px] overflow-clip relative rounded-[20px] shrink-0 w-full"
+      style={{ backgroundImage: `url('${imgFrame1597884939}')` }}
+    >
+      <Frame1597884941 />
+      <Frame1597884940 />
+    </div>
+  );
+}
+
+export default function Frame1597884945() {
+  return (
+    <div className="box-border content-stretch flex flex-col gap-[62px] items-start justify-start p-0 relative size-full">
+      <Frame1597884944 />
+      <Frame1597884939 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Image592Traced-5025-559.tsx b/src/imports/Image592Traced-5025-559.tsx
new file mode 100644
index 0000000..4670d93
--- /dev/null
+++ b/src/imports/Image592Traced-5025-559.tsx
@@ -0,0 +1,402 @@
+import svgPaths from "./svg-zb9y9b0hmn";
+
+export default function Image592Traced() {
+  return (
+    <div className="relative size-full" data-name="image 592 (traced)">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 1079 517"
+      >
+        <g clipPath="url(#clip0_5025_563)" id="image 592 (traced)">
+          <path
+            d={svgPaths.p3c3d9a00}
+            fill="url(#paint0_linear_5025_563)"
+            fillOpacity="0.2"
+            id="Ellipse 2626"
+          />
+          <g id="Gray">
+            <path
+              d={svgPaths.p3cb03700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector"
+            />
+            <path
+              d={svgPaths.p1cd08500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_2"
+            />
+            <path
+              d={svgPaths.p3d523500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_3"
+            />
+            <path
+              d={svgPaths.p2a04f000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_4"
+            />
+            <path
+              d={svgPaths.p9306800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_5"
+            />
+            <path
+              d={svgPaths.p3e02a100}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_6"
+            />
+            <path
+              d={svgPaths.p12642100}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_7"
+            />
+            <path
+              d={svgPaths.p879600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_8"
+            />
+            <path
+              d={svgPaths.p2e7355f0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_9"
+            />
+            <path
+              d={svgPaths.p32aed480}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_10"
+            />
+            <path
+              d={svgPaths.p39749580}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_11"
+            />
+            <path
+              d={svgPaths.p34e60000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_12"
+            />
+            <path
+              d={svgPaths.pe648700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_13"
+            />
+            <path
+              d={svgPaths.pfec7180}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_14"
+            />
+            <path
+              d={svgPaths.p13059e00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_15"
+            />
+            <path
+              d={svgPaths.p257393c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_16"
+            />
+            <path
+              d={svgPaths.p6f0b0c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_17"
+            />
+            <path
+              d={svgPaths.p8f6c300}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_18"
+            />
+            <path
+              d={svgPaths.p771dd00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_19"
+            />
+            <path
+              d={svgPaths.p1afaf800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_20"
+            />
+            <path
+              d={svgPaths.p2fb199f0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_21"
+            />
+            <path
+              d={svgPaths.p30248b40}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_22"
+            />
+            <path
+              d={svgPaths.p342268f2}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_23"
+            />
+            <path
+              d={svgPaths.p3f9a7400}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_24"
+            />
+            <path
+              d={svgPaths.p5c2d40}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_25"
+            />
+            <path
+              d={svgPaths.p198bb300}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_26"
+            />
+            <path
+              d={svgPaths.p8602c00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_27"
+            />
+            <path
+              d={svgPaths.p27d46c00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_28"
+            />
+            <path
+              d={svgPaths.p28324000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_29"
+            />
+            <path
+              d={svgPaths.p1d49a200}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_30"
+            />
+            <path
+              d={svgPaths.p2b41fc80}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_31"
+            />
+            <path
+              d={svgPaths.p38ed0800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_32"
+            />
+            <path
+              d={svgPaths.p1ee76e10}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_33"
+            />
+            <path
+              d={svgPaths.p1ff45600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_34"
+            />
+            <path
+              d={svgPaths.p25f81000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_35"
+            />
+            <path
+              d={svgPaths.p26986180}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_36"
+            />
+            <path
+              d={svgPaths.pa4d0e00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_37"
+            />
+            <path
+              d={svgPaths.pf1a6500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_38"
+            />
+            <path
+              d={svgPaths.p381e6500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_39"
+            />
+            <path
+              d={svgPaths.p17b09c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_40"
+            />
+            <path
+              d={svgPaths.pe58fe70}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_41"
+            />
+            <path
+              d={svgPaths.p2377de00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_42"
+            />
+            <path
+              d={svgPaths.p1492ad00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_43"
+            />
+            <path
+              d={svgPaths.p16952200}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_44"
+            />
+            <path
+              d={svgPaths.p18c2ce00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_45"
+            />
+            <path
+              d={svgPaths.p2b9cb700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_46"
+            />
+            <path
+              d={svgPaths.p12c91a00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_47"
+            />
+            <path
+              d={svgPaths.p276b4c32}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_48"
+            />
+            <path
+              d={svgPaths.pd89e980}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_49"
+            />
+            <path
+              d={svgPaths.p2829f080}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_50"
+            />
+            <path
+              d={svgPaths.p949c280}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_51"
+            />
+            <path
+              d={svgPaths.p1ab02900}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_52"
+            />
+            <path
+              d={svgPaths.p1cd69d00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_53"
+            />
+            <path
+              d={svgPaths.p33c9b880}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_54"
+            />
+            <path
+              d={svgPaths.p28edb500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_55"
+            />
+            <path
+              d={svgPaths.p6caa600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_56"
+            />
+            <path
+              d={svgPaths.p1165c400}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_57"
+            />
+            <path
+              d={svgPaths.p27a94080}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_58"
+            />
+          </g>
+          <g id="Silver">
+            <g id="Vector_59"></g>
+            <g id="Vector_60"></g>
+            <g id="Vector_61"></g>
+            <g id="Vector_62"></g>
+            <g id="Vector_63"></g>
+            <g id="Vector_64"></g>
+            <g id="Vector_65"></g>
+            <g id="Vector_66"></g>
+            <g id="Vector_67"></g>
+            <g id="Vector_68"></g>
+            <g id="Vector_69"></g>
+            <g id="Vector_70"></g>
+            <g id="Vector_71"></g>
+            <g id="Vector_72"></g>
+            <g id="Vector_73"></g>
+            <g id="Vector_74"></g>
+            <g id="Vector_75"></g>
+            <g id="Vector_76"></g>
+            <g id="Vector_77"></g>
+            <g id="Vector_78"></g>
+            <g id="Vector_79"></g>
+            <g id="Vector_80"></g>
+            <g id="Vector_81"></g>
+            <g id="Vector_82"></g>
+            <g id="Vector_83"></g>
+            <g id="Vector_84"></g>
+            <g id="Vector_85"></g>
+            <g id="Vector_86"></g>
+            <g id="Vector_87"></g>
+            <g id="Vector_88"></g>
+            <g id="Vector_89"></g>
+            <g id="Vector_90"></g>
+            <g id="Vector_91"></g>
+            <g id="Vector_92"></g>
+            <g id="Vector_93"></g>
+            <g id="Vector_94"></g>
+          </g>
+          <g id="LightGray">
+            <g id="Vector_95"></g>
+            <g id="Vector_96"></g>
+            <g id="Vector_97"></g>
+            <g id="Vector_98"></g>
+            <g id="Vector_99"></g>
+            <g id="Vector_100"></g>
+            <g id="Vector_101"></g>
+            <g id="Vector_102"></g>
+            <g id="Vector_103"></g>
+            <g id="Vector_104"></g>
+            <g id="Vector_105"></g>
+            <g id="Vector_106"></g>
+            <g id="Vector_107"></g>
+            <g id="Vector_108"></g>
+            <g id="Vector_109"></g>
+            <g id="Vector_110"></g>
+            <g id="Vector_111"></g>
+            <g id="Vector_112"></g>
+            <g id="Vector_113"></g>
+            <g id="Vector_114"></g>
+            <g id="Vector_115"></g>
+            <g id="Vector_116"></g>
+            <g id="Vector_117"></g>
+            <g id="Vector_118"></g>
+            <g id="Vector_119"></g>
+            <g id="Vector_120"></g>
+            <g id="Vector_121"></g>
+            <g id="Vector_122"></g>
+            <g id="Vector_123"></g>
+            <g id="Vector_124"></g>
+            <g id="Vector_125"></g>
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_5025_563"
+            x1="558.5"
+            x2="558.5"
+            y1="67"
+            y2="659"
+          >
+            <stop stopColor="#A755F7" stopOpacity="0.6" />
+            <stop offset="0.265944" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+          <clipPath id="clip0_5025_563">
+            <rect fill="white" height="517" width="1079" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Image592Traced.tsx b/src/imports/Image592Traced.tsx
new file mode 100644
index 0000000..a3bc983
--- /dev/null
+++ b/src/imports/Image592Traced.tsx
@@ -0,0 +1,401 @@
+import svgPaths from "./svg-ol708ba89o";
+
+export default function Image592Traced() {
+  return (
+    <div className="relative size-full" data-name="image 592 (traced)">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 1079 517"
+      >
+        <g clipPath="url(#clip0_5025_264)" id="image 592 (traced)">
+          <path
+            d={svgPaths.p3c3d9a00}
+            fill="url(#paint0_linear_5025_264)"
+            id="Ellipse 2626"
+          />
+          <g id="Gray">
+            <path
+              d={svgPaths.p3cb03700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector"
+            />
+            <path
+              d={svgPaths.p1cd08500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_2"
+            />
+            <path
+              d={svgPaths.p3d523500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_3"
+            />
+            <path
+              d={svgPaths.p2a04f000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_4"
+            />
+            <path
+              d={svgPaths.p9306800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_5"
+            />
+            <path
+              d={svgPaths.p3e02a100}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_6"
+            />
+            <path
+              d={svgPaths.p12642100}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_7"
+            />
+            <path
+              d={svgPaths.p879600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_8"
+            />
+            <path
+              d={svgPaths.p2e7355f0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_9"
+            />
+            <path
+              d={svgPaths.p32aed480}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_10"
+            />
+            <path
+              d={svgPaths.p39749580}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_11"
+            />
+            <path
+              d={svgPaths.p34e60000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_12"
+            />
+            <path
+              d={svgPaths.pe648700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_13"
+            />
+            <path
+              d={svgPaths.pfec7180}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_14"
+            />
+            <path
+              d={svgPaths.p13059e00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_15"
+            />
+            <path
+              d={svgPaths.p257393c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_16"
+            />
+            <path
+              d={svgPaths.p6f0b0c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_17"
+            />
+            <path
+              d={svgPaths.p8f6c300}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_18"
+            />
+            <path
+              d={svgPaths.p771dd00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_19"
+            />
+            <path
+              d={svgPaths.p1afaf800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_20"
+            />
+            <path
+              d={svgPaths.p2fb199f0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_21"
+            />
+            <path
+              d={svgPaths.p30248b40}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_22"
+            />
+            <path
+              d={svgPaths.p342268f2}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_23"
+            />
+            <path
+              d={svgPaths.p3f9a7400}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_24"
+            />
+            <path
+              d={svgPaths.p5c2d40}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_25"
+            />
+            <path
+              d={svgPaths.p198bb300}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_26"
+            />
+            <path
+              d={svgPaths.p8602c00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_27"
+            />
+            <path
+              d={svgPaths.p27d46c00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_28"
+            />
+            <path
+              d={svgPaths.p28324000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_29"
+            />
+            <path
+              d={svgPaths.p1d49a200}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_30"
+            />
+            <path
+              d={svgPaths.p2b41fc80}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_31"
+            />
+            <path
+              d={svgPaths.p38ed0800}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_32"
+            />
+            <path
+              d={svgPaths.p1ee76e10}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_33"
+            />
+            <path
+              d={svgPaths.p1ff45600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_34"
+            />
+            <path
+              d={svgPaths.p25f81000}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_35"
+            />
+            <path
+              d={svgPaths.p26986180}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_36"
+            />
+            <path
+              d={svgPaths.pa4d0e00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_37"
+            />
+            <path
+              d={svgPaths.pf1a6500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_38"
+            />
+            <path
+              d={svgPaths.p381e6500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_39"
+            />
+            <path
+              d={svgPaths.p17b09c0}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_40"
+            />
+            <path
+              d={svgPaths.pe58fe70}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_41"
+            />
+            <path
+              d={svgPaths.p2377de00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_42"
+            />
+            <path
+              d={svgPaths.p1492ad00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_43"
+            />
+            <path
+              d={svgPaths.p16952200}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_44"
+            />
+            <path
+              d={svgPaths.p18c2ce00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_45"
+            />
+            <path
+              d={svgPaths.p2b9cb700}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_46"
+            />
+            <path
+              d={svgPaths.p12c91a00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_47"
+            />
+            <path
+              d={svgPaths.p276b4c32}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_48"
+            />
+            <path
+              d={svgPaths.pd89e980}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_49"
+            />
+            <path
+              d={svgPaths.p2829f080}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_50"
+            />
+            <path
+              d={svgPaths.p949c280}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_51"
+            />
+            <path
+              d={svgPaths.p1ab02900}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_52"
+            />
+            <path
+              d={svgPaths.p1cd69d00}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_53"
+            />
+            <path
+              d={svgPaths.p33c9b880}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_54"
+            />
+            <path
+              d={svgPaths.p28edb500}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_55"
+            />
+            <path
+              d={svgPaths.p6caa600}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_56"
+            />
+            <path
+              d={svgPaths.p1165c400}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_57"
+            />
+            <path
+              d={svgPaths.p27a94080}
+              fill="var(--fill-0, #DDBAFF)"
+              id="Vector_58"
+            />
+          </g>
+          <g id="Silver">
+            <g id="Vector_59"></g>
+            <g id="Vector_60"></g>
+            <g id="Vector_61"></g>
+            <g id="Vector_62"></g>
+            <g id="Vector_63"></g>
+            <g id="Vector_64"></g>
+            <g id="Vector_65"></g>
+            <g id="Vector_66"></g>
+            <g id="Vector_67"></g>
+            <g id="Vector_68"></g>
+            <g id="Vector_69"></g>
+            <g id="Vector_70"></g>
+            <g id="Vector_71"></g>
+            <g id="Vector_72"></g>
+            <g id="Vector_73"></g>
+            <g id="Vector_74"></g>
+            <g id="Vector_75"></g>
+            <g id="Vector_76"></g>
+            <g id="Vector_77"></g>
+            <g id="Vector_78"></g>
+            <g id="Vector_79"></g>
+            <g id="Vector_80"></g>
+            <g id="Vector_81"></g>
+            <g id="Vector_82"></g>
+            <g id="Vector_83"></g>
+            <g id="Vector_84"></g>
+            <g id="Vector_85"></g>
+            <g id="Vector_86"></g>
+            <g id="Vector_87"></g>
+            <g id="Vector_88"></g>
+            <g id="Vector_89"></g>
+            <g id="Vector_90"></g>
+            <g id="Vector_91"></g>
+            <g id="Vector_92"></g>
+            <g id="Vector_93"></g>
+            <g id="Vector_94"></g>
+          </g>
+          <g id="LightGray">
+            <g id="Vector_95"></g>
+            <g id="Vector_96"></g>
+            <g id="Vector_97"></g>
+            <g id="Vector_98"></g>
+            <g id="Vector_99"></g>
+            <g id="Vector_100"></g>
+            <g id="Vector_101"></g>
+            <g id="Vector_102"></g>
+            <g id="Vector_103"></g>
+            <g id="Vector_104"></g>
+            <g id="Vector_105"></g>
+            <g id="Vector_106"></g>
+            <g id="Vector_107"></g>
+            <g id="Vector_108"></g>
+            <g id="Vector_109"></g>
+            <g id="Vector_110"></g>
+            <g id="Vector_111"></g>
+            <g id="Vector_112"></g>
+            <g id="Vector_113"></g>
+            <g id="Vector_114"></g>
+            <g id="Vector_115"></g>
+            <g id="Vector_116"></g>
+            <g id="Vector_117"></g>
+            <g id="Vector_118"></g>
+            <g id="Vector_119"></g>
+            <g id="Vector_120"></g>
+            <g id="Vector_121"></g>
+            <g id="Vector_122"></g>
+            <g id="Vector_123"></g>
+            <g id="Vector_124"></g>
+            <g id="Vector_125"></g>
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_5025_264"
+            x1="558.5"
+            x2="558.5"
+            y1="67"
+            y2="659"
+          >
+            <stop stopColor="#A755F7" stopOpacity="0.6" />
+            <stop offset="0.265944" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+          <clipPath id="clip0_5025_264">
+            <rect fill="white" height="517" width="1079" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/ItineneryCreation-9263-544.tsx b/src/imports/ItineneryCreation-9263-544.tsx
new file mode 100644
index 0000000..4ed5725
--- /dev/null
+++ b/src/imports/ItineneryCreation-9263-544.tsx
@@ -0,0 +1,15 @@
+export default function ItineneryCreation() {
+  return (
+    <div className="backdrop-blur-[2px] backdrop-filter relative rounded-[12px] size-full" data-name="Itinenery creation" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 226 144\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'0.6200000047683716\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(6.9193e-16 7.2 -11.3 4.4087e-16 113 72)\\\'><stop stop-color=\\\'rgba(249,95,98,1)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(198,76,78,1)\\\' offset=\\\'0.5\\\'/><stop stop-color=\\\'rgba(147,56,58,1)\\\' offset=\\\'1\\\'/></radialGradient></defs></svg>')" }}>
+      <div className="flex flex-col items-center justify-center size-full">
+        <div className="box-border content-stretch flex flex-col gap-[8px] items-center justify-center overflow-clip px-[12px] py-[32px] relative size-full text-white">
+          <p className="font-['Poppins:Regular',_sans-serif] leading-[16px] not-italic relative shrink-0 text-[12px] text-nowrap whitespace-pre">GET NOW</p>
+          <p className="font-['Merchant:Medium_Expanded',_sans-serif] font-medium leading-[1.3] min-w-full relative shrink-0 text-[24px] text-center tracking-[-0.96px]" style={{ width: "min-content", fontVariationSettings: "'wdth' 100" }}>
+            Melbourne Unlimited Card
+          </p>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[rgba(0,0,0,0.12)] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/ItineneryCreation-9265-14.tsx b/src/imports/ItineneryCreation-9265-14.tsx
new file mode 100644
index 0000000..9bb9c4c
--- /dev/null
+++ b/src/imports/ItineneryCreation-9265-14.tsx
@@ -0,0 +1,30 @@
+import imgRectangle18609 from "figma:asset/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png";
+
+export default function ItineneryCreation() {
+  return (
+    <div className="bg-[rgba(0,0,0,0.62)] relative rounded-[12px] size-full" data-name="Itinenery creation">
+      <div className="flex flex-col items-center justify-center size-full">
+        <div className="box-border content-stretch flex flex-col gap-[16px] items-center justify-center overflow-clip px-[12px] py-[32px] relative size-full">
+          <div className="absolute h-[49px] left-0 rounded-tl-[12px] rounded-tr-[12px] top-0 w-[226px]">
+            <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-tl-[12px] rounded-tr-[12px]">
+              <img alt="" className="absolute max-w-none object-50%-50% object-cover rounded-tl-[12px] rounded-tr-[12px] size-full" src={imgRectangle18609} />
+              <div className="absolute bg-[rgba(0,0,0,0.42)] inset-0 rounded-tl-[12px] rounded-tr-[12px]" />
+            </div>
+          </div>
+          <p className="font-['Poppins:SemiBold',_sans-serif] leading-[16px] not-italic relative shrink-0 text-[12px] text-nowrap text-white whitespace-pre">GET NOW</p>
+          <div className="h-0 relative shrink-0 w-[226px]">
+            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 226 1">
+                <line id="Line 623" stroke="var(--stroke-0, #FFB23F)" strokeDasharray="6 6" x2="226" y1="0.5" y2="0.5" />
+              </svg>
+            </div>
+          </div>
+          <p className="font-['Merchant:Medium_Expanded',_sans-serif] font-medium leading-[1.3] min-w-full relative shrink-0 text-[#ffb23f] text-[24px] text-center tracking-[-0.96px]" style={{ width: "min-content", fontVariationSettings: "'wdth' 100" }}>
+            Melbourne Unlimited Card
+          </p>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border-2 border-[#ffb23f] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/ItineneryCreation-9265-37.tsx b/src/imports/ItineneryCreation-9265-37.tsx
new file mode 100644
index 0000000..50b6a72
--- /dev/null
+++ b/src/imports/ItineneryCreation-9265-37.tsx
@@ -0,0 +1,28 @@
+import imgRectangle18609 from "figma:asset/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png";
+
+export default function ItineneryCreation() {
+  return (
+    <div className="bg-[rgba(0,0,0,0.62)] relative rounded-[12px] size-full" data-name="Itinenery creation">
+      <div className="overflow-clip relative size-full">
+        <div className="absolute h-[49px] left-0 rounded-tl-[12px] rounded-tr-[12px] top-0 w-[226px]">
+          <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-tl-[12px] rounded-tr-[12px]">
+            <img alt="" className="absolute max-w-none object-50%-50% object-cover rounded-tl-[12px] rounded-tr-[12px] size-full" src={imgRectangle18609} />
+            <div className="absolute bg-[rgba(0,0,0,0.42)] inset-0 rounded-tl-[12px] rounded-tr-[12px]" />
+          </div>
+        </div>
+        <p className="absolute font-['Poppins:SemiBold',_sans-serif] leading-[16px] left-[85px] not-italic text-[12px] text-nowrap text-white top-[17px] whitespace-pre">GET NOW</p>
+        <div className="absolute h-0 left-0 top-[49px] w-[226px]">
+          <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+            <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 226 1">
+              <line id="Line 623" stroke="var(--stroke-0, #FFB23F)" strokeDasharray="6 6" x2="226" y1="0.5" y2="0.5" />
+            </svg>
+          </div>
+        </div>
+        <p className="absolute font-['Merchant:Medium_Expanded',_sans-serif] font-medium leading-[1.3] left-[113px] text-[#ffb23f] text-[24px] text-center top-[65px] tracking-[-0.96px] translate-x-[-50%] w-[202px]" style={{ fontVariationSettings: "'wdth' 100" }}>
+          Melbourne Unlimited Card
+        </p>
+      </div>
+      <div aria-hidden="true" className="absolute border-2 border-[#ffb23f] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/ItineneryCreation.tsx b/src/imports/ItineneryCreation.tsx
new file mode 100644
index 0000000..cea2fdb
--- /dev/null
+++ b/src/imports/ItineneryCreation.tsx
@@ -0,0 +1,15 @@
+export default function ItineneryCreation() {
+  return (
+    <div className="backdrop-blur-[2px] backdrop-filter relative rounded-[12px] size-full" data-name="Itinenery creation" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 168 144\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'0.6200000047683716\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(5.1435e-16 7.2 -8.4 4.4087e-16 84 72)\\\'><stop stop-color=\\\'rgba(249,95,98,1)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(198,76,78,1)\\\' offset=\\\'0.5\\\'/><stop stop-color=\\\'rgba(147,56,58,1)\\\' offset=\\\'1\\\'/></radialGradient></defs></svg>')" }}>
+      <div className="flex flex-col items-center justify-center size-full">
+        <div className="box-border content-stretch flex flex-col gap-[8px] items-center justify-center overflow-clip px-[12px] py-[32px] relative size-full text-white">
+          <p className="font-['Poppins:Regular',_sans-serif] leading-[16px] not-italic relative shrink-0 text-[12px] text-nowrap whitespace-pre">GET NOW</p>
+          <p className="font-['Merchant:Medium_Expanded',_sans-serif] font-medium leading-[1.3] min-w-full relative shrink-0 text-[24px] text-center tracking-[-0.96px]" style={{ width: "min-content", fontVariationSettings: "'wdth' 100" }}>
+            Melbourne Unlimited Card
+          </p>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[rgba(0,0,0,0.12)] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/MacBookPro142.tsx b/src/imports/MacBookPro142.tsx
new file mode 100644
index 0000000..a1f761c
--- /dev/null
+++ b/src/imports/MacBookPro142.tsx
@@ -0,0 +1,122 @@
+import svgPaths from "./svg-xklexce4dq";
+import imgRectangle4429 from "figma:asset/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png";
+
+function Frame1261155256() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-7 items-start justify-start leading-[0] left-[91.29px] not-italic top-[582px] w-[849.639px]">
+      <div className="font-['Poppins:Medium',_sans-serif] leading-[80px] relative shrink-0 text-[#ffffff] text-[60px] w-[771.315px]">
+        <p className="mb-0">Melbourne City Card.</p>
+        <p>See More, Spend Less.</p>
+      </div>
+      <div className="font-['Poppins:Regular',_sans-serif] min-w-full relative shrink-0 text-[22px] text-[rgba(255,255,255,0.74)]" style={{ width: "min-content" }}>
+        <p className="leading-[40px]">Instant QR access to 40+ attractions, exclusive perks, and savings up to 30%</p>
+      </div>
+    </div>
+  );
+}
+
+function LightGray() {
+  return (
+    <div className="relative size-full" data-name="LightGray">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 24">
+        <g id="LightGray">
+          <path d={svgPaths.p7ae9780} fill="var(--fill-0, white)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58839() {
+  return (
+    <div className="h-[6.424px] relative w-[6.505px]">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 7 7">
+        <g id="Group 58839">
+          <path d={svgPaths.p233cb880} fill="var(--fill-0, white)" id="Rectangle 120" />
+          <path d={svgPaths.p3a572b0} fill="var(--fill-0, white)" id="Rectangle 121" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58841() {
+  return (
+    <div className="absolute contents left-[141.96px] top-[41.48px]">
+      <div className="absolute flex inset-[4.23%_89.67%_93.39%_9.39%] items-center justify-center">
+        <div className="flex-none h-[23.333px] scale-y-[-100%] w-[14.276px]">
+          <LightGray />
+        </div>
+      </div>
+      <div className="absolute flex h-[8.453px] items-center justify-center left-[149.99px] top-[41.48px] w-[8.917px]">
+        <div className="flex-none rotate-[25.872deg]">
+          <Group58839 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame82() {
+  return (
+    <div className="absolute h-[22.528px] left-[132.88px] overflow-clip top-[42.32px] w-[4.371px]">
+      <div className="absolute font-['Chillax:Medium',_sans-serif] leading-[0] left-[-2.91px] not-italic text-[#ffffff] text-[36.664px] text-nowrap top-[-15.07px]">
+        <p className="leading-[normal] whitespace-pre">i</p>
+      </div>
+      <div className="absolute bg-[#ffffff] h-[22.695px] left-[0.39px] top-[-0.11px] w-[3.961px]" />
+    </div>
+  );
+}
+
+function Group58855() {
+  return (
+    <div className="absolute h-[14.254px] left-[121.25px] top-[23.58px] w-[27.998px]">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 28 15">
+        <g id="Group 58855">
+          <path d={svgPaths.p2193a880} fill="var(--fill-0, #FF8800)" id="Ellipse 10" />
+          <path d={svgPaths.p2c30f300} fill="var(--fill-0, #FF78AC)" id="Ellipse 11" />
+          <path d={svgPaths.p7126770} fill="var(--fill-0, #FFD700)" id="Ellipse 12" />
+          <path d={svgPaths.p339e2d00} fill="var(--fill-0, #F07000)" id="Ellipse 13" />
+          <path d={svgPaths.p165b1900} fill="var(--fill-0, #5E0FCD)" id="Ellipse 14" />
+          <g id="Group 58854">
+            <path d={svgPaths.p229f6800} fill="var(--fill-0, #FF8800)" id="Ellipse 18" />
+            <path d={svgPaths.p5ff2880} fill="var(--fill-0, #FF78AC)" id="Ellipse 19" />
+            <path d={svgPaths.p628b00} fill="var(--fill-0, #FFD700)" id="Ellipse 20" />
+            <path d={svgPaths.p2946b000} fill="var(--fill-0, #F07000)" id="Ellipse 21" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group58856() {
+  return (
+    <div className="absolute contents top-[23.58px] translate-x-[-50%]" style={{ left: "calc(50% - 560.09px)" }}>
+      <div className="absolute font-['Chillax:Medium',_sans-serif] leading-[0] left-[104.91px] not-italic text-[#ffffff] text-[36.664px] text-nowrap top-[27.24px]">
+        <p className="leading-[normal] whitespace-pre">{`C   yCards`}</p>
+      </div>
+      <Group58841 />
+      <Frame82 />
+      <Group58855 />
+    </div>
+  );
+}
+
+export default function MacBookPro142() {
+  return (
+    <div className="bg-[#ffffff] relative size-full" data-name="MacBook Pro 14' - 2">
+      <div className="absolute bg-[position:0%_0%,_50%_50%] bg-size-[auto,cover] h-[982px] left-0 top-0 w-[1512px]" style={{ backgroundImage: `url('${imgRectangle4429}')` }} />
+      <Frame1261155256 />
+      <div className="absolute h-[840.118px] rounded-[56px] top-[100.11px] translate-x-[-50%] w-[1449.56px]" style={{ left: "calc(50% + 7.086px)" }}>
+        <div aria-hidden="true" className="absolute border-2 border-[#ffffff] border-solid inset-0 pointer-events-none rounded-[56px]" />
+      </div>
+      <div className="absolute bg-[#5869e6] h-[61.805px] left-[91.29px] rounded-[11px] top-[834.87px] w-[262.349px]" />
+      <div className="absolute font-['Poppins:Medium',_sans-serif] leading-[0] left-[129.09px] not-italic text-[#ffffff] text-[20px] top-[825.77px] w-[186.751px]">
+        <p className="leading-[80px]">Explore Melbourne</p>
+      </div>
+      <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.2)] h-[66.549px] left-[38.31px] rounded-[33.275px] top-[17.79px] w-[1449.56px]" />
+      <Group58856 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/Navbar.tsx b/src/imports/Navbar.tsx
new file mode 100644
index 0000000..437e1bb
--- /dev/null
+++ b/src/imports/Navbar.tsx
@@ -0,0 +1,256 @@
+import svgPaths from "./svg-d9xnvztfng";
+
+function Icon() {
+  return (
+    <div className="relative shrink-0 size-6" data-name="Icon">
+      <svg
+        className="block size-full"
+        fill="none"
+        preserveAspectRatio="none"
+        viewBox="0 0 24 24"
+      >
+        <g id="Icon">
+          <path d={svgPaths.pc423380} fill="var(--fill-0, #49454F)" id="icon" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function StateLayer() {
+  return (
+    <div
+      className="box-border content-stretch flex flex-row h-10 items-center justify-center p-0 relative shrink-0 w-full"
+      data-name="State-layer"
+    >
+      <Icon />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div
+      className="box-border content-stretch flex flex-col items-center justify-center overflow-clip p-0 relative rounded-[100px] shrink-0 w-10"
+      data-name="Content"
+    >
+      <StateLayer />
+    </div>
+  );
+}
+
+function Component1stTrailingIcon() {
+  return (
+    <div
+      className="box-border content-stretch flex flex-row items-center justify-center p-0 relative shrink-0 size-12"
+      data-name="1st trailing-icon"
+    >
+      <Content />
+    </div>
+  );
+}
+
+function TrailingElements() {
+  return (
+    <div
+      className="box-border content-stretch flex flex-row items-center justify-end mr-[-16px] p-0 relative shrink-0"
+      data-name="Trailing-Elements"
+    >
+      <Component1stTrailingIcon />
+    </div>
+  );
+}
+
+function Content1() {
+  return (
+    <div
+      className="basis-0 grow h-full min-h-px min-w-px mr-[-16px] relative shrink-0"
+      data-name="Content"
+    >
+      <div className="flex flex-row items-center relative size-full">
+        <div className="box-border content-stretch flex flex-row gap-2.5 items-center justify-start px-5 py-0 relative size-full">
+          <div
+            className="flex flex-col font-['Roboto:Regular',_sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#49454f] text-[16px] text-left text-nowrap tracking-[0.5px]"
+            style={{ fontVariationSettings: "'wdth' 100" }}
+          >
+            <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
+              Search cities
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StateLayer1() {
+  return (
+    <div
+      className="basis-0 grow h-full min-h-px min-w-px relative shrink-0"
+      data-name="state-layer"
+    >
+      <div className="flex flex-row items-center relative size-full">
+        <div className="box-border content-stretch flex flex-row items-center justify-start pl-1 pr-5 py-1 relative size-full">
+          <TrailingElements />
+          <Content1 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SearchBar() {
+  return (
+    <div
+      className="bg-[rgba(151,91,249,0.12)] box-border content-stretch flex flex-row gap-1 h-12 items-center justify-start max-w-[720px] overflow-clip p-0 relative rounded-[28px] shrink-0 w-[248px]"
+      data-name="Search bar"
+    >
+      <StateLayer1 />
+    </div>
+  );
+}
+
+function LogoAndSearchBar() {
+  return (
+    <div
+      className="absolute box-border content-stretch flex flex-row gap-5 items-center justify-start left-3 p-0 top-3"
+      data-name="logo and search bar"
+    >
+      <div className="font-['Gaveto:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[24px] text-left text-nowrap tracking-[1.68px]">
+        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
+          CityCards
+        </p>
+      </div>
+      <SearchBar />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div
+      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
+      data-name="button"
+    >
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
+        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
+          Cities
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Button1() {
+  return (
+    <div
+      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
+      data-name="button"
+    >
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
+        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
+          Passes
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Button2() {
+  return (
+    <div
+      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
+      data-name="button"
+    >
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
+        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
+          How it Works
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Button3() {
+  return (
+    <div
+      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
+      data-name="button"
+    >
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
+        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
+          Support
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function MenuItems() {
+  return (
+    <div
+      className="absolute box-border content-stretch flex flex-row gap-5 items-center justify-start left-1/2 p-0 top-3 translate-x-[-50%]"
+      data-name="menu items"
+    >
+      <Button />
+      <Button1 />
+      <Button2 />
+      <Button3 />
+    </div>
+  );
+}
+
+function OutlineButton() {
+  return (
+    <div
+      className="relative rounded-[28px] shrink-0"
+      data-name="outline button"
+    >
+      <div className="box-border content-stretch flex flex-row gap-2.5 items-center justify-center overflow-clip px-6 py-3 relative">
+        <div className="flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#000000] text-[16px] text-left text-nowrap tracking-[0.5px]">
+          <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
+            Sign in
+          </p>
+        </div>
+      </div>
+      <div className="absolute border border-[rgba(0,0,0,0.12)] border-solid inset-0 pointer-events-none rounded-[28px]" />
+    </div>
+  );
+}
+
+function FilledButton() {
+  return (
+    <div
+      className="bg-[#975bf9] box-border content-stretch flex flex-row gap-2.5 items-center justify-center overflow-clip px-6 py-3 relative rounded-[28px] shrink-0"
+      data-name="filled button"
+    >
+      <div className="flex flex-col font-['Poppins:SemiBold',_sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#ffffff] text-[16px] text-left text-nowrap tracking-[0.5px]">
+        <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
+          Get Started
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Cta() {
+  return (
+    <div
+      className="absolute box-border content-stretch flex flex-row gap-[3px] items-center justify-start left-[1248px] p-0 top-3"
+      data-name="cta"
+    >
+      <OutlineButton />
+      <FilledButton />
+    </div>
+  );
+}
+
+export default function Navbar() {
+  return (
+    <div className="relative size-full" data-name="navbar">
+      <LogoAndSearchBar />
+      <MenuItems />
+      <Cta />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/TravelLandingPage-9181-1545.tsx b/src/imports/TravelLandingPage-9181-1545.tsx
new file mode 100644
index 0000000..2d92a13
--- /dev/null
+++ b/src/imports/TravelLandingPage-9181-1545.tsx
@@ -0,0 +1,1230 @@
+import svgPaths from "./svg-dxeurs6zar";
+
+function Menu() {
+  return (
+    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">{`Download `}</p>
+        <p className="mb-0">Help Center</p>
+        <p> </p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Why Travellers</p>
+        <p className="mb-0">Customer Stories</p>
+        <p>Instagram post</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Terms and Conditions</p>
+        <p className="mb-0">Privacy Policy</p>
+        <p className="mb-0">FAQs</p>
+        <p>Information</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">App Store</p>
+        <p>Google Play Store</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
+      </div>
+    </div>
+  );
+}
+
+function ICon() {
+  return (
+    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon1() {
+  return (
+    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon2() {
+  return (
+    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SocailIcon() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
+      <ICon />
+      <ICon1 />
+      <ICon2 />
+    </div>
+  );
+}
+
+function Img() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <div className="absolute h-[339px] left-1/2 overflow-clip top-[2306px] translate-x-[-50%] w-[1440px]" data-name="Footer">
+      <Menu />
+      <SocailIcon />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
+        <p className="leading-[26px]">Enjoy the touring with Salty</p>
+      </div>
+      <Img />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img1() {
+  return (
+    <div className="absolute bg-[#d9d9d9] h-[252px] left-[1698px] rounded-[20px] top-[2084px] w-[362px]" data-name="img">
+      <ImageSvgrepoCom />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute contents left-[1948px] top-[2439px]" data-name="Button">
+      <div className="absolute h-[37px] left-[1948px] rounded-[26px] top-[2439px] w-[100px]">
+        <div aria-hidden="true" className="absolute border border-[#2d3134] border-solid inset-0 pointer-events-none rounded-[26px]" />
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1964px] not-italic text-[14px] text-nowrap top-[2451px]">
+        <p className="leading-[14px] whitespace-pre">Book Now</p>
+      </div>
+    </div>
+  );
+}
+
+function Card8() {
+  return (
+    <div className="absolute contents left-[1686px] top-[2072px]" data-name="Card 8">
+      <div className="absolute bg-white h-[440px] left-[1686px] rounded-[16px] top-[2072px] w-[386px]">
+        <div aria-hidden="true" className="absolute border-2 border-solid border-white inset-0 pointer-events-none rounded-[16px]" />
+      </div>
+      <Img1 />
+      <Button />
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[0px] text-nowrap top-[2447px]">
+        <p className="leading-[20px] whitespace-pre">
+          <span className="text-[24px]">$99</span>
+          <span className="text-[#5b5f62] text-[24px]"> </span>
+          <span className="font-['Inter:Regular',_sans-serif] font-normal not-italic text-[#5b5f62] text-[16px]">/Person</span>
+        </p>
+      </div>
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[24px] text-nowrap top-[2360px]">
+        <p className="leading-[24px] whitespace-pre">Rome, Italy</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1710px] not-italic text-[#5b5f62] text-[14px] text-nowrap top-[2398px]">
+        <p className="leading-[14px] whitespace-pre">Mountain Hiking Tour</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155253() {
+  return (
+    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155252() {
+  return (
+    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
+        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Img2() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function LanguageSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="language_svgrepo.com">
+          <path d={svgPaths.p172e0300} fill="var(--fill-0, #2D3134)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function CartLargeMinimalisticSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="cart-large-minimalistic_svgrepo.com">
+          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame48095472() {
+  return (
+    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
+      <LanguageSvgrepoCom />
+      <CartLargeMinimalisticSvgrepoCom />
+    </div>
+  );
+}
+
+function Navigation() {
+  return (
+    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
+      <Frame1261155253 />
+      <Frame1261155252 />
+      <Img2 />
+      <Frame48095472 />
+    </div>
+  );
+}
+
+function Frame1000005536() {
+  return (
+    <div className="content-stretch flex gap-[17px] items-center relative shrink-0">
+      <div className="flex h-[24px] items-center justify-center relative shrink-0 w-[0px]">
+        <div className="flex-none rotate-[270deg]">
+          <div className="h-0 relative w-[24px]">
+            <div className="absolute bottom-0 left-0 right-0 top-[-3px]">
+              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 3">
+                <line id="Line 2" stroke="var(--stroke-0, #2D2D2D)" strokeWidth="3" x2="24" y1="1.5" y2="1.5" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#2d2d2d] text-[22px] w-[122px]">
+        <p className="leading-[normal]">Search by</p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005537() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] text-nowrap">
+        <p className="leading-[1.705] whitespace-pre" dir="auto">
+          Dining (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox1() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005547() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox1 />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] text-nowrap">
+        <p className="leading-[1.705] whitespace-pre" dir="auto">
+          Sports (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox2() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005546() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox2 />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] w-[126px]">
+        <p className="leading-[1.705]" dir="auto">
+          Stays (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox3() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005545() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox3 />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] w-[126px]">
+        <p className="leading-[1.705]" dir="auto">
+          Food (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox4() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005544() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox4 />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] w-[126px]">
+        <p className="leading-[1.705]" dir="auto">
+          Drinks (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CheckBox5() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 size-[20px]" data-name="Check Box">
+      <div aria-hidden="true" className="absolute border border-[#bebebe] border-solid inset-0 pointer-events-none rounded-[4px]" />
+    </div>
+  );
+}
+
+function Frame1000005543() {
+  return (
+    <div className="content-stretch flex gap-[9px] items-center relative shrink-0 w-[226px]">
+      <CheckBox5 />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] text-nowrap">
+        <p className="leading-[1.705] whitespace-pre" dir="auto">
+          Museum (3)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1000005539() {
+  return (
+    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
+      <Frame1000005537 />
+      <Frame1000005547 />
+      <Frame1000005546 />
+      <Frame1000005545 />
+      <Frame1000005544 />
+      <Frame1000005543 />
+    </div>
+  );
+}
+
+function Frame1000005548() {
+  return (
+    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0">
+      <Frame1000005536 />
+      <Frame1000005539 />
+    </div>
+  );
+}
+
+function Frame1000005535() {
+  return (
+    <div className="bg-white relative shrink-0">
+      <div className="box-border content-stretch flex gap-[10px] items-start overflow-clip px-[30px] py-[40px] relative">
+        <Frame1000005548 />
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#e2e2e2] border-solid inset-0 pointer-events-none" />
+    </div>
+  );
+}
+
+function Frame1000005557() {
+  return (
+    <div className="content-stretch flex flex-col gap-[32px] items-start relative shrink-0">
+      <Frame1000005535 />
+    </div>
+  );
+}
+
+function Group() {
+  return (
+    <div className="absolute inset-[8.33%_12.5%_12.5%_8.33%]" data-name="Group">
+      <div className="absolute inset-[-7.018%]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 17 17">
+          <g id="Group">
+            <path d={svgPaths.p12efde80} id="Vector" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="2" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function AkarIconsSearch() {
+  return (
+    <div className="overflow-clip relative shrink-0 size-[18px]" data-name="akar-icons:search">
+      <Group />
+    </div>
+  );
+}
+
+function Frame48095395() {
+  return (
+    <div className="bg-[#666666] box-border content-stretch flex gap-[10px] items-start p-[11px] relative rounded-[24px] shrink-0">
+      <AkarIconsSearch />
+    </div>
+  );
+}
+
+function Frame48095388() {
+  return (
+    <div className="backdrop-blur-[11px] backdrop-filter box-border content-stretch flex items-center justify-between pl-[20px] pr-[8px] py-[8px] relative rounded-[42px] shrink-0 w-[922px]">
+      <div aria-hidden="true" className="absolute border border-[rgba(0,0,0,0.15)] border-solid inset-0 pointer-events-none rounded-[42px]" />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#5f5f5f] text-[16px] text-center text-nowrap">
+        <p className="leading-[normal] whitespace-pre">Search An Attraction</p>
+      </div>
+      <Frame48095395 />
+    </div>
+  );
+}
+
+function Frame1000005558() {
+  return (
+    <div className="content-stretch flex flex-col items-start justify-center leading-[0] not-italic relative shrink-0 text-[16px]">
+      <div className="font-['Inter:Bold',_sans-serif] font-bold relative shrink-0 text-[#414141] text-nowrap">
+        <p className="leading-[1.705] whitespace-pre" dir="auto">
+          Showing 1–12 of 24 item(s)
+        </p>
+      </div>
+      <div className="font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[#949494] w-[944px]">
+        <p className="leading-[1.705]" dir="auto">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1000005519() {
+  return (
+    <div className="content-stretch flex gap-[4px] items-center relative shrink-0 w-[922px]">
+      <Frame1000005558 />
+    </div>
+  );
+}
+
+function Frame1000005555() {
+  return (
+    <div className="content-stretch flex items-start justify-between relative shrink-0 w-[922px]">
+      <Frame1000005519 />
+    </div>
+  );
+}
+
+function Frame1000005564() {
+  return (
+    <div className="content-stretch flex flex-col gap-[32px] items-start relative shrink-0">
+      <div className="font-['Inter:Medium',_sans-serif] font-medium leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[48px] text-nowrap tracking-[0.48px]">
+        <p className="leading-[54px] whitespace-pre">Offers for you</p>
+      </div>
+      <Frame48095388 />
+      <Frame1000005555 />
+    </div>
+  );
+}
+
+function Frame1000005566() {
+  return (
+    <div className="content-stretch flex flex-col gap-[32px] items-start relative shrink-0">
+      <Frame1000005564 />
+    </div>
+  );
+}
+
+function Frame1000005554() {
+  return (
+    <div className="content-stretch flex flex-col gap-[64px] items-end relative shrink-0">
+      <Frame1000005566 />
+    </div>
+  );
+}
+
+function Copy1SvgrepoCom() {
+  return (
+    <div className="absolute left-[11px] size-[16px] top-[12px]" data-name="copy-1_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
+        <g id="copy-1_svgrepo.com">
+          <path d={svgPaths.pe79f480} id="Vector" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame1261155294() {
+  return (
+    <div className="absolute bg-[#2c2c2c] h-[40px] right-0 rounded-br-[5px] rounded-tr-[5px] top-[0.41px] w-[38px]">
+      <Copy1SvgrepoCom />
+    </div>
+  );
+}
+
+function DivDFlex() {
+  return (
+    <div className="absolute bg-[#f4f4f4] h-[41px] left-[21px] right-[21px] top-[340.59px]" data-name="div.d-flex">
+      <div aria-hidden="true" className="absolute border-[#e7e6e6] border-[0px_0px_1px] border-solid inset-0 pointer-events-none" />
+      <div className="absolute font-['Poppins:SemiBold',_sans-serif] leading-[0] left-[68.5px] not-italic text-[#2d3134] text-[15px] text-center top-[8.41px] translate-x-[-50%] w-[95px]">
+        <p className="leading-[normal]">AFJIJFJS500</p>
+      </div>
+      <Frame1261155294 />
+    </div>
+  );
+}
+
+function Image() {
+  return <div className="absolute bg-[#c4c4c4] inset-[0.26%_0.33%_45.53%_0.33%]" data-name="image" />;
+}
+
+function Button1() {
+  return (
+    <div className="absolute bg-white bottom-[161.75px] right-[11px] rounded-[35px] shadow-[0px_10px_40px_0px_rgba(0,0,0,0.05)] size-[35px]" data-name="Button">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[15px] justify-center leading-[0] not-italic text-[15px] text-black text-center top-[17.5px] translate-x-[-50%] translate-y-[-50%] w-[15.2px]" style={{ left: "calc(50% + 0.1px)" }}>
+        <p className="leading-[15px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function Link() {
+  return (
+    <div className="bg-white h-[392.59px] relative rounded-[12px] shrink-0 w-[300px]" data-name="Link">
+      <div className="h-[392.59px] overflow-clip relative w-[300px]">
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[16px] justify-center leading-[0] left-[101.92px] not-italic text-[#717171] text-[16px] top-[236.03px] translate-y-[-50%] w-[16.2px]">
+          <p className="leading-[16px]"></p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24.38px] justify-center leading-[0] left-[21px] not-italic text-[#717171] text-[12.289px] top-[236.03px] translate-y-[-50%] w-[75.92px]">
+          <p className="leading-[24.38px]">Aster Hotels</p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[45px] justify-center leading-[0] left-[21px] not-italic text-[#05073c] text-[15.875px] top-[288.5px] translate-y-[-50%] w-[249.4px]">
+          <p className="leading-[24px]">{`20% Off on dining and drinks on purchase upto $500 T&Cs* apply`}</p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[21px] not-italic text-[#e2ad64] text-[10px] top-[318.21px] translate-y-[-50%] w-[10.2px]">
+          <p className="leading-[10px]"></p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[36px] not-italic text-[#e2ad64] text-[10px] top-[318.21px] translate-y-[-50%] w-[10.2px]">
+          <p className="leading-[10px]"></p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[51px] not-italic text-[#e2ad64] text-[10px] top-[318.21px] translate-y-[-50%] w-[10.2px]">
+          <p className="leading-[10px]"></p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[66px] not-italic text-[#e2ad64] text-[10px] top-[318.21px] translate-y-[-50%] w-[10.2px]">
+          <p className="leading-[10px]"></p>
+        </div>
+        <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[81px] not-italic text-[#e2ad64] text-[10px] top-[318.21px] translate-y-[-50%] w-[10.2px]">
+          <p className="leading-[10px]"></p>
+        </div>
+        <DivDFlex />
+        <Image />
+        <Button1 />
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
+
+function Frame1261155237() {
+  return (
+    <div className="content-start flex flex-wrap gap-[24px] items-start relative shrink-0 w-[960px]">
+      {[...Array(16).keys()].map((_, i) => (
+        <Link key={i} />
+      ))}
+    </div>
+  );
+}
+
+function Frame1000005559() {
+  return (
+    <div className="h-px relative shrink-0 w-[498.004px]">
+      <div className="absolute bottom-0 left-0 right-0 top-[-200%]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 498 3">
+          <g id="Frame 1000005559">
+            <line id="Line 3" stroke="var(--stroke-0, #DFDFDF)" strokeWidth="3" x2="498.004" y1="1.5" y2="1.5" />
+            <line id="Line 4" stroke="var(--stroke-0, #282828)" x1="0.00390625" x2="286.006" y1="1.5" y2="1.5" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function IconIoniconsFilledChevronDown() {
+  return (
+    <div className="relative size-full" data-name="icon / ionicons / filled / chevron-down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="icon / ionicons / filled / chevron-down">
+          <path clipRule="evenodd" d={svgPaths.p3195a1f8} fill="var(--fill-0, white)" fillRule="evenodd" id="Vector (Stroke)" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function AddA73Igur3Kxgy1() {
+  return (
+    <div className="overflow-clip relative shrink-0 size-[24px]" data-name="add_a73igur3kxgy 1">
+      <div className="absolute bottom-0 flex items-center justify-center left-[-0.46%] right-[0.46%] top-0">
+        <div className="flex-none rotate-[270deg] size-[24px]">
+          <IconIoniconsFilledChevronDown />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame15() {
+  return (
+    <div className="bg-[#282828] box-border content-stretch flex gap-[10px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[64px] shrink-0">
+      <div className="font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic relative shrink-0 text-[20px] text-center text-nowrap text-white">
+        <p className="leading-[normal] whitespace-pre">Load More</p>
+      </div>
+      <AddA73Igur3Kxgy1 />
+    </div>
+  );
+}
+
+function Frame1000005560() {
+  return (
+    <div className="box-border content-stretch flex flex-col gap-[26px] items-center px-0 py-[64px] relative shrink-0 w-[960px]">
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#414141] text-[16px] text-nowrap">
+        <p className="leading-[1.705] whitespace-pre" dir="auto">
+          Showing 1–12 of 24 item(s)
+        </p>
+      </div>
+      <Frame1000005559 />
+      <Frame15 />
+    </div>
+  );
+}
+
+function Frame1000005561() {
+  return (
+    <div className="content-stretch flex flex-col gap-[32px] items-start justify-center relative shrink-0">
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#05073c] text-[14.297px] text-nowrap">
+        <p className="leading-[28.13px] whitespace-pre">
+          <span>{`My Profile>My passes>`}</span>
+          <span className="font-['Inter:Bold',_sans-serif] font-bold not-italic">Offers</span>
+        </p>
+      </div>
+      <Frame1000005554 />
+      <Frame1261155237 />
+      <Frame1000005560 />
+    </div>
+  );
+}
+
+function Frame1000005562() {
+  return (
+    <div className="box-border content-stretch flex gap-[32px] items-start pb-0 pt-[32px] px-[100px] relative shrink-0">
+      <Frame1000005557 />
+      <Frame1000005561 />
+    </div>
+  );
+}
+
+function SectionHeading() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start leading-[0] not-italic overflow-clip relative shrink-0 w-[592px]" data-name="Section heading">
+      <div className="css-9el0wq font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-[#2d3134] text-[48px] tracking-[-1.2px] w-full">
+        <p className="leading-[60px]">Access all your city cards on your phone.</p>
+      </div>
+      <div className="css-sdralp font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[18px] text-gray-900 w-full">
+        <p className="leading-[28px]">Download the app to manage your projects, keep track of the progress and complete tasks without procastinating. Stay on track and complete on time!</p>
+      </div>
+    </div>
+  );
+}
+
+function Bg() {
+  return (
+    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
+      <g id="Bg">
+        <path d={svgPaths.p11d0cb00} fill="var(--fill-0, black)" id="Vector" />
+        <path d={svgPaths.p1ab2e500} fill="var(--fill-0, #A6A6A6)" id="Vector_2" />
+      </g>
+    </svg>
+  );
+}
+
+function Text() {
+  return (
+    <div className="absolute inset-[17.16%_6.8%_14.81%_30.4%]" data-name="Text">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.37%]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 85 29">
+          <g id="Text">
+            <g id="Vector">
+              <path d={svgPaths.p360ff200} fill="white" />
+              <path d={svgPaths.p2e09de00} fill="white" />
+              <path d={svgPaths.p2edcc080} fill="white" />
+              <path d={svgPaths.p146a6200} fill="white" />
+              <path d={svgPaths.p234bdb12} fill="white" />
+              <path d={svgPaths.p190f4c00} fill="white" />
+              <path d={svgPaths.p3f96e4c0} fill="white" />
+              <path d={svgPaths.p360ff200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p2e09de00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p2edcc080} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p146a6200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p234bdb12} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p190f4c00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p3f96e4c0} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+            </g>
+            <path d={svgPaths.p949f00} fill="var(--fill-0, white)" id="Vector_2" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function GooglePlayLogo() {
+  return (
+    <div className="absolute inset-[17.83%_75.51%_17.82%_7.38%]" data-name="Google Play logo">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 26">
+        <g id="Google Play logo">
+          <path d={svgPaths.p3aebff00} fill="url(#paint0_linear_9181_1577)" id="Vector" />
+          <path d={svgPaths.p1ae2b0c0} fill="url(#paint1_linear_9181_1577)" id="Vector_2" />
+          <path d={svgPaths.p2ddae880} fill="url(#paint2_linear_9181_1577)" id="Vector_3" />
+          <path d={svgPaths.p1b13c280} fill="url(#paint3_linear_9181_1577)" id="Vector_4" />
+          <path d={svgPaths.p1b75f800} fill="var(--fill-0, black)" id="Vector_5" opacity="0.2" />
+          <path d={svgPaths.p26d43100} fill="var(--fill-0, black)" id="Vector_6" opacity="0.12" />
+          <path d={svgPaths.p25f97b00} fill="var(--fill-0, black)" id="Vector_7" opacity="0.12" />
+          <path d={svgPaths.p20fe0080} fill="var(--fill-0, white)" id="Vector_8" opacity="0.25" />
+        </g>
+        <defs>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_9181_1577" x1="11.8308" x2="-4.95164" y1="1.57842" y2="18.3608">
+            <stop stopColor="#00A0FF" />
+            <stop offset="0.00657" stopColor="#00A1FF" />
+            <stop offset="0.2601" stopColor="#00BEFF" />
+            <stop offset="0.5122" stopColor="#00D2FF" />
+            <stop offset="0.7604" stopColor="#00DFFF" />
+            <stop offset="1" stopColor="#00E3FF" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint1_linear_9181_1577" x1="23.8654" x2="-0.33149" y1="12.8702" y2="12.8702">
+            <stop stopColor="#FFE000" />
+            <stop offset="0.4087" stopColor="#FFBD00" />
+            <stop offset="0.7754" stopColor="#FFA500" />
+            <stop offset="1" stopColor="#FF9C00" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint2_linear_9181_1577" x1="14.858" x2="-7.9003" y1="15.1648" y2="37.9231">
+            <stop stopColor="#FF3A44" />
+            <stop offset="1" stopColor="#C31162" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint3_linear_9181_1577" x1="-2.67164" x2="7.49088" y1="-6.95511" y2="3.20741">
+            <stop stopColor="#32A071" />
+            <stop offset="0.0685" stopColor="#2DA771" />
+            <stop offset="0.4762" stopColor="#15CF74" />
+            <stop offset="0.8009" stopColor="#06E775" />
+            <stop offset="1" stopColor="#00F076" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function StoreBadge() {
+  return (
+    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg />
+      <Text />
+      <GooglePlayLogo />
+    </div>
+  );
+}
+
+function Bg1() {
+  return (
+    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
+      <g id="Bg">
+        <path clipRule="evenodd" d={svgPaths.pd6ee900} fill="var(--fill-0, #A6A6A6)" fillRule="evenodd" id="Vector" />
+        <path d={svgPaths.p3394cd00} fill="var(--fill-0, black)" id="Vector_2" />
+      </g>
+    </svg>
+  );
+}
+
+function Group1() {
+  return (
+    <div className="absolute inset-[21.8%_73.54%_23.76%_13.33%]" data-name="<Group>">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 18 22">
+        <g id="<Group>">
+          <path d={svgPaths.p1ba7a100} fill="var(--fill-0, white)" id="<Path>" />
+          <path d={svgPaths.p26de8970} fill="var(--fill-0, white)" id="<Path>_2" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Text1() {
+  return (
+    <div className="absolute inset-[21.09%_12.95%_16.27%_31.45%]" data-name="Text">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 76 26">
+        <g id="Text">
+          <g id="Vector">
+            <path d={svgPaths.p330e6600} fill="white" />
+            <path d={svgPaths.p140623c0} fill="white" />
+            <path d={svgPaths.p35419200} fill="white" />
+            <path d={svgPaths.p48005c0} fill="white" />
+            <path d={svgPaths.p21d6a400} fill="white" />
+            <path d={svgPaths.p3c536e80} fill="white" />
+            <path d={svgPaths.p3709a00} fill="white" />
+            <path d={svgPaths.p14978a80} fill="white" />
+          </g>
+          <g id="Vector_2">
+            <path d={svgPaths.pa6cfb80} fill="white" />
+            <path d={svgPaths.p1c846872} fill="white" />
+            <path d={svgPaths.p235e2a00} fill="white" />
+            <path d={svgPaths.p3c1952c0} fill="white" />
+            <path d={svgPaths.p3b676a80} fill="white" />
+            <path d={svgPaths.pd9336c0} fill="white" />
+            <path d={svgPaths.p22016470} fill="white" />
+            <path d={svgPaths.p7fb1900} fill="white" />
+            <path d={svgPaths.p35e78e00} fill="white" />
+            <path d={svgPaths.p28b0e180} fill="white" />
+            <path d={svgPaths.p4ac700} fill="white" />
+            <path d={svgPaths.p1fa9cb00} fill="white" />
+            <path d={svgPaths.p1865d740} fill="white" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function StoreBadge1() {
+  return (
+    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg1 />
+      <Group1 />
+      <Text1 />
+    </div>
+  );
+}
+
+function Badges() {
+  return (
+    <div className="content-stretch flex gap-[12px] items-start overflow-clip relative shrink-0" data-name="Badges">
+      <StoreBadge />
+      <StoreBadge1 />
+    </div>
+  );
+}
+
+function GetTheApp() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start overflow-clip relative shrink-0" data-name="Get the App">
+      <div className="css-sdralp font-['Inter:Medium',_sans-serif] font-medium leading-[0] not-italic relative shrink-0 text-[18px] text-gray-900 text-nowrap">
+        <p className="leading-[28px] whitespace-pre">Get the App</p>
+      </div>
+      <Badges />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="content-stretch flex flex-col gap-[48px] items-start overflow-clip relative shrink-0" data-name="Content">
+      <SectionHeading />
+      <GetTheApp />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom1() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img3() {
+  return (
+    <div className="bg-[#d9d9d9] h-[558px] relative shrink-0 w-[592px]" data-name="img">
+      <ImageSvgrepoCom1 />
+    </div>
+  );
+}
+
+function Cta06() {
+  return (
+    <div className="bg-white relative shrink-0 w-full" data-name="CTA 06">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[32px] items-center px-[112px] py-0 relative w-full">
+          <Content />
+          <Img3 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Star() {
+  return (
+    <div className="absolute inset-[68.85%_37.13%_28.61%_55.42%]" data-name="Star">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 108 17">
+        <g id="Star">
+          <path d={svgPaths.pe0e8600} fill="var(--fill-0, #BEBEBE)" id="Vector" />
+          <path d={svgPaths.p1e77dec0} fill="var(--fill-0, #BEBEBE)" id="Vector_2" />
+          <path d={svgPaths.p2db3f680} fill="var(--fill-0, #BEBEBE)" id="Vector_3" />
+          <path d={svgPaths.p15bde300} fill="var(--fill-0, #BEBEBE)" id="Vector_4" />
+          <path d={svgPaths.p34657a80} fill="var(--fill-0, #BEBEBE)" id="Vector_5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div className="absolute contents left-[798px] top-[462px]" data-name="Group">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium leading-[0] left-[798px] not-italic text-[#2d3134] text-[20px] text-nowrap top-[496px]">
+        <p className="leading-[20px] whitespace-pre">Andrew Sarma</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[798px] not-italic text-[#5b5f62] text-[12px] text-nowrap top-[524px]">
+        <p className="leading-[12px] whitespace-pre">Enterpreneur</p>
+      </div>
+      <Star />
+    </div>
+  );
+}
+
+function ArrowRight() {
+  return (
+    <div className="absolute left-[1235px] size-[40px] top-[496px]" data-name="Arrow right">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
+        <g id="Arrow right">
+          <circle cx="20" cy="20" fill="var(--fill-0, #2D3134)" id="Ellipse 2616" r="20" />
+          <path d={svgPaths.p153efec0} id="Vector 796" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ArrowLeft() {
+  return (
+    <div className="relative size-[40px]" data-name="Arrow left">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
+        <g id="Arrow left">
+          <circle cx="20" cy="20" id="Ellipse 2616" r="19.5" stroke="var(--stroke-0, #2D3134)" />
+          <path d={svgPaths.p153efec0} id="Vector 796" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Card() {
+  return (
+    <div className="absolute contents left-[768px] top-[283px]" data-name="Card">
+      <div className="absolute bg-white h-[283px] left-[768px] rounded-[14px] top-[283px] w-[537px]" data-name="BG" />
+      <Group2 />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[798px] not-italic text-[#5b5f62] text-[18px] top-[315px] w-[473px]">
+        <p className="leading-[30px]">Salty helped me a lot in finding the best place for our first outdoor adventure trip. They responded very quickly and gave me a detailed account of the place—its history, as well as its best features.</p>
+      </div>
+      <ArrowRight />
+      <div className="absolute flex items-center justify-center left-[1179px] size-[40px] top-[496px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <ArrowLeft />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Text2() {
+  return (
+    <div className="absolute contents left-[768px] top-[105px]" data-name="Text">
+      <div className="absolute capitalize font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[768px] not-italic text-[#2d3134] text-[56px] top-[125px] w-[467px]">
+        <p className="leading-[66px]">A customer said about us:</p>
+      </div>
+      <div className="absolute bg-[#c2c2c2] h-[8px] left-[768px] rounded-[4px] shadow-[0px_2px_6px_0px_rgba(229,137,24,0.15)] top-[105px] w-[67px]" />
+      <Card />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom2() {
+  return (
+    <div className="absolute size-[60px] translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com" style={{ top: "calc(50% + 0.5px)", left: "calc(50% + 0.5px)" }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img4() {
+  return (
+    <div className="absolute bg-[#d7d7d7] h-[485px] left-[135px] rounded-[20px] top-[95px] w-[517px]" data-name="img">
+      <ImageSvgrepoCom2 />
+    </div>
+  );
+}
+
+function Testimonial() {
+  return (
+    <div className="h-[671px] overflow-clip relative shrink-0 w-[1440px]" data-name="Testimonial">
+      <Text2 />
+      <Img4 />
+    </div>
+  );
+}
+
+function Menu1() {
+  return (
+    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">{`Download `}</p>
+        <p className="mb-0">Help Center</p>
+        <p> </p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Why Travellers</p>
+        <p className="mb-0">Customer Stories</p>
+        <p>Instagram post</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Terms and Conditions</p>
+        <p className="mb-0">Privacy Policy</p>
+        <p className="mb-0">FAQs</p>
+        <p>Information</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">App Store</p>
+        <p>Google Play Store</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
+      </div>
+    </div>
+  );
+}
+
+function ICon3() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="ICon">
+      <div className="absolute left-[135px] size-[32px] top-[226px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+        </svg>
+      </div>
+      <div className="absolute inset-[69.62%_89.31%_26.84%_10.28%]" data-name="Vector">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 6 12">
+          <path d={svgPaths.p35c3b610} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function ICon4() {
+  return (
+    <div className="absolute contents left-[227px] top-[226px]" data-name="ICon">
+      <div className="absolute left-[227px] size-[32px] top-[226px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+        </svg>
+      </div>
+      <div className="absolute inset-[69.62%_82.57%_26.84%_16.39%]" data-name="Vector">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 15 12">
+          <path d={svgPaths.p3d90cb00} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function ICon5() {
+  return (
+    <div className="absolute contents left-[181px] top-[226px]" data-name="ICon">
+      <div className="absolute left-[181px] size-[32px] top-[226px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+        </svg>
+      </div>
+      <div className="absolute inset-[69.62%_85.9%_26.84%_13.26%]" data-name="Vector">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 12 12">
+          <path clipRule="evenodd" d={svgPaths.p31d8c180} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function SocailIcon1() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
+      <ICon3 />
+      <ICon4 />
+      <ICon5 />
+    </div>
+  );
+}
+
+function Img5() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function Footer1() {
+  return (
+    <div className="h-[339px] overflow-clip relative shrink-0 w-full" data-name="Footer">
+      <Menu1 />
+      <SocailIcon1 />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
+        <p className="leading-[26px]">Enjoy the touring with Salty</p>
+      </div>
+      <Img5 />
+    </div>
+  );
+}
+
+function Frame1261155236() {
+  return (
+    <div className="absolute bg-[#f8f8f8] content-stretch flex flex-col gap-[170px] h-[5249px] items-start left-0 top-[102px] w-[1440px]">
+      <Frame1000005562 />
+      <Cta06 />
+      <Testimonial />
+      <Footer1 />
+    </div>
+  );
+}
+
+export default function TravelLandingPage() {
+  return (
+    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
+      <Footer />
+      <Card8 />
+      <Navigation />
+      <Frame1261155236 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/TravelLandingPage-9181-874.tsx b/src/imports/TravelLandingPage-9181-874.tsx
new file mode 100644
index 0000000..66d487d
--- /dev/null
+++ b/src/imports/TravelLandingPage-9181-874.tsx
@@ -0,0 +1,760 @@
+import svgPaths from "./svg-uozb6wgfml";
+import imgImage from "figma:asset/ad526a204d3f66901399ea0452aaf33e105b0f32.png";
+import imgImage583 from "figma:asset/0920e544195a4f6cffeb43277fdbb28bbf0e88b6.png";
+
+function Frame1261155305() {
+  return (
+    <div className="bg-[#5b5f62] box-border content-stretch flex gap-[8px] items-center justify-center px-[9px] py-0 relative rounded-[29px] shrink-0 w-[65px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[12px] text-nowrap text-white">
+        <p className="leading-[22px] whitespace-pre">Active</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155307() {
+  return (
+    <div className="content-stretch flex gap-[12px] items-center relative shrink-0 w-[620px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Melbourne- Unlimited Card</p>
+      </div>
+      <Frame1261155305 />
+    </div>
+  );
+}
+
+function Frame73() {
+  return (
+    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
+      <Frame1261155307 />
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#5b5f62] text-[16px] text-nowrap text-right">
+        <p className="leading-[12px] whitespace-pre">22/12/2024</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155295() {
+  return (
+    <div className="content-stretch flex gap-[8px] items-center relative shrink-0">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">2 Days</p>
+      </div>
+      <div className="relative shrink-0 size-[3px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
+          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
+        </svg>
+      </div>
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">Adults-3</p>
+      </div>
+      <div className="relative shrink-0 size-[3px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
+          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
+        </svg>
+      </div>
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">Kids-3</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame74() {
+  return (
+    <div className="relative shrink-0 w-full">
+      <div className="flex flex-row items-center relative size-full">
+        <div className="box-border content-stretch flex gap-[148px] items-center pl-px pr-[8px] py-0 relative w-full">
+          <Frame1261155295 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame75() {
+  return (
+    <div className="basis-0 content-stretch flex flex-col gap-[4px] grow items-start min-h-px min-w-px relative shrink-0">
+      <Frame73 />
+      <Frame74 />
+    </div>
+  );
+}
+
+function Frame76() {
+  return (
+    <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full">
+      <Frame75 />
+    </div>
+  );
+}
+
+function Frame83() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[24px] items-start left-[16px] top-[13px] w-[1010px]">
+      <Frame76 />
+    </div>
+  );
+}
+
+function LinkImage() {
+  return <div className="bg-[rgba(0,0,0,0.2)] rounded-[12px] shrink-0 size-[50px]" data-name="Link → image" />;
+}
+
+function Frame48095477() {
+  return (
+    <div className="content-stretch flex flex-col gap-[4px] items-start leading-[0] not-italic relative shrink-0 text-[#05073c]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center relative shrink-0 text-[17.719px] w-full">
+        <p className="leading-[27px]">Colosseum</p>
+      </div>
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center relative shrink-0 text-[13.234px] w-full">
+        <p className="leading-[26.25px]">100+ Tours</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame() {
+  return (
+    <div className="content-stretch flex gap-[8px] items-center relative shrink-0" data-name="Frame">
+      <LinkImage />
+      <Frame48095477 />
+    </div>
+  );
+}
+
+function Frame48095487() {
+  return (
+    <div className="content-stretch flex gap-[20px] items-center overflow-clip relative shrink-0 w-[820px]">
+      {[...Array(9).keys()].map((_, i) => (
+        <Frame key={i} />
+      ))}
+    </div>
+  );
+}
+
+function ChevronDown() {
+  return (
+    <div className="relative size-[24px]" data-name="Chevron down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="Chevron down">
+          <path d="M6 9L12 15L18 9" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LinkImage9() {
+  return (
+    <div className="h-[50px] relative rounded-[12px] shrink-0 w-[151px]" data-name="Link → image">
+      <div className="flex flex-row items-center justify-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[9px] h-[50px] items-center justify-center px-[82px] py-[36px] relative w-[151px]">
+          <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#05073c] text-[17.719px] text-nowrap">
+            <p className="leading-[27px] whitespace-pre">View All</p>
+          </div>
+          <div className="flex h-[24px] items-center justify-center relative shrink-0 w-[24px]">
+            <div className="flex-none rotate-[270deg]">
+              <ChevronDown />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#e4e4e4] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
+
+function Frame1261155336() {
+  return (
+    <div className="absolute content-stretch flex gap-[24px] items-center left-[16px] top-[106px]">
+      <Frame48095487 />
+      <LinkImage9 />
+    </div>
+  );
+}
+
+function Frame1261155337() {
+  return (
+    <div className="bg-[#f2f2f2] mr-[-26px] relative rounded-[120px] shrink-0 size-[58px]">
+      <div className="overflow-clip relative size-[58px]">
+        <div className="absolute h-[36px] left-1/2 rounded-bl-[5px] rounded-tl-[5px] top-1/2 translate-x-[-50%] translate-y-[-50%] w-[30.449px]" data-name="image">
+          <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none rounded-bl-[5px] rounded-tl-[5px] size-full" src={imgImage} />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[120px]" />
+    </div>
+  );
+}
+
+function Frame1261155342() {
+  return (
+    <div className="absolute box-border content-stretch flex items-center left-[16px] pl-0 pr-[26px] py-0 top-[198px]">
+      {[...Array(5).keys()].map((_, i) => (
+        <Frame1261155337 key={i} />
+      ))}
+    </div>
+  );
+}
+
+function ChevronDown1() {
+  return (
+    <div className="relative size-[24px]" data-name="Chevron down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="Chevron down">
+          <path d="M6 9L12 15L18 9" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LinkImage10() {
+  return (
+    <div className="absolute h-[50px] left-[216px] rounded-[12px] top-[206px] w-[151px]" data-name="Link → image">
+      <div className="box-border content-stretch flex gap-[4px] h-[50px] items-center justify-center overflow-clip pl-[20px] pr-[16px] py-[16px] relative w-[151px]">
+        <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#1e1e1e] text-[17.719px] text-nowrap">
+          <p className="leading-[27px] whitespace-pre">50+ Offers</p>
+        </div>
+        <div className="flex h-[24px] items-center justify-center relative shrink-0 w-[24px]">
+          <div className="flex-none rotate-[270deg]">
+            <ChevronDown1 />
+          </div>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#e4e4e4] border-solid inset-0 pointer-events-none rounded-[12px]" />
+    </div>
+  );
+}
+
+function Frame1261155303() {
+  return (
+    <div className="absolute h-[315px] left-1/2 top-[136px] translate-x-[-50%] w-[1026px]">
+      <div className="h-[315px] overflow-clip relative w-[1026px]">
+        <Frame83 />
+        <Frame1261155336 />
+        <Frame1261155342 />
+        <LinkImage10 />
+      </div>
+      <div aria-hidden="true" className="absolute border-[0px_0px_1px] border-black border-dashed inset-0 pointer-events-none" />
+    </div>
+  );
+}
+
+function Menu() {
+  return (
+    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">{`Download `}</p>
+        <p className="mb-0">Help Center</p>
+        <p> </p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Why Travellers</p>
+        <p className="mb-0">Customer Stories</p>
+        <p>Instagram post</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Terms and Conditions</p>
+        <p className="mb-0">Privacy Policy</p>
+        <p className="mb-0">FAQs</p>
+        <p>Information</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">App Store</p>
+        <p>Google Play Store</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
+      </div>
+    </div>
+  );
+}
+
+function ICon() {
+  return (
+    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon1() {
+  return (
+    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon2() {
+  return (
+    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SocailIcon() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
+      <ICon />
+      <ICon1 />
+      <ICon2 />
+    </div>
+  );
+}
+
+function Img() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <div className="absolute h-[339px] left-1/2 overflow-clip top-[1243px] translate-x-[-50%] w-[1440px]" data-name="Footer">
+      <Menu />
+      <SocailIcon />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
+        <p className="leading-[26px]">Enjoy the touring with Salty</p>
+      </div>
+      <Img />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img1() {
+  return (
+    <div className="absolute bg-[#d9d9d9] h-[252px] left-[1698px] rounded-[20px] top-[2084px] w-[362px]" data-name="img">
+      <ImageSvgrepoCom />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute contents left-[1948px] top-[2439px]" data-name="Button">
+      <div className="absolute h-[37px] left-[1948px] rounded-[26px] top-[2439px] w-[100px]">
+        <div aria-hidden="true" className="absolute border border-[#2d3134] border-solid inset-0 pointer-events-none rounded-[26px]" />
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1964px] not-italic text-[14px] text-nowrap top-[2451px]">
+        <p className="leading-[14px] whitespace-pre">Book Now</p>
+      </div>
+    </div>
+  );
+}
+
+function Card8() {
+  return (
+    <div className="absolute contents left-[1686px] top-[2072px]" data-name="Card 8">
+      <div className="absolute bg-white h-[440px] left-[1686px] rounded-[16px] top-[2072px] w-[386px]">
+        <div aria-hidden="true" className="absolute border-2 border-solid border-white inset-0 pointer-events-none rounded-[16px]" />
+      </div>
+      <Img1 />
+      <Button />
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[0px] text-nowrap top-[2447px]">
+        <p className="leading-[20px] whitespace-pre">
+          <span className="text-[24px]">$99</span>
+          <span className="text-[#5b5f62] text-[24px]"> </span>
+          <span className="font-['Inter:Regular',_sans-serif] font-normal not-italic text-[#5b5f62] text-[16px]">/Person</span>
+        </p>
+      </div>
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[24px] text-nowrap top-[2360px]">
+        <p className="leading-[24px] whitespace-pre">Rome, Italy</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1710px] not-italic text-[#5b5f62] text-[14px] text-nowrap top-[2398px]">
+        <p className="leading-[14px] whitespace-pre">Mountain Hiking Tour</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155253() {
+  return (
+    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155252() {
+  return (
+    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
+        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Img2() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function LanguageSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="language_svgrepo.com">
+          <path d={svgPaths.p317063f1} fill="var(--fill-0, #2D3134)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function CartLargeMinimalisticSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="cart-large-minimalistic_svgrepo.com">
+          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame48095472() {
+  return (
+    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
+      <LanguageSvgrepoCom />
+      <CartLargeMinimalisticSvgrepoCom />
+    </div>
+  );
+}
+
+function Navigation() {
+  return (
+    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
+      <Frame1261155253 />
+      <Frame1261155252 />
+      <Img2 />
+      <Frame48095472 />
+    </div>
+  );
+}
+
+function ArrowLeft() {
+  return (
+    <div className="relative size-[54px]" data-name="Arrow left">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 54 54">
+        <g id="Arrow left">
+          <circle cx="27" cy="27" id="Ellipse 2616" r="26.5" stroke="var(--stroke-0, #2D3134)" />
+          <path d="M24 33L30 27L24 21" id="Vector 796" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SectionHeading() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start leading-[0] not-italic overflow-clip relative shrink-0 w-[592px]" data-name="Section heading">
+      <div className="css-9el0wq font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-[#2d3134] text-[48px] tracking-[-1.2px] w-full">
+        <p className="leading-[60px]">Download App to view your Pass</p>
+      </div>
+      <div className="css-sdralp font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[18px] text-gray-900 w-full">
+        <p className="leading-[28px]">Download the app to manage your projects, keep track of the progress and complete tasks without procastinating. Stay on track and complete on time!</p>
+      </div>
+    </div>
+  );
+}
+
+function Bg() {
+  return (
+    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
+      <g id="Bg">
+        <path d={svgPaths.p11d0cb00} fill="var(--fill-0, black)" id="Vector" />
+        <path d={svgPaths.p1ab2e500} fill="var(--fill-0, #A6A6A6)" id="Vector_2" />
+      </g>
+    </svg>
+  );
+}
+
+function Text() {
+  return (
+    <div className="absolute inset-[17.16%_6.8%_14.81%_30.4%]" data-name="Text">
+      <div className="absolute bottom-0 left-0 right-0 top-[-0.37%]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 85 29">
+          <g id="Text">
+            <g id="Vector">
+              <path d={svgPaths.p360ff200} fill="white" />
+              <path d={svgPaths.p2e09de00} fill="white" />
+              <path d={svgPaths.p2edcc080} fill="white" />
+              <path d={svgPaths.p146a6200} fill="white" />
+              <path d={svgPaths.p234bdb12} fill="white" />
+              <path d={svgPaths.p190f4c00} fill="white" />
+              <path d={svgPaths.p3f96e4c0} fill="white" />
+              <path d={svgPaths.p360ff200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p2e09de00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p2edcc080} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p146a6200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p234bdb12} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p190f4c00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+              <path d={svgPaths.p3f96e4c0} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
+            </g>
+            <path d={svgPaths.p949f00} fill="var(--fill-0, white)" id="Vector_2" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function GooglePlayLogo() {
+  return (
+    <div className="absolute inset-[17.83%_75.51%_17.82%_7.38%]" data-name="Google Play logo">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 26">
+        <g id="Google Play logo">
+          <path d={svgPaths.p3aebff00} fill="url(#paint0_linear_9181_882)" id="Vector" />
+          <path d={svgPaths.p1ae2b0c0} fill="url(#paint1_linear_9181_882)" id="Vector_2" />
+          <path d={svgPaths.p2ddae880} fill="url(#paint2_linear_9181_882)" id="Vector_3" />
+          <path d={svgPaths.p1b13c280} fill="url(#paint3_linear_9181_882)" id="Vector_4" />
+          <path d={svgPaths.p1b75f800} fill="var(--fill-0, black)" id="Vector_5" opacity="0.2" />
+          <path d={svgPaths.p26d43100} fill="var(--fill-0, black)" id="Vector_6" opacity="0.12" />
+          <path d={svgPaths.p25f97b00} fill="var(--fill-0, black)" id="Vector_7" opacity="0.12" />
+          <path d={svgPaths.p20fe0080} fill="var(--fill-0, white)" id="Vector_8" opacity="0.25" />
+        </g>
+        <defs>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_9181_882" x1="11.8308" x2="-4.95164" y1="1.57842" y2="18.3608">
+            <stop stopColor="#00A0FF" />
+            <stop offset="0.00657" stopColor="#00A1FF" />
+            <stop offset="0.2601" stopColor="#00BEFF" />
+            <stop offset="0.5122" stopColor="#00D2FF" />
+            <stop offset="0.7604" stopColor="#00DFFF" />
+            <stop offset="1" stopColor="#00E3FF" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint1_linear_9181_882" x1="23.8654" x2="-0.33149" y1="12.8702" y2="12.8702">
+            <stop stopColor="#FFE000" />
+            <stop offset="0.4087" stopColor="#FFBD00" />
+            <stop offset="0.7754" stopColor="#FFA500" />
+            <stop offset="1" stopColor="#FF9C00" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint2_linear_9181_882" x1="14.858" x2="-7.9003" y1="15.1648" y2="37.9231">
+            <stop stopColor="#FF3A44" />
+            <stop offset="1" stopColor="#C31162" />
+          </linearGradient>
+          <linearGradient gradientUnits="userSpaceOnUse" id="paint3_linear_9181_882" x1="-2.67164" x2="7.49088" y1="-6.95511" y2="3.20741">
+            <stop stopColor="#32A071" />
+            <stop offset="0.0685" stopColor="#2DA771" />
+            <stop offset="0.4762" stopColor="#15CF74" />
+            <stop offset="0.8009" stopColor="#06E775" />
+            <stop offset="1" stopColor="#00F076" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function StoreBadge() {
+  return (
+    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg />
+      <Text />
+      <GooglePlayLogo />
+    </div>
+  );
+}
+
+function Bg1() {
+  return (
+    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
+      <g id="Bg">
+        <path clipRule="evenodd" d={svgPaths.pd6ee900} fill="var(--fill-0, #A6A6A6)" fillRule="evenodd" id="Vector" />
+        <path d={svgPaths.p3394cd00} fill="var(--fill-0, black)" id="Vector_2" />
+      </g>
+    </svg>
+  );
+}
+
+function Group() {
+  return (
+    <div className="absolute inset-[21.8%_73.54%_23.76%_13.33%]" data-name="<Group>">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 18 22">
+        <g id="<Group>">
+          <path d={svgPaths.p1ba7a100} fill="var(--fill-0, white)" id="<Path>" />
+          <path d={svgPaths.p26de8970} fill="var(--fill-0, white)" id="<Path>_2" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Text1() {
+  return (
+    <div className="absolute inset-[21.09%_12.95%_16.27%_31.45%]" data-name="Text">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 76 26">
+        <g id="Text">
+          <g id="Vector">
+            <path d={svgPaths.p330e6600} fill="white" />
+            <path d={svgPaths.p140623c0} fill="white" />
+            <path d={svgPaths.p35419200} fill="white" />
+            <path d={svgPaths.p48005c0} fill="white" />
+            <path d={svgPaths.p21d6a400} fill="white" />
+            <path d={svgPaths.p3c536e80} fill="white" />
+            <path d={svgPaths.p3709a00} fill="white" />
+            <path d={svgPaths.p14978a80} fill="white" />
+          </g>
+          <g id="Vector_2">
+            <path d={svgPaths.pa6cfb80} fill="white" />
+            <path d={svgPaths.p1c846872} fill="white" />
+            <path d={svgPaths.p235e2a00} fill="white" />
+            <path d={svgPaths.p3c1952c0} fill="white" />
+            <path d={svgPaths.p3b676a80} fill="white" />
+            <path d={svgPaths.pd9336c0} fill="white" />
+            <path d={svgPaths.p22016470} fill="white" />
+            <path d={svgPaths.p7fb1900} fill="white" />
+            <path d={svgPaths.p35e78e00} fill="white" />
+            <path d={svgPaths.p28b0e180} fill="white" />
+            <path d={svgPaths.p4ac700} fill="white" />
+            <path d={svgPaths.p1fa9cb00} fill="white" />
+            <path d={svgPaths.p1865d740} fill="white" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function StoreBadge1() {
+  return (
+    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
+      <Bg1 />
+      <Group />
+      <Text1 />
+    </div>
+  );
+}
+
+function Badges() {
+  return (
+    <div className="content-stretch flex gap-[12px] items-start overflow-clip relative shrink-0" data-name="Badges">
+      <StoreBadge />
+      <StoreBadge1 />
+    </div>
+  );
+}
+
+function GetTheApp() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start overflow-clip relative shrink-0" data-name="Get the App">
+      <div className="css-sdralp font-['Inter:Medium',_sans-serif] font-medium leading-[0] not-italic relative shrink-0 text-[18px] text-gray-900 text-nowrap">
+        <p className="leading-[28px] whitespace-pre">Get the App</p>
+      </div>
+      <Badges />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[20px] items-start left-[135px] overflow-clip top-[561px]" data-name="Content">
+      <SectionHeading />
+      <div className="relative shrink-0 size-[150px]" data-name="image 583">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <img alt="" className="absolute h-[334.29%] left-[-9.8%] max-w-none top-[-9.96%] w-[334.37%]" src={imgImage583} />
+        </div>
+      </div>
+      <GetTheApp />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom1() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img3() {
+  return (
+    <div className="absolute bg-[#d9d9d9] h-[478px] left-[896px] top-[561px] w-[356px]" data-name="img">
+      <ImageSvgrepoCom1 />
+    </div>
+  );
+}
+
+export default function TravelLandingPage() {
+  return (
+    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
+      <Frame1261155303 />
+      <Footer />
+      <Card8 />
+      <Navigation />
+      <div className="absolute flex items-center justify-center left-[135px] size-[54px] top-[136px]">
+        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
+          <ArrowLeft />
+        </div>
+      </div>
+      <Content />
+      <Img3 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/TravelLandingPage-9183-2164.tsx b/src/imports/TravelLandingPage-9183-2164.tsx
new file mode 100644
index 0000000..f96719a
--- /dev/null
+++ b/src/imports/TravelLandingPage-9183-2164.tsx
@@ -0,0 +1,1026 @@
+import svgPaths from "./svg-tirbryj54p";
+import imgVt from "figma:asset/2a32b13e0ed94d79c4867062010cb1a848d72dc1.png";
+import imgVt1 from "figma:asset/f6c7124d0a9ca2463b53b6a370a48c4c0bbba57d.png";
+import imgVt2 from "figma:asset/ef6f48b2b60d04fc8723d03a71f9dca2b6067704.png";
+import imgVt3 from "figma:asset/a384e2e7712b48e54fadc7594244c40162ad4152.png";
+import imgVt4 from "figma:asset/dda914a03c57961a1affac724d29681004341456.png";
+import imgVt5 from "figma:asset/129015504c88093e4b54dc6e8c91b3997d9ccc5b.png";
+import imgVt6 from "figma:asset/1512fbc49cf628796adeccca6752a29d1e61ecf4.png";
+import imgVt7 from "figma:asset/4af0d5b295cf8650b4caa23233d3dcf539032a73.png";
+import imgVt8 from "figma:asset/1d756a3ad6ee9098afb373e07e18ddd36571954c.png";
+import imgVt9 from "figma:asset/d37e3e3f9d3f32fcf86dddd187aa6fd48832406a.png";
+import imgVt10 from "figma:asset/3c5d5a12a7b44ab1b1ac2db7faa54270de100d86.png";
+import imgSpotlightPoi3Png from "figma:asset/a3956d2491d1e44ca71fc856b229d3e22523f828.png";
+import imgButtonTransparentPng from "figma:asset/a812c79b0d125e4946b33446eae0353f518627e2.png";
+import imgM1Png from "figma:asset/eaf15191e9a315d2d4b384ffcb22910687c3d328.png";
+
+function Menu() {
+  return (
+    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">{`Download `}</p>
+        <p className="mb-0">Help Center</p>
+        <p> </p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Why Travellers</p>
+        <p className="mb-0">Customer Stories</p>
+        <p>Instagram post</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Terms and Conditions</p>
+        <p className="mb-0">Privacy Policy</p>
+        <p className="mb-0">FAQs</p>
+        <p>Information</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">App Store</p>
+        <p>Google Play Store</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
+      </div>
+    </div>
+  );
+}
+
+function ICon() {
+  return (
+    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon1() {
+  return (
+    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon2() {
+  return (
+    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SocailIcon() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
+      <ICon />
+      <ICon1 />
+      <ICon2 />
+    </div>
+  );
+}
+
+function Img() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <div className="absolute h-[339px] left-0 overflow-clip top-[3421px] w-[1440px]" data-name="Footer">
+      <Menu />
+      <SocailIcon />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
+        <p className="leading-[26px]">Enjoy the touring with Salty</p>
+      </div>
+      <Img />
+    </div>
+  );
+}
+
+function Frame1261155253() {
+  return (
+    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155252() {
+  return (
+    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
+        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Img1() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function LanguageSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="language_svgrepo.com">
+          <path d={svgPaths.p317063f1} fill="var(--fill-0, #2D3134)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function CartLargeMinimalisticSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="cart-large-minimalistic_svgrepo.com">
+          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame48095472() {
+  return (
+    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
+      <LanguageSvgrepoCom />
+      <CartLargeMinimalisticSvgrepoCom />
+    </div>
+  );
+}
+
+function Navigation() {
+  return (
+    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
+      <Frame1261155253 />
+      <Frame1261155252 />
+      <Img1 />
+      <Frame48095472 />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute bg-[rgba(91,95,98,0.12)] h-[40px] left-[15px] rounded-[200px] top-[10px] w-[96.61px]" data-name="Button">
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[18px] justify-center leading-[0] not-italic text-[13.672px] text-black text-center top-[20px] translate-x-[-50%] translate-y-[-50%] w-[64.81px]" style={{ left: "calc(50% + 0.1px)" }}>
+        <p className="leading-[28px]">Bestseller</p>
+      </div>
+    </div>
+  );
+}
+
+function Button1() {
+  return (
+    <div className="absolute bg-neutral-100 h-[40px] left-[120px] rounded-[200px] top-[10px] w-[145px]" data-name="Button">
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[18px] justify-center leading-[0] not-italic text-[13.781px] text-black text-center top-[20px] translate-x-[-50%] translate-y-[-50%] w-[113.25px]" style={{ left: "calc(50% + 0.125px)" }}>
+        <p className="leading-[28px]">Free cancellation</p>
+      </div>
+    </div>
+  );
+}
+
+function Button2() {
+  return (
+    <div className="absolute bg-neutral-100 h-[40px] left-[275px] rounded-[200px] top-[10px] w-[159px]" data-name="Button">
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic text-[13.781px] text-black text-center text-nowrap top-[20px] translate-x-[-50%] translate-y-[-50%]" style={{ left: "calc(50% - 1px)" }}>
+        <p className="leading-[28px] whitespace-pre">Reservation Required</p>
+      </div>
+    </div>
+  );
+}
+
+function DivColAuto() {
+  return (
+    <div className="absolute bottom-[3509px] h-[204px] left-[135px] w-[788px]" data-name="div.col-auto">
+      <Button />
+      <Button1 />
+      <Button2 />
+      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[108px] justify-center leading-[56px] left-[15px] not-italic text-[#2d3134] text-[39.688px] top-[126px] translate-y-[-50%] w-[758.37px]">
+        <p className="mb-0">Phi Phi Islands Adventure Day Trip with</p>
+        <p>Seaview Lunch by V. Marine Tour</p>
+      </div>
+    </div>
+  );
+}
+
+function Image() {
+  return <div className="absolute bg-[#c4c4c4] bottom-0 left-0 right-[452px] top-0" data-name="image" />;
+}
+
+function Image1() {
+  return <div className="absolute bg-[#c4c4c4] bottom-[260px] left-[733px] right-[-10px] top-0" data-name="image" />;
+}
+
+function Image2() {
+  return <div className="absolute bg-[#c4c4c4] bottom-0 left-[733px] right-[187px] top-[260px]" data-name="image" />;
+}
+
+function Image3() {
+  return <div className="absolute bg-[#c4c4c4] bottom-0 left-[993px] right-[-77px] top-[260px]" data-name="image" />;
+}
+
+function DivTourSingleGrid() {
+  return (
+    <div className="absolute h-[510px] left-[135px] overflow-clip right-[135px] top-[373px]" data-name="div.tourSingleGrid">
+      <Image />
+      <Image1 />
+      <Image2 />
+      <Image3 />
+    </div>
+  );
+}
+
+function DivFlexCenter() {
+  return (
+    <div className="absolute bg-[#c8c8c8] left-[15px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
+      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
+        <p className="leading-[20px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function Group1() {
+  return (
+    <div className="absolute contents left-[15px] top-[15.38px]">
+      <DivFlexCenter />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[75px] not-italic text-[#2d3134] text-[14.766px] top-[29.17px] translate-y-[-50%] w-[59.61px]">
+        <p className="leading-[24px]">Duration</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[75px] not-italic text-[#717171] text-[13.453px] top-[52.17px] translate-y-[-50%] w-[42.79px]">
+        <p className="leading-[22.4px]">3 days</p>
+      </div>
+    </div>
+  );
+}
+
+function DivFlexCenter1() {
+  return (
+    <div className="absolute bg-[#c8c8c8] left-[235px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
+      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
+        <p className="leading-[20px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div className="absolute contents left-[235px] top-[15.38px]">
+      <DivFlexCenter1 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[295px] not-italic text-[#2d3134] text-[14.531px] top-[29.17px] translate-y-[-50%] w-[75.4px]">
+        <p className="leading-[24px]">Group Size</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[295px] not-italic text-[#717171] text-[13.672px] top-[52.17px] translate-y-[-50%] w-[62.73px]">
+        <p className="leading-[22.4px]">10 people</p>
+      </div>
+    </div>
+  );
+}
+
+function DivFlexCenter2() {
+  return (
+    <div className="absolute bg-[#c8c8c8] left-[455px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
+      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
+        <p className="leading-[20px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function Group3() {
+  return (
+    <div className="absolute contents left-[455px] top-[15.38px]">
+      <DivFlexCenter2 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[515px] not-italic text-[#2d3134] text-[14.297px] top-[29.17px] translate-y-[-50%] w-[34.29px]">
+        <p className="leading-[24px]">Ages</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[515px] not-italic text-[#717171] text-[13.672px] top-[52.17px] translate-y-[-50%] w-[61.97px]">
+        <p className="leading-[22.4px]">18-99 yrs</p>
+      </div>
+    </div>
+  );
+}
+
+function DivFlexCenter3() {
+  return (
+    <div className="absolute bg-[#c8c8c8] left-[675px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
+      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
+        <p className="leading-[20px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function Group4() {
+  return (
+    <div className="absolute contents left-[675px] top-[15.38px]">
+      <DivFlexCenter3 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[735px] not-italic text-[#2d3134] text-[14.297px] top-[29.17px] translate-y-[-50%] w-[74.12px]">
+        <p className="leading-[24px]">Languages</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[735px] not-italic text-[#717171] text-[13.344px] top-[52.17px] translate-y-[-50%] w-[113.78px]">
+        <p className="leading-[22.4px]">English, Japanese</p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2671.5px] left-[15px] rounded-[24px] top-[699.5px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck1() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2600.25px] left-[15px] rounded-[24px] top-[770.75px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck2() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2557.12px] left-[15px] rounded-[24px] top-[813.88px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck3() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2485.87px] left-[15px] rounded-[24px] top-[885.13px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck4() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2442.75px] left-[15px] rounded-[24px] top-[928.25px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCheck5() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2399.62px] left-[15px] rounded-[24px] top-[971.38px] w-[24px]" data-name="i.icon-check">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function ChevronDown() {
+  return (
+    <div className="relative size-[16px]" data-name="Chevron down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
+        <g id="Chevron down">
+          <path d="M4 6L8 10L12 6" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame1261155309() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center relative shrink-0 w-full">
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] text-nowrap">
+        <ul className="css-ed5n1g">
+          <li className="leading-[28.13px] list-disc ms-[21.972px]">
+            <span>{`Via `}</span>
+            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">CityCards Portal</span>
+          </li>
+        </ul>
+      </div>
+      <div className="flex items-center justify-center relative shrink-0">
+        <div className="flex-none scale-y-[-100%]">
+          <ChevronDown />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155308() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[6px] items-start left-[16px] top-[1161px] w-[349px]">
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] w-full">
+        <ul className="css-ed5n1g">
+          <li className="leading-[28.13px] list-disc ms-[21.972px]">
+            <span>{`By Calling on `}</span>
+            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">022 2645675</span>
+          </li>
+        </ul>
+      </div>
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] w-full">
+        <ul className="css-ed5n1g">
+          <li className="leading-[28.13px] list-disc ms-[21.972px]">
+            <span>{`Email your details at `}</span>
+            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">islands.booking@mail.com</span>
+          </li>
+        </ul>
+      </div>
+      <Frame1261155309 />
+    </div>
+  );
+}
+
+function IIconCross() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2671.5px] left-[505px] rounded-[24px] top-[699.5px] w-[24px]" data-name="i.icon-cross">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCross1() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2628.37px] left-[505px] rounded-[24px] top-[742.63px] w-[24px]" data-name="i.icon-cross">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function IIconCross2() {
+  return (
+    <div className="absolute bg-[#dbdbdb] bottom-[2585.25px] left-[505px] rounded-[24px] top-[785.75px] w-[24px]" data-name="i.icon-cross">
+      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
+        <p className="leading-[10px]"></p>
+      </div>
+    </div>
+  );
+}
+
+function DivRoadmapContent() {
+  return <div className="absolute h-[84.38px] left-[53px] top-[1360.5px] w-[580px]" data-name="div.roadmap__content" />;
+}
+
+function Vt() {
+  return (
+    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt} />
+      </div>
+    </div>
+  );
+}
+
+function Vt1() {
+  return (
+    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt1} />
+      </div>
+    </div>
+  );
+}
+
+function Vt2() {
+  return (
+    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt2} />
+      </div>
+    </div>
+  );
+}
+
+function Vt3() {
+  return (
+    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt3} />
+      </div>
+    </div>
+  );
+}
+
+function Vt4() {
+  return (
+    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt4} />
+      </div>
+    </div>
+  );
+}
+
+function Vt5() {
+  return (
+    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt5} />
+      </div>
+    </div>
+  );
+}
+
+function Vt6() {
+  return (
+    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt6} />
+      </div>
+    </div>
+  );
+}
+
+function Vt7() {
+  return (
+    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt7} />
+      </div>
+    </div>
+  );
+}
+
+function Vt8() {
+  return (
+    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt8} />
+      </div>
+    </div>
+  );
+}
+
+function Vt9() {
+  return (
+    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt9} />
+      </div>
+    </div>
+  );
+}
+
+function Vt10() {
+  return (
+    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt4} />
+      </div>
+    </div>
+  );
+}
+
+function Vt11() {
+  return (
+    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt10} />
+      </div>
+    </div>
+  );
+}
+
+function SpotlightPoi3Png() {
+  return (
+    <div className="absolute h-[37px] left-[160px] top-[149px] w-[26px]" data-name="spotlight-poi3.png">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgSpotlightPoi3Png} />
+      </div>
+    </div>
+  );
+}
+
+function SpotlightPoi3Png1() {
+  return (
+    <div className="absolute h-[37px] left-[426px] top-[213px] w-[26px]" data-name="spotlight-poi3.png">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgSpotlightPoi3Png} />
+      </div>
+    </div>
+  );
+}
+
+function ButtonTransparentPng() {
+  return (
+    <div className="absolute h-[37px] left-[160px] translate-y-[-50%] w-[26px]" data-name="Button → transparent.png" style={{ top: "calc(50% - 107.5px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgButtonTransparentPng} />
+      </div>
+    </div>
+  );
+}
+
+function ButtonTransparentPng1() {
+  return (
+    <div className="absolute h-[37px] left-[426px] translate-y-[-50%] w-[26px]" data-name="Button → transparent.png" style={{ top: "calc(50% - 43.5px)" }}>
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgButtonTransparentPng} />
+      </div>
+    </div>
+  );
+}
+
+function M1Png() {
+  return (
+    <div className="absolute h-[52px] left-[649.72px] top-[65.29px] w-[53px]" data-name="m1.png">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgM1Png} />
+      </div>
+    </div>
+  );
+}
+
+function M1Png1() {
+  return (
+    <div className="absolute h-[52px] left-[557.73px] top-[51.79px] w-[53px]" data-name="m1.png">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgM1Png} />
+      </div>
+    </div>
+  );
+}
+
+function Div() {
+  return (
+    <div className="absolute bg-[#e5e3df] inset-0" data-name="div">
+      <Vt />
+      <Vt1 />
+      <Vt2 />
+      <Vt3 />
+      <Vt4 />
+      <Vt5 />
+      <Vt6 />
+      <Vt7 />
+      <Vt8 />
+      <Vt9 />
+      <Vt10 />
+      <Vt11 />
+      <SpotlightPoi3Png />
+      <SpotlightPoi3Png1 />
+      <ButtonTransparentPng />
+      <ButtonTransparentPng1 />
+      <M1Png />
+      <div className="absolute flex flex-col font-['Arial:Bold',_sans-serif] h-[53px] justify-center leading-[0] not-italic text-[11px] text-black text-center top-[91.79px] translate-x-[-50%] translate-y-[-50%] w-[6.458px]" style={{ left: "calc(50% + 251.389px)" }}>
+        <p className="leading-[53px]">2</p>
+      </div>
+      <M1Png1 />
+      <div className="absolute flex flex-col font-['Arial:Bold',_sans-serif] h-[53px] justify-center leading-[0] not-italic text-[11px] text-black text-center top-[78.29px] translate-x-[-50%] translate-y-[-50%] w-[6.458px]" style={{ left: "calc(50% + 159.399px)" }}>
+        <p className="leading-[53px]">2</p>
+      </div>
+    </div>
+  );
+}
+
+function Div1() {
+  return (
+    <div className="absolute inset-[1879.88px_15px_965.12px_15px] overflow-clip" data-name="div">
+      <Div />
+    </div>
+  );
+}
+
+function Calendar() {
+  return (
+    <div className="absolute contents left-[15px] top-[1279px]" data-name="Calendar">
+      <div className="absolute bg-white h-[367px] left-[15px] rounded-[9px] top-[1279px] w-[393px]" />
+      <div className="absolute font-['Poppins:Bold',_sans-serif] leading-[0] left-[49px] not-italic text-[20px] text-black text-nowrap top-[1307px] tracking-[0.38px]">
+        <p className="leading-[24px] whitespace-pre">Jan 2024</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[72.21px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Mon</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[165.07px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Wed</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[118.64px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Tue</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[211.5px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Thu</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[257.93px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Fri</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[304.36px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Sat</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[351.29px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
+        <p className="leading-[16px] whitespace-pre">Sun</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">28</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">29</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">30</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">31</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">1</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">2</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">3</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">4</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">5</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">6</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">7</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">8</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">9</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">10</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">11</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">12</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">13</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">14</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">15</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">16</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">17</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">18</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">19</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">20</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">21</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">22</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">23</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">24</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">25</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">26</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">27</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">28</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">29</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">30</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">31</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">1</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">2</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">3</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">4</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">5</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">6</p>
+      </div>
+      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
+        <p className="leading-[21px]">7</p>
+      </div>
+    </div>
+  );
+}
+
+function Pay() {
+  return (
+    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[15px] pl-[8px] pr-[12px] py-[14px] rounded-[38px] top-[1665px] w-[199px]" data-name="Pay">
+      <div className="font-['Inter:Bold',_sans-serif] font-bold leading-[0] not-italic relative shrink-0 text-[#f3f3f3] text-[16px] text-nowrap">
+        <p className="leading-[12px] whitespace-pre">Confirm Booking</p>
+      </div>
+    </div>
+  );
+}
+
+function Section() {
+  return (
+    <div className="absolute inset-[942px_408px_-474px_152px]" data-name="Section">
+      <Group1 />
+      <Group2 />
+      <Group3 />
+      <Group4 />
+      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[45px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[29.18px] top-[147.88px] translate-y-[-50%] w-[208.9px]">
+        <p className="leading-[45px]">Tour Overview</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[104.37px] justify-center leading-[28.13px] left-[15px] not-italic text-[#2d3134] text-[14.414px] top-[246.56px] translate-y-[-50%] w-[844.72px]">
+        <p className="mb-0">The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day.</p>
+        <p className="mb-0">Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and</p>
+        <p className="mb-0">{`Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup`}</p>
+        <p>and drop-off all included.</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[30px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[19.219px] top-[337.88px] translate-y-[-50%] w-[139.59px]">
+        <p className="leading-[30px]">Tour Highlights</p>
+      </div>
+      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1310.91px)" }} />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[386.94px] translate-y-[-50%] w-[459.31px]">
+        <p className="leading-[28.13px]">Experience the thrill of a speedboat to the stunning Phi Phi Islands</p>
+      </div>
+      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1282.78px)" }} />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[415.06px] translate-y-[-50%] w-[402.47px]">
+        <p className="leading-[28.13px]">Be amazed by the variety of marine life in the archepelago</p>
+      </div>
+      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1254.66px)" }} />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.531px] top-[443.19px] translate-y-[-50%] w-[536.48px]">
+        <p className="leading-[28.13px]">Enjoy relaxing in paradise with white sand beaches and azure turquoise water</p>
+      </div>
+      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1226.53px)" }} />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[471.31px] translate-y-[-50%] w-[353.56px]">
+        <p className="leading-[28.13px]">Feel the comfort of a tour limited to 35 passengers</p>
+      </div>
+      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1198.41px)" }} />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.531px] top-[499.44px] translate-y-[-50%] w-[411.9px]">
+        <p className="leading-[28.13px]">Catch a glimpse of the wild monkeys around Monkey Beach</p>
+      </div>
+      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[573.5px]" data-name="div.line" />
+      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[45px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[30px] top-[657px] translate-y-[-50%] w-[237.42px]">
+        <p className="leading-[45px]">{`What's included`}</p>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[30px] text-nowrap top-[1123.5px] translate-y-[-50%]">
+        <p className="leading-[45px] whitespace-pre">How to make a booking?</p>
+      </div>
+      <IIconCheck />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[48.13px] justify-center leading-[28.13px] left-[54px] not-italic text-[#2d3134] text-[14.414px] top-[727.57px] translate-y-[-50%] w-[296px]">
+        <p className="mb-0">Beverages, drinking water, morning tea and</p>
+        <p>buffet lunch</p>
+      </div>
+      <IIconCheck1 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.531px] top-[784.75px] translate-y-[-50%] w-[77.98px]">
+        <p className="leading-[28.13px]">Local taxes</p>
+      </div>
+      <IIconCheck2 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[48.12px] justify-center leading-[28.13px] left-[54px] not-italic text-[#2d3134] text-[14.883px] top-[841.94px] translate-y-[-50%] w-[316.51px]">
+        <p className="mb-0">Hotel pickup and drop-off by air-conditioned</p>
+        <p>minivan</p>
+      </div>
+      <IIconCheck3 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.648px] top-[899.13px] translate-y-[-50%] w-[238.11px]">
+        <p className="leading-[28.13px]">InsuranceTransfer to a private pier</p>
+      </div>
+      <IIconCheck4 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.531px] top-[942.25px] translate-y-[-50%] w-[74.59px]">
+        <p className="leading-[28.13px]">Soft drinks</p>
+      </div>
+      <IIconCheck5 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.648px] top-[985.38px] translate-y-[-50%] w-[75.79px]">
+        <p className="leading-[28.13px]">Tour Guide</p>
+      </div>
+      <Frame1261155308 />
+      <IIconCross />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.063px] top-[713.5px] translate-y-[-50%] w-[38.9px]">
+        <p className="leading-[28.13px]">Towel</p>
+      </div>
+      <IIconCross1 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.414px] top-[756.63px] translate-y-[-50%] w-[29.14px]">
+        <p className="leading-[28.13px]">Tips</p>
+      </div>
+      <IIconCross2 />
+      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.531px] top-[799.75px] translate-y-[-50%] w-[139.17px]">
+        <p className="leading-[28.13px]">Alcoholic Beverages</p>
+      </div>
+      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[1059.5px]" data-name="div.line" />
+      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[29.414px] text-nowrap top-[1827.38px] translate-y-[-50%]">
+        <p className="leading-[45px] whitespace-pre">Location on map</p>
+      </div>
+      <DivRoadmapContent />
+      <Div1 />
+      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[2489.88px]" data-name="div.line" />
+      <Calendar />
+      <Pay />
+    </div>
+  );
+}
+
+export default function TravelLandingPage() {
+  return (
+    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
+      <Footer />
+      <Navigation />
+      <DivColAuto />
+      <DivTourSingleGrid />
+      <Section />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/TravelLandingPage.tsx b/src/imports/TravelLandingPage.tsx
new file mode 100644
index 0000000..18c7ab6
--- /dev/null
+++ b/src/imports/TravelLandingPage.tsx
@@ -0,0 +1,1082 @@
+import svgPaths from "./svg-afhvgvqd7l";
+
+function Frame121() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0">
+      <div className="flex flex-col font-['Inter:Semi_Bold',_sans-serif] font-semibold h-[48px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[24px] tracking-[-0.48px] w-[179px]">
+        <p className="leading-[28px]">Order Summary</p>
+      </div>
+      <div className="h-0 relative shrink-0 w-[476px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
+            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame73() {
+  return (
+    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium items-center justify-between leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-full">
+      <div className="flex flex-col justify-center relative shrink-0 text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Melbourne- Unlimited Card</p>
+      </div>
+      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[68px]">
+        <p className="leading-[22px]">$49.80</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155295() {
+  return (
+    <div className="content-stretch flex gap-[8px] items-center relative shrink-0">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">2 Days</p>
+      </div>
+      <div className="relative shrink-0 size-[3px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
+          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
+        </svg>
+      </div>
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">Adults-3</p>
+      </div>
+      <div className="relative shrink-0 size-[3px]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
+          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
+        </svg>
+      </div>
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
+        <p className="leading-[normal] whitespace-pre">Kids-3</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame74() {
+  return (
+    <div className="relative shrink-0 w-full">
+      <div className="flex flex-row items-center relative size-full">
+        <div className="box-border content-stretch flex items-center justify-between pl-px pr-[8px] py-0 relative w-full">
+          <Frame1261155295 />
+          <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[25px] justify-center leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[51px]">
+            <p className="leading-[12px]">Qty: 1</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame75() {
+  return (
+    <div className="basis-0 content-stretch flex flex-col gap-[4px] grow items-start min-h-px min-w-px relative shrink-0">
+      <Frame73 />
+      <Frame74 />
+    </div>
+  );
+}
+
+function Frame76() {
+  return (
+    <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full">
+      <Frame75 />
+    </div>
+  );
+}
+
+function Frame83() {
+  return (
+    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-[476px]">
+      <Frame76 />
+    </div>
+  );
+}
+
+function Frame68() {
+  return (
+    <div className="bg-white box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-[192px] py-[14px] relative rounded-[4px] shrink-0">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] text-nowrap">
+        <p className="leading-[18px] whitespace-pre">Gift or discount code</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame69() {
+  return (
+    <div className="bg-[#acacac] box-border content-stretch flex gap-[10px] items-center justify-center px-[23px] py-[13px] relative rounded-[4px] shrink-0">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[20px] justify-center leading-[0] not-italic relative shrink-0 text-[#f3f3f3] text-[16px] w-[46px]">
+        <p className="leading-[12px]">Apply</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame70() {
+  return (
+    <div className="content-stretch flex gap-[16px] items-start relative shrink-0">
+      <Frame68 />
+      <Frame69 />
+    </div>
+  );
+}
+
+function Frame82() {
+  return (
+    <div className="content-stretch flex flex-col gap-[36px] items-start relative shrink-0">
+      <div className="h-0 relative shrink-0 w-[476px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
+            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
+          </svg>
+        </div>
+      </div>
+      <Frame70 />
+    </div>
+  );
+}
+
+function Frame71() {
+  return (
+    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium gap-[346px] items-start leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[16px]">
+      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[70px]">
+        <p className="leading-[12px]">Subtotal</p>
+      </div>
+      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[60px]">
+        <p className="leading-[12px]">$49.80</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame72() {
+  return (
+    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium gap-[346px] items-start leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[16px]">
+      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[70px]">
+        <p className="leading-[12px]">Discount</p>
+      </div>
+      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[60px]">
+        <p className="leading-[12px]">-$7.20</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame77() {
+  return (
+    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
+      <Frame71 />
+      <Frame72 />
+    </div>
+  );
+}
+
+function Frame81() {
+  return (
+    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0">
+      <div className="h-0 relative shrink-0 w-[476px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
+            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
+          </svg>
+        </div>
+      </div>
+      <Frame77 />
+    </div>
+  );
+}
+
+function Frame78() {
+  return (
+    <div className="content-stretch flex flex-col gap-[4px] items-start relative shrink-0">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[22px] justify-center relative shrink-0 text-[#0a0d13] text-[16px] w-[38px]">
+        <p className="leading-[12px]">Total</p>
+      </div>
+      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[22px] justify-center relative shrink-0 text-[#acacac] text-[14px] w-[166px]">
+        <p className="leading-[22px]">Including $2.24 in taxes</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame79() {
+  return (
+    <div className="content-stretch flex gap-[183px] items-start leading-[0] not-italic relative shrink-0">
+      <Frame78 />
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[55px] justify-center relative shrink-0 text-[#0a0d13] text-[36px] w-[127px]">
+        <p className="leading-[18px]">$42.60</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame80() {
+  return (
+    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0">
+      <div className="h-0 relative shrink-0 w-[476px]">
+        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
+            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
+          </svg>
+        </div>
+      </div>
+      <Frame79 />
+    </div>
+  );
+}
+
+function Frame84() {
+  return (
+    <div className="absolute box-border content-stretch flex flex-col gap-[36px] items-start left-[18px] p-[48px] top-[75px]">
+      <Frame121 />
+      <Frame83 />
+      <Frame82 />
+      <Frame81 />
+      <Frame80 />
+    </div>
+  );
+}
+
+function OrderSummary() {
+  return (
+    <div className="absolute h-[1024px] left-[720px] top-0 w-[720px]" data-name="Order summary">
+      <div className="absolute bg-[#f9fafa] h-[1024px] left-0 top-0 w-[720px]">
+        <div aria-hidden="true" className="absolute border border-[#d9d9d9] border-solid inset-0 pointer-events-none" />
+      </div>
+      <Frame84 />
+    </div>
+  );
+}
+
+function Menu() {
+  return (
+    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">{`Download `}</p>
+        <p className="mb-0">Help Center</p>
+        <p> </p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Why Travellers</p>
+        <p className="mb-0">Customer Stories</p>
+        <p>Instagram post</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">Terms and Conditions</p>
+        <p className="mb-0">Privacy Policy</p>
+        <p className="mb-0">FAQs</p>
+        <p>Information</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
+        <p className="mb-0">App Store</p>
+        <p>Google Play Store</p>
+      </div>
+      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
+        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
+      </div>
+    </div>
+  );
+}
+
+function ICon() {
+  return (
+    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon1() {
+  return (
+    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ICon2() {
+  return (
+    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="ICon">
+          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
+          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SocailIcon() {
+  return (
+    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
+      <ICon />
+      <ICon1 />
+      <ICon2 />
+    </div>
+  );
+}
+
+function Img() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <div className="absolute h-[339px] left-1/2 overflow-clip top-[2173px] translate-x-[-50%] w-[1440px]" data-name="Footer">
+      <Menu />
+      <SocailIcon />
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
+        <p className="leading-[26px]">Enjoy the touring with Salty</p>
+      </div>
+      <Img />
+    </div>
+  );
+}
+
+function ImageSvgrepoCom() {
+  return (
+    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g id="image_svgrepo.com">
+          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Img1() {
+  return (
+    <div className="absolute bg-[#d9d9d9] h-[252px] left-[1698px] rounded-[20px] top-[2084px] w-[362px]" data-name="img">
+      <ImageSvgrepoCom />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute contents left-[1948px] top-[2439px]" data-name="Button">
+      <div className="absolute h-[37px] left-[1948px] rounded-[26px] top-[2439px] w-[100px]">
+        <div aria-hidden="true" className="absolute border border-[#2d3134] border-solid inset-0 pointer-events-none rounded-[26px]" />
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1964px] not-italic text-[14px] text-nowrap top-[2451px]">
+        <p className="leading-[14px] whitespace-pre">Book Now</p>
+      </div>
+    </div>
+  );
+}
+
+function Card8() {
+  return (
+    <div className="absolute contents left-[1686px] top-[2072px]" data-name="Card 8">
+      <div className="absolute bg-white h-[440px] left-[1686px] rounded-[16px] top-[2072px] w-[386px]">
+        <div aria-hidden="true" className="absolute border-2 border-solid border-white inset-0 pointer-events-none rounded-[16px]" />
+      </div>
+      <Img1 />
+      <Button />
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[0px] text-nowrap top-[2447px]">
+        <p className="leading-[20px] whitespace-pre">
+          <span className="text-[24px]">$99</span>
+          <span className="text-[#5b5f62] text-[24px]"> </span>
+          <span className="font-['Inter:Regular',_sans-serif] font-normal not-italic text-[#5b5f62] text-[16px]">/Person</span>
+        </p>
+      </div>
+      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[24px] text-nowrap top-[2360px]">
+        <p className="leading-[24px] whitespace-pre">Rome, Italy</p>
+      </div>
+      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1710px] not-italic text-[#5b5f62] text-[14px] text-nowrap top-[2398px]">
+        <p className="leading-[14px] whitespace-pre">Mountain Hiking Tour</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155253() {
+  return (
+    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
+      </div>
+      <div className="relative shrink-0">
+        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155252() {
+  return (
+    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
+      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
+        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
+      </div>
+    </div>
+  );
+}
+
+function Img2() {
+  return (
+    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
+      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
+        <p className="leading-[20px] whitespace-pre">Logo</p>
+      </div>
+    </div>
+  );
+}
+
+function LanguageSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="language_svgrepo.com">
+          <path d={svgPaths.p317063f1} fill="var(--fill-0, #2D3134)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function CartLargeMinimalisticSvgrepoCom() {
+  return (
+    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
+        <g id="cart-large-minimalistic_svgrepo.com">
+          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
+          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Frame48095472() {
+  return (
+    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
+      <LanguageSvgrepoCom />
+      <CartLargeMinimalisticSvgrepoCom />
+    </div>
+  );
+}
+
+function Navigation() {
+  return (
+    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
+      <Frame1261155253 />
+      <Frame1261155252 />
+      <Img2 />
+      <Frame48095472 />
+    </div>
+  );
+}
+
+function Frame6() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[16px] w-[460px]">
+            <p className="leading-[22px]">Frank</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame67() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[356px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
+        <p className="leading-[22px]">First Name</p>
+      </div>
+      <Frame6 />
+    </div>
+  );
+}
+
+function Frame7() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[16px] w-[460px]">
+            <p className="leading-[22px]">Adam S</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame85() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[460px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
+        <p className="leading-[22px]">Last Name</p>
+      </div>
+      <Frame7 />
+    </div>
+  );
+}
+
+function Frame8() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start leading-[0] not-italic pl-[16px] pr-[12px] py-[12px] relative text-[16px] w-full">
+          <div className="basis-0 font-['Inter:Regular',_sans-serif] font-normal grow min-h-px min-w-px relative shrink-0 text-[#2d3134]">
+            <p className="leading-[22px]">frank2023.mail.com</p>
+          </div>
+          <div className="font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-black text-nowrap">
+            <p className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid leading-[22px] underline whitespace-pre">Verify</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame61() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[564px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
+        <p className="leading-[22px]">Email Address</p>
+      </div>
+      <Frame8 />
+    </div>
+  );
+}
+
+function Frame9() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
+            <p className="leading-[22px]">Enter mobile number</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame62() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[668px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
+        <p className="leading-[22px]">Phone Number</p>
+      </div>
+      <Frame9 />
+    </div>
+  );
+}
+
+function Frame10() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
+            <p className="leading-[22px]">DD/MM/YYYY</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame63() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[772px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Select Travel date</p>
+      </div>
+      <Frame10 />
+    </div>
+  );
+}
+
+function Frame12() {
+  return (
+    <div className="relative rounded-[4px] shrink-0 w-full">
+      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
+      <div className="relative size-full">
+        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
+          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
+            <p className="leading-[22px]">Enter Address</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Frame64() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] opacity-60 top-[963px] w-[527px]">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Search Address</p>
+      </div>
+      <Frame12 />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
+      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[24px] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
+        <p className="mb-[16px]">Address</p>
+        <p> </p>
+      </div>
+    </div>
+  );
+}
+
+function Input() {
+  return (
+    <div className="relative rounded-[8px] shrink-0 w-full" data-name="Input">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[8px] items-center px-[16px] py-[11px] relative w-full">
+          <Content />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
+    </div>
+  );
+}
+
+function InputWithLabel() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Billing address 1</p>
+      </div>
+      <Input />
+    </div>
+  );
+}
+
+function InputFieldBase() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
+      <InputWithLabel />
+    </div>
+  );
+}
+
+function Input1() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="Input">
+      <InputFieldBase />
+    </div>
+  );
+}
+
+function Content1() {
+  return (
+    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
+      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
+        <p className="leading-[24px]">Enter City</p>
+      </div>
+    </div>
+  );
+}
+
+function Input2() {
+  return (
+    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
+          <Content1 />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
+    </div>
+  );
+}
+
+function InputWithLabel1() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">City</p>
+      </div>
+      <Input2 />
+    </div>
+  );
+}
+
+function InputFieldBase1() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
+      <InputWithLabel1 />
+    </div>
+  );
+}
+
+function Input3() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
+      <InputFieldBase1 />
+    </div>
+  );
+}
+
+function ChevronDown3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="chevron-down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="chevron-down">
+          <path d="M5 7.5L10 12.5L15 7.5" id="Icon" stroke="var(--stroke-0, #353535)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Content2() {
+  return (
+    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
+      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
+        <p className="leading-[24px]">England</p>
+      </div>
+      <ChevronDown3 />
+    </div>
+  );
+}
+
+function Input4() {
+  return (
+    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
+          <Content2 />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
+    </div>
+  );
+}
+
+function InputWithLabel2() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">Country</p>
+      </div>
+      <Input4 />
+    </div>
+  );
+}
+
+function InputFieldBase2() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
+      <InputWithLabel2 />
+    </div>
+  );
+}
+
+function Input5() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
+      <InputFieldBase2 />
+    </div>
+  );
+}
+
+function Frame() {
+  return (
+    <div className="content-stretch flex gap-[16px] items-start relative shrink-0" data-name="Frame">
+      <Input3 />
+      <Input5 />
+    </div>
+  );
+}
+
+function ChevronDown5() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="chevron-down">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="chevron-down">
+          <path d="M5 7.5L10 12.5L15 7.5" id="Icon" stroke="var(--stroke-0, #353535)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Content3() {
+  return (
+    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
+      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
+        <p className="leading-[24px]">State</p>
+      </div>
+      <ChevronDown5 />
+    </div>
+  );
+}
+
+function Input6() {
+  return (
+    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
+          <Content3 />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
+    </div>
+  );
+}
+
+function InputWithLabel3() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre">State</p>
+      </div>
+      <Input6 />
+    </div>
+  );
+}
+
+function InputFieldBase3() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
+      <InputWithLabel3 />
+    </div>
+  );
+}
+
+function Input7() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
+      <InputFieldBase3 />
+    </div>
+  );
+}
+
+function Content4() {
+  return (
+    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
+      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
+        <p className="leading-[24px]">000000</p>
+      </div>
+    </div>
+  );
+}
+
+function Input8() {
+  return (
+    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
+      <div className="flex flex-row items-center overflow-clip relative size-full">
+        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
+          <Content4 />
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
+    </div>
+  );
+}
+
+function InputWithLabel4() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
+      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
+        <p className="leading-[22px] whitespace-pre" dir="auto">
+          Zip code
+        </p>
+      </div>
+      <Input8 />
+    </div>
+  );
+}
+
+function InputFieldBase4() {
+  return (
+    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
+      <InputWithLabel4 />
+    </div>
+  );
+}
+
+function Input9() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
+      <InputFieldBase4 />
+    </div>
+  );
+}
+
+function Frame1() {
+  return (
+    <div className="content-stretch flex gap-[16px] items-start relative shrink-0" data-name="Frame">
+      <Input7 />
+      <Input9 />
+    </div>
+  );
+}
+
+function Content5() {
+  return (
+    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0" data-name="Content">
+      <Input1 />
+      <Frame />
+      <Frame1 />
+    </div>
+  );
+}
+
+function Content6() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[32px] items-start left-[135px] opacity-60 top-[1133px]" data-name="Content">
+      <Content5 />
+    </div>
+  );
+}
+
+function Pay() {
+  return (
+    <div className="bg-black box-border content-stretch flex gap-[8px] h-[60px] items-center justify-center opacity-[0.55] pl-[8px] pr-[12px] py-[12px] relative rounded-[38px] shrink-0 w-[476px]" data-name="Pay">
+      <div className="font-['Inter:Bold',_sans-serif] font-bold leading-[0] not-italic relative shrink-0 text-[#f3f3f3] text-[16px] text-nowrap">
+        <p className="leading-[12px] whitespace-pre">Pay $42.60</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame66() {
+  return (
+    <div className="absolute content-stretch flex flex-col gap-[23px] items-start left-[135px] top-[1513px]">
+      <Pay />
+      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[14px] w-[475px]">
+        <p className="leading-[22px]">Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.</p>
+      </div>
+    </div>
+  );
+}
+
+function Group1000001952() {
+  return (
+    <div className="absolute contents left-[135px] top-[305px]">
+      <Frame67 />
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic text-[#0a0d13] text-[18px] text-nowrap top-[316px] translate-y-[-50%]">
+        <ol className="list-decimal" start="1">
+          <li className="ms-[27px]">
+            <span className="leading-[22px]">Personal Information</span>
+          </li>
+        </ol>
+      </div>
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic opacity-60 text-[#0a0d13] text-[18px] text-nowrap top-[927px] translate-y-[-50%]">
+        <ol className="list-decimal" start="2">
+          <li className="ms-[27px]">
+            <span className="leading-[22px]">Billing</span>
+          </li>
+        </ol>
+      </div>
+      <Frame85 />
+      <Frame61 />
+      <Frame62 />
+      <Frame63 />
+      <Frame64 />
+      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic opacity-60 text-[#0a0d13] text-[18px] text-nowrap top-[1093px] translate-y-[-50%]">
+        <p className="leading-[22px] whitespace-pre">Or Enter manually</p>
+      </div>
+      <Content6 />
+      <Frame66 />
+    </div>
+  );
+}
+
+function NestedTabHeadings() {
+  return (
+    <div className="relative shrink-0" data-name="nested tab headings">
+      <div className="box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[28px] py-[16px] relative">
+        <div className="capitalize flex flex-col font-['Montserrat:SemiBold',_sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[14px] text-black text-nowrap">
+          <p className="leading-[20px] whitespace-pre">For myself</p>
+        </div>
+      </div>
+      <div aria-hidden="true" className="absolute border-[0px_0px_2px] border-black border-solid inset-0 pointer-events-none" />
+    </div>
+  );
+}
+
+function NestedTabHeadings1() {
+  return (
+    <div className="box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[28px] py-[16px] relative shrink-0" data-name="nested tab headings">
+      <div className="capitalize flex flex-col font-['Montserrat:Medium',_sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[14px] text-black text-nowrap">
+        <p className="leading-[20px] whitespace-pre">To gift Someone</p>
+      </div>
+    </div>
+  );
+}
+
+function Frame1261155302() {
+  return (
+    <div className="absolute content-stretch flex gap-[8px] items-center left-[134px] top-[228px]">
+      <NestedTabHeadings />
+      <NestedTabHeadings1 />
+    </div>
+  );
+}
+
+export default function TravelLandingPage() {
+  return (
+    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
+      <OrderSummary />
+      <Footer />
+      <div className="absolute capitalize font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#2d3134] text-[56px] text-nowrap top-[132px]" style={{ left: "calc(50% - 585px)" }}>
+        <p className="leading-[66px] whitespace-pre">Checkout</p>
+      </div>
+      <Card8 />
+      <Navigation />
+      <Group1000001952 />
+      <Frame1261155302 />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/TrustedByCompanies.tsx b/src/imports/TrustedByCompanies.tsx
new file mode 100644
index 0000000..f917dd7
--- /dev/null
+++ b/src/imports/TrustedByCompanies.tsx
@@ -0,0 +1,348 @@
+import svgPaths from "./svg-wv5wqovq7z";
+import { imgGroup, imgGroup1, imgGroup2, imgGroup3, imgGroup4 } from "./svg-qfwrc";
+
+function Group() {
+  return (
+    <div className="absolute bottom-[2.06%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[96.34px_29.005px] right-[0.6%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 97 29">
+        <g id="Group">
+          <path clipRule="evenodd" d={svgPaths.p2796bcf0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
+          <path clipRule="evenodd" d={svgPaths.p248a1d00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
+          <path clipRule="evenodd" d={svgPaths.p337ab80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup() {
+  return (
+    <div className="absolute bottom-[2.06%] contents left-0 right-[0.6%] top-[1.25%]" data-name="Clip path group">
+      <Group />
+    </div>
+  );
+}
+
+function Component1Svg() {
+  return (
+    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[96.923px]" data-name="1.svg" style={{ left: "calc(50% + 0.001px)" }}>
+      <ClipPathGroup />
+    </div>
+  );
+}
+
+function Component1SvgFill() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="1.svg fill">
+      <Component1Svg />
+    </div>
+  );
+}
+
+function Component1Svg1() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="1.svg">
+      <Component1SvgFill />
+    </div>
+  );
+}
+
+function DivDFlex() {
+  return (
+    <div className="absolute h-[30px] left-0 right-[1100px] top-0" data-name="div.d-flex">
+      <Component1Svg1 />
+    </div>
+  );
+}
+
+function Group1() {
+  return (
+    <div className="absolute bottom-[0.18%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[99.2px_23.66px] right-[0.8%] top-[1.63%]" data-name="Group" style={{ maskImage: `url('${imgGroup1}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 100 24">
+        <g id="Group">
+          <path d={svgPaths.p3f7f9b00} fill="var(--fill-0, #6B6B6B)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup1() {
+  return (
+    <div className="absolute bottom-[0.18%] contents left-0 right-[0.8%] top-[1.63%]" data-name="Clip path group">
+      <Group1 />
+    </div>
+  );
+}
+
+function Component2Svg() {
+  return (
+    <div className="absolute h-[24.096px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="2.svg">
+      <ClipPathGroup1 />
+    </div>
+  );
+}
+
+function Component2SvgFill() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="2.svg fill">
+      <Component2Svg />
+    </div>
+  );
+}
+
+function Component2Svg1() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="2.svg">
+      <Component2SvgFill />
+    </div>
+  );
+}
+
+function DivDFlex1() {
+  return (
+    <div className="absolute h-[30px] left-[220px] right-[880px] top-0" data-name="div.d-flex">
+      <Component2Svg1 />
+    </div>
+  );
+}
+
+function Group2() {
+  return (
+    <div className="absolute bottom-[3.72%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[99.603px_19.461px] right-[0.4%] top-[1.3%]" data-name="Group" style={{ maskImage: `url('${imgGroup2}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 100 20">
+        <g id="Group">
+          <path clipRule="evenodd" d={svgPaths.p2a71dac0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
+          <path clipRule="evenodd" d={svgPaths.p2cdc9c00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
+          <path clipRule="evenodd" d={svgPaths.p18ffe400} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
+          <path clipRule="evenodd" d={svgPaths.p272a6dc0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_4" />
+          <path clipRule="evenodd" d={svgPaths.p1fd6d500} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_5" />
+          <path clipRule="evenodd" d={svgPaths.p35ba2b80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_6" />
+          <path clipRule="evenodd" d={svgPaths.pa9dd680} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_7" />
+          <path clipRule="evenodd" d={svgPaths.p18a70300} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_8" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup2() {
+  return (
+    <div className="absolute bottom-[3.73%] contents left-0 right-[0.4%] top-[1.3%]" data-name="Clip path group">
+      <Group2 />
+    </div>
+  );
+}
+
+function Component4Svg() {
+  return (
+    <div className="absolute h-[20.492px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="4.svg">
+      <ClipPathGroup2 />
+    </div>
+  );
+}
+
+function Component4SvgFill() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="4.svg fill">
+      <Component4Svg />
+    </div>
+  );
+}
+
+function Component4Svg1() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="4.svg">
+      <Component4SvgFill />
+    </div>
+  );
+}
+
+function DivDFlex2() {
+  return (
+    <div className="absolute h-[30px] left-[440px] right-[660px] top-0" data-name="div.d-flex">
+      <Component4Svg1 />
+    </div>
+  );
+}
+
+function Group3() {
+  return (
+    <div className="absolute bottom-[3.19%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[94.418px_28.667px] right-[0.21%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup3}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 95 29">
+        <g id="Group">
+          <path d={svgPaths.p1159e100} fill="var(--fill-0, #6B6B6B)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup3() {
+  return (
+    <div className="absolute bottom-[3.19%] contents left-0 right-[0.21%] top-[1.25%]" data-name="Clip path group">
+      <Group3 />
+    </div>
+  );
+}
+
+function Component5Svg() {
+  return (
+    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[94.615px]" data-name="5.svg" style={{ left: "calc(50% - 0.001px)" }}>
+      <ClipPathGroup3 />
+    </div>
+  );
+}
+
+function Component5SvgFill() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="5.svg fill">
+      <Component5Svg />
+    </div>
+  );
+}
+
+function Component5Svg1() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="5.svg">
+      <Component5SvgFill />
+    </div>
+  );
+}
+
+function DivDFlex3() {
+  return (
+    <div className="absolute h-[30px] left-[660px] right-[440px] top-0" data-name="div.d-flex">
+      <Component5Svg1 />
+    </div>
+  );
+}
+
+function Group4() {
+  return (
+    <div className="absolute bottom-[0.54%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[98.4px_29.512px] right-[0.61%] top-[1.09%]" data-name="Group" style={{ maskImage: `url('${imgGroup4}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 99 30">
+        <g id="Group">
+          <path d={svgPaths.p21cb4200} fill="var(--fill-0, #6B6B6B)" id="Vector" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup4() {
+  return (
+    <div className="absolute bottom-[0.54%] contents left-0 right-[0.61%] top-[1.09%]" data-name="Clip path group">
+      <Group4 />
+    </div>
+  );
+}
+
+function Component6Svg() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[99px]" data-name="6.svg">
+      <ClipPathGroup4 />
+    </div>
+  );
+}
+
+function Component6SvgFill() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="6.svg fill">
+      <Component6Svg />
+    </div>
+  );
+}
+
+function Component6Svg1() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="6.svg">
+      <Component6SvgFill />
+    </div>
+  );
+}
+
+function DivDFlex4() {
+  return (
+    <div className="absolute h-[30px] left-[880px] right-[220px] top-0" data-name="div.d-flex">
+      <Component6Svg1 />
+    </div>
+  );
+}
+
+function Group5() {
+  return (
+    <div className="absolute bottom-[2.06%] left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px] mask-size-[96.34px_29.005px] right-[0.6%] top-[1.25%]" data-name="Group" style={{ maskImage: `url('${imgGroup}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 97 29">
+        <g id="Group">
+          <path clipRule="evenodd" d={svgPaths.p2796bcf0} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector" />
+          <path clipRule="evenodd" d={svgPaths.p248a1d00} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_2" />
+          <path clipRule="evenodd" d={svgPaths.p337ab80} fill="var(--fill-0, #6B6B6B)" fillRule="evenodd" id="Vector_3" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function ClipPathGroup5() {
+  return (
+    <div className="absolute bottom-[2.06%] contents left-0 right-[0.6%] top-[1.25%]" data-name="Clip path group">
+      <Group5 />
+    </div>
+  );
+}
+
+function Component1Svg2() {
+  return (
+    <div className="absolute h-[30px] overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[96.923px]" data-name="1.svg" style={{ left: "calc(50% + 0.001px)" }}>
+      <ClipPathGroup5 />
+    </div>
+  );
+}
+
+function Component1SvgFill1() {
+  return (
+    <div className="absolute h-[30px] left-0 overflow-clip top-0 w-[100px]" data-name="1.svg fill">
+      <Component1Svg2 />
+    </div>
+  );
+}
+
+function Component1Svg3() {
+  return (
+    <div className="absolute h-[30px] left-1/2 overflow-clip top-1/2 translate-x-[-50%] translate-y-[-50%] w-[100px]" data-name="1.svg">
+      <Component1SvgFill1 />
+    </div>
+  );
+}
+
+function DivDFlex5() {
+  return (
+    <div className="absolute h-[30px] left-[1100px] right-0 top-0" data-name="div.d-flex">
+      <Component1Svg3 />
+    </div>
+  );
+}
+
+function DivSwiperWrapper() {
+  return (
+    <div className="absolute inset-[88.12px_15px_0.01px_15px] overflow-clip" data-name="div.swiper-wrapper">
+      <DivDFlex />
+      <DivDFlex1 />
+      <DivDFlex2 />
+      <DivDFlex3 />
+      <DivDFlex4 />
+      <DivDFlex5 />
+    </div>
+  );
+}
+
+export default function TrustedByCompanies() {
+  return (
+    <div className="relative size-full !bg-transparent" data-name="trusted by companies" style={{ background: 'transparent' }}>
+      <div className="absolute flex flex-col font-['Merchant:Medium',_sans-serif] font-medium h-[28.13px] justify-center leading-[0] text-[14.531px] text-black text-center top-[14.06px] translate-x-[-50%] translate-y-[-50%] w-[193.62px]" style={{ left: "calc(50% + 0.091px)", fontVariationSettings: "'wdth' 87.5" }}>
+      </div>
+      <DivSwiperWrapper />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/imports/svg-0l4uo.tsx b/src/imports/svg-0l4uo.tsx
new file mode 100644
index 0000000..a2959ed
--- /dev/null
+++ b/src/imports/svg-0l4uo.tsx
@@ -0,0 +1,7 @@
+export const imgDescription = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%20135%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Bg%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M130%200H5C2.23858%200%200%202.23858%200%205V35C0%2037.7614%202.23858%2040%205%2040H130C132.761%2040%20135%2037.7614%20135%2035V5C135%202.23858%20132.761%200%20130%200Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M130%200.8C131.114%200.801287%20132.181%201.24423%20132.968%202.03165C133.756%202.81907%20134.199%203.88666%20134.2%205.0002V35.0002C134.199%2036.1137%20133.756%2037.1813%20132.968%2037.9687C132.181%2038.7561%20131.114%2039.1991%20130%2039.2004H5C3.88645%2039.1991%202.81888%2038.7562%202.0315%2037.9688C1.24412%2037.1813%200.801231%2036.1138%200.8%2035.0002V5.0002C0.801212%203.88664%201.24409%202.81904%202.03148%202.03162C2.81886%201.2442%203.88644%200.801266%205%200.8H130ZM130%200.000200272H5C3.67511%200.00407837%202.40559%200.532108%201.46875%201.46895C0.531908%202.40579%200.0038781%203.67531%200%205.0002L0%2035.0002C0.0038781%2036.3251%200.531908%2037.5946%201.46875%2038.5315C2.40559%2039.4683%203.67511%2039.9963%205%2040.0002H130C131.325%2039.9963%20132.594%2039.4683%20133.531%2038.5315C134.468%2037.5946%20134.996%2036.3251%20135%2035.0002V5.0002C134.996%203.67531%20134.468%202.40579%20133.531%201.46895C132.594%200.532108%20131.325%200.00407837%20130%200.000200272V0.000200272Z%22%20fill%3D%22var(--fill-0%2C%20%23A6A6A6)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgText = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2085%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Text%22%3E%0A%3Cg%20id%3D%22Vector%22%3E%0A%3Cpath%20d%3D%22M6.37696%204.37762C6.39514%204.74456%206.33844%205.11137%206.21033%205.4557C6.08222%205.80003%205.88537%206.11469%205.63176%206.38052C5.34755%206.67528%205.00431%206.90672%204.62449%207.05969C4.24467%207.21266%203.83684%207.28372%203.42766%207.26822C3.01588%207.2719%202.60752%207.19324%202.22657%207.03685C1.84563%206.88046%201.49979%206.64949%201.20938%206.35753C0.918978%206.06557%200.689869%205.7185%200.535514%205.33672C0.38116%204.95495%200.304678%204.54617%200.310565%204.13442C0.304724%203.72265%200.381233%203.31387%200.535598%202.93209C0.689963%202.55031%200.919067%202.20322%201.20946%201.91123C1.49985%201.61924%201.84567%201.38823%202.22659%201.23176C2.60752%201.0753%203.01587%200.996541%203.42766%201.00012C3.85105%200.998837%204.27019%201.08444%204.65916%201.25162C5.02043%201.39806%205.34199%201.62776%205.59766%201.92202L5.07026%202.44982C4.86928%202.21327%204.61665%202.02605%204.33185%201.90262C4.04705%201.77919%203.7377%201.72284%203.42766%201.73792C3.11558%201.7363%202.80639%201.79769%202.51859%201.9184C2.2308%202.03911%201.97032%202.21666%201.75277%202.44042C1.53522%202.66418%201.36507%202.92955%201.2525%203.22063C1.13994%203.5117%201.08727%203.8225%201.09766%204.13442C1.09022%204.60161%201.22169%205.0605%201.47539%205.45288C1.72909%205.84526%202.0936%206.15347%202.52269%206.33842C2.95178%206.52337%203.42613%206.57673%203.88559%206.49174C4.34505%206.40675%204.76893%206.18723%205.10347%205.86102C5.41135%205.52925%205.58982%205.09793%205.60636%204.64562H3.42766V3.92492H6.33496C6.36245%204.07426%206.37651%204.22577%206.37696%204.37762Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M10.9863%201.87172H8.25386V3.77402H10.7178V4.49482H8.25386V6.39712H10.9863V7.13442H7.48336V1.13442H10.9863V1.87172Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M14.2373%207.13442H13.4658V1.87172H11.79V1.13442H15.9131V1.87172H14.2373V7.13442Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M18.8965%207.13442V1.13442H19.667V7.13442H18.8965Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M23.0869%207.13442H22.3154V1.87172H20.6397V1.13442H24.7627V1.87172H23.0869V7.13442Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M32.5679%206.35902C31.9839%206.94126%2031.1928%207.26822%2030.3682%207.26822C29.5435%207.26822%2028.7525%206.94126%2028.1685%206.35902C27.8796%206.06639%2027.6524%205.71865%2027.5006%205.33649C27.3488%204.95432%2027.2753%204.54553%2027.2847%204.13442C27.2753%203.7233%2027.3488%203.31451%2027.5006%202.93234C27.6524%202.55018%2027.8796%202.20244%2028.1685%201.90982C28.4571%201.62108%2028.7999%201.39211%2029.1772%201.23602C29.5544%201.07992%2029.9588%200.999755%2030.367%201.00012C30.7753%201.00048%2031.1795%201.08136%2031.5565%201.23813C31.9335%201.39489%2032.2758%201.62447%2032.564%201.91372C32.8531%202.20557%2033.0806%202.55253%2033.2331%202.934C33.3856%203.31547%2033.4599%203.72368%2033.4517%204.13442C33.4607%204.5455%2033.3872%204.95422%2033.2354%205.33635C33.0836%205.71848%2032.8566%206.06624%2032.5679%206.35902ZM28.7378%205.85662C29.1703%206.28841%2029.7565%206.53093%2030.3677%206.53093C30.9788%206.53093%2031.565%206.28841%2031.9976%205.85662C32.2194%205.62953%2032.3928%205.35984%2032.5075%205.06384C32.6221%204.76783%2032.6756%204.45166%2032.6646%204.13442C32.6756%203.81718%2032.6221%203.501%2032.5075%203.20499C32.3928%202.90899%2032.2194%202.6393%2031.9976%202.41222C31.565%201.98042%2030.9788%201.73791%2030.3677%201.73791C29.7565%201.73791%2029.1703%201.98042%2028.7378%202.41222C28.5163%202.63948%2028.3431%202.90922%2028.2286%203.2052C28.1142%203.50118%2028.0608%203.81727%2028.0718%204.13442C28.0608%204.45157%2028.1142%204.76765%2028.2286%205.06363C28.3431%205.35961%2028.5163%205.62935%2028.7378%205.85662Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M34.5337%207.13442V1.13442H35.4722L38.3882%205.80192H38.4214L38.3882%204.64562V1.13442H39.1597V7.13442H38.355L35.3042%202.24082H35.271L35.3042%203.39712V7.13442H34.5337Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M6.37696%204.37762C6.39514%204.74456%206.33844%205.11137%206.21033%205.4557C6.08222%205.80003%205.88537%206.11469%205.63176%206.38052C5.34755%206.67528%205.00431%206.90672%204.62449%207.05969C4.24467%207.21266%203.83684%207.28372%203.42766%207.26822C3.01588%207.2719%202.60752%207.19324%202.22657%207.03685C1.84563%206.88046%201.49979%206.64949%201.20938%206.35753C0.918978%206.06557%200.689869%205.7185%200.535514%205.33672C0.38116%204.95495%200.304678%204.54617%200.310565%204.13442C0.304724%203.72265%200.381233%203.31387%200.535598%202.93209C0.689963%202.55031%200.919067%202.20322%201.20946%201.91123C1.49985%201.61924%201.84567%201.38823%202.22659%201.23176C2.60752%201.0753%203.01587%200.996541%203.42766%201.00012C3.85105%200.998837%204.27019%201.08444%204.65916%201.25162C5.02043%201.39806%205.34199%201.62776%205.59766%201.92202L5.07026%202.44982C4.86928%202.21327%204.61665%202.02605%204.33185%201.90262C4.04705%201.77919%203.7377%201.72284%203.42766%201.73792C3.11558%201.7363%202.80639%201.79769%202.51859%201.9184C2.2308%202.03911%201.97032%202.21666%201.75277%202.44042C1.53522%202.66418%201.36507%202.92955%201.2525%203.22063C1.13994%203.5117%201.08727%203.8225%201.09766%204.13442C1.09022%204.60161%201.22169%205.0605%201.47539%205.45288C1.72909%205.84526%202.0936%206.15347%202.52269%206.33842C2.95178%206.52337%203.42613%206.57673%203.88559%206.49174C4.34505%206.40675%204.76893%206.18723%205.10347%205.86102C5.41135%205.52925%205.58982%205.09793%205.60636%204.64562H3.42766V3.92492H6.33496C6.36245%204.07426%206.37651%204.22577%206.37696%204.37762Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M10.9863%201.87172H8.25386V3.77402H10.7178V4.49482H8.25386V6.39712H10.9863V7.13442H7.48336V1.13442H10.9863V1.87172Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M14.2373%207.13442H13.4658V1.87172H11.79V1.13442H15.9131V1.87172H14.2373V7.13442Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M18.8965%207.13442V1.13442H19.667V7.13442H18.8965Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M23.0869%207.13442H22.3154V1.87172H20.6397V1.13442H24.7627V1.87172H23.0869V7.13442Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M32.5679%206.35902C31.9839%206.94126%2031.1928%207.26822%2030.3682%207.26822C29.5435%207.26822%2028.7525%206.94126%2028.1685%206.35902C27.8796%206.06639%2027.6524%205.71865%2027.5006%205.33649C27.3488%204.95432%2027.2753%204.54553%2027.2847%204.13442C27.2753%203.7233%2027.3488%203.31451%2027.5006%202.93234C27.6524%202.55018%2027.8796%202.20244%2028.1685%201.90982C28.4571%201.62108%2028.7999%201.39211%2029.1772%201.23602C29.5544%201.07992%2029.9588%200.999755%2030.367%201.00012C30.7753%201.00048%2031.1795%201.08136%2031.5565%201.23813C31.9335%201.39489%2032.2758%201.62447%2032.564%201.91372C32.8531%202.20557%2033.0806%202.55253%2033.2331%202.934C33.3856%203.31547%2033.4599%203.72368%2033.4517%204.13442C33.4607%204.5455%2033.3872%204.95422%2033.2354%205.33635C33.0836%205.71848%2032.8566%206.06624%2032.5679%206.35902ZM28.7378%205.85662C29.1703%206.28841%2029.7565%206.53093%2030.3677%206.53093C30.9788%206.53093%2031.565%206.28841%2031.9976%205.85662C32.2194%205.62953%2032.3928%205.35984%2032.5075%205.06384C32.6221%204.76783%2032.6756%204.45166%2032.6646%204.13442C32.6756%203.81718%2032.6221%203.501%2032.5075%203.20499C32.3928%202.90899%2032.2194%202.6393%2031.9976%202.41222C31.565%201.98042%2030.9788%201.73791%2030.3677%201.73791C29.7565%201.73791%2029.1703%201.98042%2028.7378%202.41222C28.5163%202.63948%2028.3431%202.90922%2028.2286%203.2052C28.1142%203.50118%2028.0608%203.81727%2028.0718%204.13442C28.0608%204.45157%2028.1142%204.76765%2028.2286%205.06363C28.3431%205.35961%2028.5163%205.62935%2028.7378%205.85662Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3Cpath%20d%3D%22M34.5337%207.13442V1.13442H35.4722L38.3882%205.80192H38.4214L38.3882%204.64562V1.13442H39.1597V7.13442H38.355L35.3042%202.24082H35.271L35.3042%203.39712V7.13442H34.5337Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%220.2%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%3C%2Fg%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M27.0944%2015.886C26.2539%2015.8892%2025.4331%2016.1414%2024.7358%2016.6106C24.0385%2017.0799%2023.4959%2017.7453%2023.1764%2018.5227C22.857%2019.3002%2022.7751%2020.1548%2022.941%2020.9788C23.1069%2021.8028%2023.5133%2022.5591%2024.1088%2023.1523C24.7042%2023.7455%2025.4621%2024.149%2026.2867%2024.3118C27.1113%2024.4746%2027.9656%2024.3894%2028.7419%2024.067C29.5181%2023.7446%2030.1814%2023.1995%2030.648%2022.5004C31.1146%2021.8013%2031.3637%2020.9796%2031.3637%2020.1391C31.3719%2019.5769%2031.267%2019.0188%2031.0552%2018.498C30.8434%2017.9772%2030.5289%2017.5044%2030.1306%2017.1075C29.7323%2016.7107%2029.2582%2016.3981%2028.7366%2016.1883C28.215%2015.9784%2027.6565%2015.8756%2027.0944%2015.886V15.886ZM27.0944%2022.7168C26.5767%2022.7537%2026.06%2022.6339%2025.6114%2022.373C25.1628%2022.1122%2024.8032%2021.7223%2024.5793%2021.2541C24.3554%2020.7859%2024.2776%2020.2612%2024.3561%2019.7483C24.4346%2019.2353%2024.6657%2018.7578%2025.0194%2018.3781C25.373%2017.9983%2025.8328%2017.7338%2026.3389%2017.619C26.845%2017.5042%2027.3739%2017.5444%2027.8568%2017.7345C28.3397%2017.9245%2028.7542%2018.2555%2029.0464%2018.6844C29.3385%2019.1133%2029.4948%2019.6202%2029.4948%2020.1391C29.5105%2020.467%2029.4604%2020.7946%2029.3476%2021.1028C29.2348%2021.411%2029.0614%2021.6936%2028.8377%2021.9338C28.614%2022.174%2028.3446%2022.367%2028.0452%2022.5015C27.7458%2022.6359%2027.4225%2022.7092%2027.0944%2022.7168V22.7168ZM17.781%2015.886C16.9405%2015.8892%2016.1197%2016.1413%2015.4224%2016.6106C14.7251%2017.0799%2014.1824%2017.7452%2013.863%2018.5227C13.5435%2019.3001%2013.4616%2020.1548%2013.6275%2020.9788C13.7934%2021.8027%2014.1998%2022.5591%2014.7952%2023.1523C15.3907%2023.7455%2016.1486%2024.149%2016.9732%2024.3118C17.7978%2024.4746%2018.6521%2024.3894%2019.4283%2024.067C20.2046%2023.7447%2020.8679%2023.1995%2021.3345%2022.5004C21.8011%2021.8013%2022.0502%2020.9796%2022.0502%2020.1391C22.0584%2019.5769%2021.9535%2019.0189%2021.7417%2018.4981C21.5299%2017.9773%2021.2154%2017.5044%2020.8171%2017.1076C20.4188%2016.7108%2019.9448%2016.3981%2019.4232%2016.1883C18.9016%2015.9784%2018.3431%2015.8756%2017.781%2015.886V15.886ZM17.781%2022.7168C17.2633%2022.7537%2016.7466%2022.6339%2016.298%2022.373C15.8494%2022.1122%2015.4898%2021.7223%2015.2659%2021.2541C15.042%2020.7859%2014.9642%2020.2612%2015.0427%2019.7483C15.1212%2019.2353%2015.3523%2018.7578%2015.706%2018.3781C16.0596%2017.9983%2016.5194%2017.7338%2017.0255%2017.619C17.5316%2017.5042%2018.0605%2017.5444%2018.5434%2017.7345C19.0263%2017.9245%2019.4408%2018.2555%2019.733%2018.6844C20.0251%2019.1133%2020.1814%2019.6202%2020.1814%2020.1391C20.1971%2020.467%2020.1471%2020.7946%2020.0342%2021.1028C19.9214%2021.4111%2019.748%2021.6936%2019.5243%2021.9338C19.3007%2022.174%2019.0312%2022.367%2018.7318%2022.5015C18.4324%2022.636%2018.1091%2022.7092%2017.781%2022.7168ZM6.70216%2017.191V18.9953H11.0199C10.9576%2019.8416%2010.6113%2020.6421%2010.0371%2021.2669C9.60438%2021.7079%209.08405%2022.0534%208.50964%2022.2809C7.93522%2022.5084%207.31949%2022.613%206.70216%2022.5879C5.44014%2022.5708%204.2356%2022.0575%203.3492%2021.159C2.4628%2020.2605%201.96582%2019.0492%201.96582%2017.787C1.96582%2016.5249%202.4628%2015.3135%203.3492%2014.415C4.2356%2013.5165%205.44014%2013.0032%206.70216%2012.9861C7.91438%2012.9703%209.08387%2013.4334%209.95657%2014.2749L11.2293%2013.0022C10.6338%2012.4127%209.92668%2011.9481%209.1493%2011.6354C8.37192%2011.3228%207.53994%2011.1686%206.70216%2011.1817C5.82665%2011.169%204.95734%2011.3304%204.14478%2011.6566C3.33222%2011.9829%202.59261%2012.4674%201.96898%2013.082C1.34534%2013.6966%200.850114%2014.4291%200.512093%2015.2368C0.174071%2016.0445%200%2016.9114%200%2017.787C0%2018.6626%200.174071%2019.5295%200.512093%2020.3372C0.850114%2021.1449%201.34534%2021.8774%201.96898%2022.492C2.59261%2023.1067%203.33222%2023.5912%204.14478%2023.9174C4.95734%2024.2436%205.82665%2024.4051%206.70216%2024.3923C7.55762%2024.4278%208.41085%2024.281%209.20523%2023.9615C9.99961%2023.6421%2010.717%2023.1574%2011.3098%2022.5396C12.3622%2021.3909%2012.9231%2019.8758%2012.8726%2018.3187C12.8767%2017.9406%2012.8443%2017.5629%2012.7758%2017.191H6.70216ZM52.0105%2018.5925C51.7549%2017.8221%2051.2683%2017.1491%2050.6169%2016.6649C49.9655%2016.1807%2049.1808%2015.9088%2048.3695%2015.886C47.823%2015.8894%2047.2829%2016.0036%2046.7818%2016.2216C46.2807%2016.4397%2045.829%2016.757%2045.4541%2017.1546C45.0791%2017.5521%2044.7887%2018.0216%2044.6003%2018.5346C44.4119%2019.0475%2044.3295%2019.5934%2044.3581%2020.1391C44.3457%2020.6983%2044.4463%2021.2542%2044.6536%2021.7737C44.861%2022.2931%2045.1709%2022.7655%2045.5649%2023.1625C45.9589%2023.5595%2046.4288%2023.873%2046.9467%2024.0843C47.4646%2024.2956%2048.0197%2024.4004%2048.579%2024.3923C49.2796%2024.3962%2049.9703%2024.226%2050.5889%2023.897C51.2075%2023.568%2051.7347%2023.0905%2052.1232%2022.5074L50.6733%2021.5408C50.4561%2021.9015%2050.1488%2022.1996%2049.7816%2022.4058C49.4145%2022.612%2049%2022.7191%2048.579%2022.7168C48.1457%2022.7334%2047.7174%2022.6194%2047.3497%2022.3896C46.9819%2022.1598%2046.6918%2021.8248%2046.5168%2021.428L52.2039%2019.0759L52.0105%2018.5925ZM46.2108%2020.0103C46.1907%2019.7008%2046.2326%2019.3903%2046.334%2019.0972C46.4354%2018.804%2046.5943%2018.534%2046.8013%2018.303C47.0083%2018.0719%2047.2593%2017.8845%2047.5396%2017.7517C47.82%2017.6188%2048.124%2017.5432%2048.4339%2017.5293C48.7566%2017.5081%2049.0783%2017.5823%2049.3591%2017.7428C49.6399%2017.9032%2049.8672%2018.1427%2050.0128%2018.4315L46.2108%2020.0103ZM41.587%2024.1345H43.4558V11.6329H41.587V24.1345ZM38.526%2016.8365H38.4616C38.1774%2016.5278%2037.8307%2016.2834%2037.4445%2016.1194C37.0583%2015.9555%2036.6416%2015.8759%2036.2222%2015.886C35.1255%2015.9327%2034.0892%2016.4012%2033.3297%2017.1937C32.5702%2017.9862%2032.1462%2019.0415%2032.1462%2020.1392C32.1462%2021.2369%2032.5702%2022.2921%2033.3297%2023.0846C34.0892%2023.8771%2035.1255%2024.3456%2036.2222%2024.3923C36.6432%2024.4035%2037.0617%2024.3229%2037.4484%2024.1559C37.8352%2023.989%2038.1809%2023.7398%2038.4616%2023.4257H38.526V24.0379C38.526%2025.6651%2037.6561%2026.535%2036.2544%2026.535C35.7872%2026.5238%2035.334%2026.3738%2034.9524%2026.1041C34.5708%2025.8344%2034.2782%2025.4572%2034.1118%2025.0206L32.4846%2025.6973C32.7912%2026.444%2033.3139%2027.0821%2033.9855%2027.5298C34.6572%2027.9776%2035.4472%2028.2146%2036.2544%2028.2105C38.4455%2028.2105%2040.2982%2026.9217%2040.2982%2023.7801V16.1437H38.526V16.8365ZM36.3834%2022.7168C35.7374%2022.662%2035.1356%2022.3668%2034.697%2021.8894C34.2584%2021.412%2034.015%2020.7874%2034.015%2020.1392C34.015%2019.4909%2034.2584%2018.8663%2034.697%2018.3889C35.1356%2017.9116%2035.7374%2017.6163%2036.3834%2017.5615C36.7047%2017.5772%2037.0196%2017.6574%2037.3093%2017.7974C37.599%2017.9374%2037.8575%2018.1343%2038.0695%2018.3763C38.2815%2018.6184%2038.4426%2018.9006%2038.5431%2019.2062C38.6437%2019.5119%2038.6817%2019.8346%2038.6549%2020.1552C38.68%2020.4738%2038.6406%2020.7943%2038.539%2021.0973C38.4375%2021.4004%2038.2758%2021.6798%2038.0638%2021.919C37.8517%2022.1581%2037.5936%2022.352%2037.3049%2022.4891C37.0161%2022.6262%2036.7027%2022.7036%2036.3834%2022.7168V22.7168ZM60.7644%2011.6331H56.2932V24.1345H58.1589V19.3981H60.7644C61.2921%2019.427%2061.8202%2019.3481%2062.3164%2019.166C62.8126%2018.984%2063.2665%2018.7027%2063.6504%2018.3393C64.0342%2017.976%2064.3399%2017.5382%2064.5489%2017.0527C64.7578%2016.5672%2064.8655%2016.0442%2064.8655%2015.5156C64.8655%2014.9871%2064.7578%2014.4641%2064.5489%2013.9786C64.3399%2013.4931%2064.0342%2013.0553%2063.6504%2012.6919C63.2665%2012.3285%2062.8126%2012.0472%2062.3164%2011.8652C61.8202%2011.6832%2061.2921%2011.6042%2060.7644%2011.6331V11.6331ZM60.8126%2017.6583H58.1589V13.373H60.8126C61.0977%2013.3671%2061.3811%2013.4182%2061.6462%2013.5232C61.9114%2013.6282%2062.1529%2013.7851%2062.3566%2013.9846C62.5603%2014.1842%2062.7222%2014.4224%2062.8327%2014.6853C62.9432%2014.9482%2063.0001%2015.2305%2063.0001%2015.5157C63.0001%2015.8008%2062.9432%2016.0831%2062.8327%2016.346C62.7222%2016.6089%2062.5603%2016.8471%2062.3566%2017.0467C62.1529%2017.2462%2061.9114%2017.4031%2061.6462%2017.5081C61.3811%2017.6132%2061.0977%2017.6642%2060.8126%2017.6583V17.6583ZM72.3443%2015.863C71.6632%2015.8233%2070.9854%2015.9832%2070.394%2016.3232C69.8026%2016.6632%2069.3233%2017.1684%2069.015%2017.7769L70.6716%2018.4685C70.8358%2018.1665%2071.0846%2017.9189%2071.3873%2017.7561C71.6901%2017.5932%2072.0338%2017.5222%2072.3764%2017.5517C72.8497%2017.5055%2073.322%2017.6489%2073.6899%2017.9503C74.0577%2018.2518%2074.291%2018.6868%2074.3386%2019.16V19.2887C73.7394%2018.9704%2073.071%2018.8047%2072.3925%2018.8062C70.6073%2018.8062%2068.7899%2019.7873%2068.7899%2021.6208C68.8072%2022.0072%2068.902%2022.3862%2069.0686%2022.7353C69.2352%2023.0844%2069.4702%2023.3964%2069.7597%2023.6529C70.0493%2023.9094%2070.3873%2024.1052%2070.7539%2024.2285C71.1205%2024.3519%2071.5082%2024.4003%2071.8939%2024.371C72.3637%2024.3987%2072.8323%2024.2999%2073.251%2024.0849C73.6696%2023.8699%2074.023%2023.5466%2074.2743%2023.1487H74.3386V24.1137H76.1399V19.3209C76.1399%2017.1014%2074.4833%2015.863%2072.3443%2015.863V15.863ZM72.1191%2022.7144C71.5079%2022.7144%2070.6555%2022.4089%2070.6555%2021.6529C70.6555%2020.688%2071.717%2020.318%2072.6338%2020.318C73.2292%2020.3022%2073.818%2020.4466%2074.3386%2020.7362C74.27%2021.2785%2074.0075%2021.7775%2073.5995%2022.1412C73.1915%2022.5049%2072.6656%2022.7085%2072.1191%2022.7144V22.7144ZM82.7019%2016.1364L80.5628%2021.5564H80.4984L78.279%2016.1364H76.2686L79.5978%2023.7116L77.7%2027.9254H79.646L84.7766%2016.1364H82.7019ZM65.8949%2024.1345H67.7605V11.6331H65.8949V24.1345Z%22%20fill%3D%22var(--fill-0%2C%20white)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGooglePlayLogo = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2024%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Google%20Play%20logo%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M0.466434%200.406709C0.13852%200.798782%20-0.0270535%201.30141%200.00363445%201.81161V23.9277C-0.0271427%2024.4379%200.138442%2024.9406%200.466434%2025.3326L0.540435%2025.4047L12.9294%2013.0158V12.7235L0.540435%200.334109L0.466434%200.406709Z%22%20fill%3D%22url(%23paint0_linear_9041_276)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M17.0588%2017.1472L12.9294%2013.0158V12.7235L17.0598%208.59311L17.1529%208.64621L22.0457%2011.4263C23.4433%2012.2203%2023.4433%2013.5195%2022.0457%2014.314L17.1529%2017.0941L17.0588%2017.1472Z%22%20fill%3D%22url(%23paint1_linear_9041_276)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M17.1529%2017.0936L12.9294%2012.8697L0.466431%2025.3326C0.7512%2025.5838%201.11486%2025.7274%201.49439%2025.7386C1.87393%2025.7498%202.24543%2025.6279%202.54453%2025.394L17.1529%2017.0936Z%22%20fill%3D%22url(%23paint2_linear_9041_276)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M17.1529%208.64571L2.54453%200.345309C2.24543%200.111403%201.87393%20-0.0105038%201.49439%200.000710063C1.11486%200.0119239%200.7512%200.155552%200.466431%200.406709L12.9294%2012.8697L17.1529%208.64571Z%22%20fill%3D%22url(%23paint3_linear_9041_276)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_5%22%20opacity%3D%220.2%22%20d%3D%22M17.0598%2017.0006L2.54453%2025.2479C2.25695%2025.4668%201.90595%2025.5863%201.54452%2025.5882C1.18309%2025.5901%200.830837%2025.4745%200.540931%2025.2586L0.466431%2025.3331L0.540431%2025.4052L0.540931%2025.4047C0.830788%2025.6207%201.18306%2025.7364%201.54452%2025.7345C1.90598%2025.7326%202.257%2025.6131%202.54453%2025.394L17.1529%2017.0936L17.0598%2017.0006Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_6%22%20opacity%3D%220.12%22%20d%3D%22M0.466427%2025.187C0.138544%2024.7949%20-0.0270254%2024.2923%200.00362672%2023.7821V23.9282C-0.0270439%2024.4384%200.138528%2024.941%200.466427%2025.3331L0.540927%2025.2586L0.466427%2025.187Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_7%22%20opacity%3D%220.12%22%20d%3D%22M22.0457%2014.1674L17.0598%2017.0006L17.1529%2017.0936L22.0457%2014.3135C22.3335%2014.1886%2022.5826%2013.9888%2022.767%2013.735C22.9513%2013.4811%2023.0643%2013.1824%2023.094%2012.8701C23.0322%2013.153%2022.9052%2013.4175%2022.7232%2013.6427C22.5413%2013.8679%2022.3093%2014.0475%2022.0457%2014.1674V14.1674Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_8%22%20opacity%3D%220.25%22%20d%3D%22M2.54453%200.491909L22.0457%2011.5719C22.3094%2011.6918%2022.5414%2011.8715%2022.7234%2012.0968C22.9054%2012.3221%2023.0323%2012.5867%2023.094%2012.8697C23.0645%2012.5572%2022.9516%2012.2584%2022.7673%2012.0045C22.5829%2011.7505%2022.3337%2011.5507%2022.0457%2011.4258L2.54453%200.345809C1.14693%20-0.448291%200.00363159%200.211308%200.00363159%201.81211V1.95821C0.00363159%200.357508%201.14693%20-0.302091%202.54453%200.491909Z%22%20fill%3D%22var(--fill-0%2C%20white)%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_9041_276%22%20x1%3D%2211.8308%22%20y1%3D%221.57842%22%20x2%3D%22-4.95164%22%20y2%3D%2218.3608%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2300A0FF%22%2F%3E%0A%3Cstop%20offset%3D%220.00657%22%20stop-color%3D%22%2300A1FF%22%2F%3E%0A%3Cstop%20offset%3D%220.2601%22%20stop-color%3D%22%2300BEFF%22%2F%3E%0A%3Cstop%20offset%3D%220.5122%22%20stop-color%3D%22%2300D2FF%22%2F%3E%0A%3Cstop%20offset%3D%220.7604%22%20stop-color%3D%22%2300DFFF%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300E3FF%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint1_linear_9041_276%22%20x1%3D%2223.8654%22%20y1%3D%2212.8702%22%20x2%3D%22-0.33149%22%20y2%3D%2212.8702%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FFE000%22%2F%3E%0A%3Cstop%20offset%3D%220.4087%22%20stop-color%3D%22%23FFBD00%22%2F%3E%0A%3Cstop%20offset%3D%220.7754%22%20stop-color%3D%22%23FFA500%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF9C00%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint2_linear_9041_276%22%20x1%3D%2214.858%22%20y1%3D%2215.1648%22%20x2%3D%22-7.9003%22%20y2%3D%2237.9231%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FF3A44%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C31162%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint3_linear_9041_276%22%20x1%3D%22-2.67164%22%20y1%3D%22-6.95511%22%20x2%3D%227.49088%22%20y2%3D%223.20741%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2332A071%22%2F%3E%0A%3Cstop%20offset%3D%220.0685%22%20stop-color%3D%22%232DA771%22%2F%3E%0A%3Cstop%20offset%3D%220.4762%22%20stop-color%3D%22%2315CF74%22%2F%3E%0A%3Cstop%20offset%3D%220.8009%22%20stop-color%3D%22%2306E775%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300F076%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A";
+export const imgStoreBadge = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%20135%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Bg%22%3E%0A%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.7566%201.72057e-06H124.249C124.655%201.72057e-06%20125.067%20-0.000128279%20125.472%200.00187172C125.753%200.00346346%20126.039%200.00766047%20126.322%200.0118031C126.386%200.0127355%20126.449%200.0136652%20126.512%200.0145617C127.269%200.0220095%20128.023%200.0811045%20128.769%200.191322C129.518%200.304242%20130.243%200.515569%20130.921%200.818322C132.278%201.43603%20133.383%202.4152%20134.079%203.61812C134.419%204.2175%20134.655%204.85928%20134.777%205.52144C134.903%206.18324%20134.973%206.85242%20134.987%207.52344C134.991%207.83008%20134.991%208.1377%20134.991%208.44434C135%208.80664%20135%209.16992%20135%209.53613V30.4648C135%2030.834%20135%2031.1953%20134.991%2031.5586C134.991%2031.8691%20134.991%2032.1699%20134.987%2032.4805C134.973%2033.1515%20134.903%2033.8206%20134.777%2034.4824C134.655%2035.1449%20134.42%2035.7871%20134.079%2036.3867C133.733%2036.9835%20133.283%2037.5282%20132.746%2038.001C132.213%2038.4778%20131.597%2038.8758%20130.921%2039.1797C130.243%2039.4833%20129.518%2039.6958%20128.769%2039.8105C128.023%2039.9198%20127.268%2039.9789%20126.512%2039.9873C126.169%2039.9941%20125.816%2039.998%20125.472%2039.998C125.067%2040%20124.655%2040%20124.249%2040H10.7566C10.343%2040%209.93419%2040%209.5216%2039.998C9.17621%2039.998%208.83358%2039.9941%208.48488%2039.9873C7.72738%2039.9785%206.9717%2039.9194%206.22416%2039.8105C5.47772%2039.6966%204.75481%2039.484%204.07967%2039.1797C3.40371%2038.876%202.78717%2038.478%202.25357%2038.001C1.71505%2037.5301%201.26616%2036.9849%200.924356%2036.3867C0.581124%2035.7875%200.343339%2035.1453%200.219258%2034.4824C0.0936522%2033.8207%200.0260614%2033.1514%200.0170916%2032.4805C0.00993901%2032.2683%200.00715699%2032.0607%200.00435296%2031.8514C0.0030527%2031.7544%200.00174771%2031.657%200%2031.5586V8.44434C0.00176842%208.34604%200.00308357%208.24765%200.00439918%208.14922C0.0071877%207.94059%200.00997831%207.7318%200.0170916%207.52348C0.0260586%206.85252%200.0936495%206.18319%200.219258%205.52148C0.343683%204.85894%200.581453%204.21711%200.924356%203.61816C1.26632%203.01802%201.71514%202.47064%202.25357%201.99707C2.7892%201.52217%203.40534%201.12447%204.07967%200.818412C4.75482%200.514917%205.4778%200.303534%206.22416%200.191412C6.97157%200.081678%207.72733%200.0226035%208.48488%200.0147017C8.55727%200.0136865%208.6294%200.0126317%208.70135%200.0115795C8.97596%200.00756356%209.24792%200.00358651%209.5216%200.00200172C9.9342%201.72062e-06%2010.3429%201.72057e-06%2010.7566%201.72057e-06ZM8.40804%2039.1173C8.74966%2039.1241%209.08566%2039.128%209.42998%2039.128L124.35%2039.13L125.576%2039.128C125.912%2039.128%20126.259%2039.1241%20126.59%2039.1173C127.297%2039.1097%20128.004%2039.0551%20128.702%2038.9542C129.358%2038.8557%20129.993%2038.6703%20130.587%2038.4043C131.173%2038.1407%20131.707%2037.7954%20132.169%2037.3815C132.631%2036.9758%20133.018%2036.5081%20133.316%2035.9956C133.615%2035.4698%20133.821%2034.9064%20133.927%2034.3252C134.042%2033.7122%20134.106%2033.0926%20134.12%2032.4713C134.124%2032.1646%20134.124%2031.8667%20134.124%2031.5414C134.133%2031.1839%20134.133%2030.8294%20134.133%2030.466V9.53295C134.133%209.17301%20134.133%208.81601%20134.124%208.44093C134.124%208.13813%20134.124%207.83386%20134.121%207.55061C134.107%206.91801%20134.042%206.28713%20133.924%205.663C133.818%205.0894%20133.614%204.53335%20133.32%204.01374C132.718%202.97461%20131.763%202.12826%20130.59%201.5933C129.995%201.32872%20129.359%201.14404%20128.702%201.04533C128.008%200.944474%20127.306%200.890111%20126.602%200.882711L125.57%200.870008H9.43053L8.41082%200.882221C7.70067%200.890008%206.99218%200.94486%206.29129%201.04631C5.6412%201.1438%205.01136%201.3272%204.42286%201.59037C3.83742%201.85582%203.30266%202.20091%202.83807%202.61305C2.37296%203.02132%201.98554%203.4935%201.69085%204.01129C1.39165%204.53452%201.18454%205.09514%201.07668%205.67374C0.960772%206.2928%200.898236%206.91875%200.889618%207.5462C0.883007%207.74938%200.873016%208.44093%200.873016%208.44093V31.5463C0.873016%2031.5463%200.882396%2032.2487%200.889561%2032.4596C0.898562%2033.0881%200.961463%2033.715%201.07772%2034.335C1.18538%2034.912%201.39233%2035.471%201.69137%2035.9925C1.98715%2036.5107%202.37673%2036.9825%202.84466%2037.3893C3.30591%2037.801%203.83897%2038.1443%204.42342%2038.4062C5.01327%2038.6702%205.6443%2038.8549%206.29571%2038.9542C6.9943%2039.0546%207.70034%2039.1091%208.40804%2039.1173Z%22%20fill%3D%22var(--fill-0%2C%20%23A6A6A6)%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M9.42998%2039.128C9.08566%2039.128%208.74966%2039.1241%208.40804%2039.1173C7.70034%2039.1091%206.9943%2039.0546%206.29571%2038.9542C5.6443%2038.8549%205.01327%2038.6702%204.42342%2038.4062C3.83897%2038.1443%203.30591%2037.801%202.84466%2037.3893C2.37673%2036.9825%201.98715%2036.5107%201.69137%2035.9926C1.39233%2035.471%201.18538%2034.912%201.07772%2034.335C0.961463%2033.715%200.898562%2033.0881%200.889561%2032.4596C0.882396%2032.2487%200.873016%2031.5463%200.873016%2031.5463V8.44093C0.873016%208.44093%200.883007%207.74937%200.889618%207.5462C0.898236%206.91875%200.960772%206.29279%201.07668%205.67374C1.18454%205.09514%201.39165%204.53452%201.69085%204.01129C1.98554%203.4935%202.37296%203.02132%202.83807%202.61305C3.30266%202.20091%203.83742%201.85582%204.42286%201.59037C5.01136%201.3272%205.6412%201.1438%206.29129%201.04631C6.99218%200.944858%207.70067%200.890007%208.41082%200.882219L9.43053%200.870007H125.57L126.602%200.882709C127.306%200.89011%20128.008%200.944472%20128.702%201.04533C129.359%201.14404%20129.995%201.32872%20130.59%201.5933C131.763%202.12826%20132.718%202.97461%20133.32%204.01373C133.614%204.53335%20133.818%205.0894%20133.924%205.663C134.042%206.28713%20134.107%206.91801%20134.121%207.5506C134.124%207.83386%20134.124%208.13813%20134.124%208.44093C134.133%208.81601%20134.133%209.17301%20134.133%209.53295V30.466C134.133%2030.8294%20134.133%2031.1839%20134.124%2031.5414C134.124%2031.8667%20134.124%2032.1646%20134.12%2032.4713C134.106%2033.0926%20134.042%2033.7122%20133.927%2034.3252C133.821%2034.9064%20133.615%2035.4698%20133.316%2035.9956C133.018%2036.5081%20132.631%2036.9758%20132.169%2037.3815C131.707%2037.7954%20131.173%2038.1407%20130.587%2038.4043C129.994%2038.6703%20129.358%2038.8557%20128.702%2038.9542C128.004%2039.0551%20127.297%2039.1097%20126.59%2039.1173C126.259%2039.1241%20125.912%2039.128%20125.576%2039.128L124.35%2039.13L9.42998%2039.128Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGroup = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2018%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22%26%2360%3BGroup%26%2362%3B%22%3E%0A%3Cpath%20id%3D%22%26%2360%3BPath%26%2362%3B%22%20d%3D%22M14.7973%2011.5804C14.8081%2010.7457%2015.0298%209.92737%2015.4418%209.20142C15.8538%208.47546%2016.4428%207.86552%2017.1539%207.42835C16.7021%206.78319%2016.1062%206.25225%2015.4134%205.8777C14.7205%205.50314%2013.9499%205.2953%2013.1627%205.27067C11.4835%205.09441%209.85552%206.2755%208.99981%206.2755C8.12754%206.2755%206.81004%205.28817%205.39131%205.31736C4.47364%205.34701%203.57929%205.61386%202.79541%206.09192C2.01154%206.56998%201.36486%207.24294%200.918393%208.04523C-1.01561%2011.3936%200.426982%2016.3147%202.27959%2019.0213C3.20649%2020.3467%204.28977%2021.8271%205.70722%2021.7746C7.09428%2021.7171%207.61232%2020.8901%209.28662%2020.8901C10.9454%2020.8901%2011.4314%2021.7746%2012.8776%2021.7412C14.366%2021.7171%2015.3038%2020.41%2016.1981%2019.0721C16.8641%2018.1277%2017.3766%2017.084%2017.7166%2015.9796C16.8518%2015.6139%2016.1139%2015.0017%2015.5948%2014.2194C15.0757%2013.4371%2014.7983%2012.5193%2014.7973%2011.5804V11.5804Z%22%20fill%3D%22var(--fill-0%2C%20white)%22%2F%3E%0A%3Cpath%20id%3D%22%26%2360%3BPath%26%2362%3B_2%22%20d%3D%22M12.0657%203.49062C12.8772%202.51641%2013.277%201.26423%2013.1802%200C11.9404%200.13022%2010.7951%200.722779%209.97262%201.65961C9.57048%202.11728%209.26248%202.64971%209.06624%203.22648C8.86999%203.80325%208.78935%204.41304%208.82891%205.021C9.44905%205.02739%2010.0626%204.89297%2010.6232%204.62788C11.1839%204.3628%2011.6771%203.97395%2012.0657%203.49062Z%22%20fill%3D%22var(--fill-0%2C%20white)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgText1 = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2076%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Text%22%3E%0A%3Cg%20id%3D%22Vector%22%3E%0A%3Cpath%20d%3D%22M7.875%2018.7026H3.1416L2.00488%2022.0591H0L4.4834%209.64109H6.5664L11.0498%2022.0591H9.01073L7.875%2018.7026ZM3.63183%2017.1538H7.38383L5.53422%2011.7065H5.48246L3.63183%2017.1538Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M20.7324%2017.5327C20.7324%2020.3462%2019.2266%2022.1538%2016.9541%2022.1538C16.3784%2022.1839%2015.8059%2022.0513%2015.3022%2021.7712C14.7984%2021.491%2014.3836%2021.0747%2014.1055%2020.5698H14.0625V25.0542H12.2041V13.0054H14.0029V14.5112H14.0371C14.3281%2014.0088%2014.7498%2013.5946%2015.2574%2013.3127C15.7651%2013.0309%2016.3396%2012.8919%2016.9199%2012.9106C19.2177%2012.9107%2020.7324%2014.7271%2020.7324%2017.5327ZM18.8223%2017.5327C18.8223%2015.6997%2017.875%2014.4946%2016.4297%2014.4946C15.0098%2014.4946%2014.0547%2015.7251%2014.0547%2017.5327C14.0547%2019.3569%2015.0098%2020.5786%2016.4297%2020.5786C17.875%2020.5786%2018.8223%2019.3823%2018.8223%2017.5327Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M30.6973%2017.5327C30.6973%2020.3462%2029.1914%2022.1538%2026.9189%2022.1538C26.3433%2022.1839%2025.7708%2022.0513%2025.267%2021.7712C24.7632%2021.491%2024.3485%2021.0747%2024.0703%2020.5698H24.0273V25.0542H22.1689V13.0054H23.9677V14.5112H24.0019C24.2929%2014.0088%2024.7146%2013.5946%2025.2222%2013.3127C25.7299%2013.0309%2026.3044%2012.8919%2026.8847%2012.9107C29.1826%2012.9107%2030.6973%2014.7271%2030.6973%2017.5327ZM28.7871%2017.5327C28.7871%2015.6997%2027.8398%2014.4946%2026.3945%2014.4946C24.9746%2014.4946%2024.0195%2015.7251%2024.0195%2017.5327C24.0195%2019.3569%2024.9746%2020.5786%2026.3945%2020.5786C27.8398%2020.5786%2028.7871%2019.3823%2028.7871%2017.5327Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M37.2832%2018.5991C37.4209%2019.8306%2038.6172%2020.6391%2040.252%2020.6391C41.8184%2020.6391%2042.9453%2019.8305%2042.9453%2018.7202C42.9453%2017.7563%2042.2656%2017.1792%2040.6562%2016.7837L39.0469%2016.396C36.7666%2015.8452%2035.708%2014.7788%2035.708%2013.0483C35.708%2010.9057%2037.5752%209.43403%2040.2266%209.43403C42.8506%209.43403%2044.6494%2010.9057%2044.71%2013.0483H42.834C42.7217%2011.809%2041.6972%2011.061%2040.2002%2011.061C38.7031%2011.061%2037.6787%2011.8178%2037.6787%2012.9194C37.6787%2013.7973%2038.333%2014.3139%2039.9336%2014.7094L41.3017%2015.0453C43.8496%2015.6479%2044.9082%2016.6713%2044.9082%2018.4877C44.9082%2020.811%2043.0576%2022.266%2040.1142%2022.266C37.3603%2022.266%2035.5009%2020.8451%2035.3808%2018.599L37.2832%2018.5991Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M48.9189%2010.8628V13.0054H50.6406V14.4771H48.9189V19.4683C48.9189%2020.2437%2049.2637%2020.605%2050.0205%2020.605C50.2249%2020.6014%2050.429%2020.5871%2050.6318%2020.562V22.0249C50.2916%2022.0885%2049.9457%2022.1172%2049.5996%2022.1108C47.7666%2022.1108%2047.0518%2021.4223%2047.0518%2019.6665V14.4771H45.7354V13.0054H47.0517V10.8628H48.9189Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M51.6377%2017.5327C51.6377%2014.6841%2053.3155%2012.8941%2055.9317%2012.8941C58.5567%2012.8941%2060.2266%2014.6841%2060.2266%2017.5327C60.2266%2020.3892%2058.5655%2022.1714%2055.9317%2022.1714C53.2988%2022.1714%2051.6377%2020.3892%2051.6377%2017.5327ZM58.333%2017.5327C58.333%2015.5786%2057.4375%2014.4253%2055.9317%2014.4253C54.4258%2014.4253%2053.5313%2015.5874%2053.5313%2017.5327C53.5313%2019.4946%2054.4258%2020.6392%2055.9317%2020.6392C57.4375%2020.6392%2058.333%2019.4946%2058.333%2017.5327Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M61.7588%2013.0054H63.5312V14.5464H63.5742C63.6942%2014.0651%2063.9761%2013.6398%2064.3727%2013.3419C64.7693%2013.044%2065.2563%2012.8917%2065.752%2012.9106C65.9661%2012.9099%2066.1797%2012.9331%2066.3887%2012.98V14.7183C66.1183%2014.6356%2065.8363%2014.5977%2065.5537%2014.606C65.2837%2014.595%2065.0146%2014.6426%2064.7647%2014.7455C64.5149%2014.8484%2064.2903%2015.0041%2064.1063%2015.202C63.9223%2015.3999%2063.7833%2015.6353%2063.6989%2015.8919C63.6145%2016.1486%2063.5866%2016.4205%2063.6172%2016.689V22.0591H61.7588L61.7588%2013.0054Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M74.957%2019.3999C74.707%2021.0435%2073.1064%2022.1714%2071.0586%2022.1714C68.4248%2022.1714%2066.79%2020.4067%2066.79%2017.5757C66.79%2014.7358%2068.4336%2012.894%2070.9805%2012.894C73.4853%2012.894%2075.0606%2014.6147%2075.0606%2017.3599V17.9966H68.666V18.1089C68.6365%2018.4421%2068.6782%2018.7778%2068.7884%2019.0936C68.8986%2019.4094%2069.0747%2019.6982%2069.3051%2019.9408C69.5354%2020.1833%2069.8147%2020.3741%2070.1245%2020.5004C70.4342%2020.6267%2070.7673%2020.6856%2071.1016%2020.6733C71.5407%2020.7145%2071.9814%2020.6128%2072.3582%2020.3833C72.7349%2020.1539%2073.0274%2019.809%2073.1924%2019.3999L74.957%2019.3999ZM68.6748%2016.6978H73.2012C73.2179%2016.3982%2073.1724%2016.0983%2073.0678%2015.8171C72.9631%2015.5359%2072.8014%2015.2794%2072.5929%2015.0636C72.3844%2014.8479%2072.1335%2014.6775%2071.856%2014.5633C71.5785%2014.4491%2071.2805%2014.3935%2070.9805%2014.3999C70.6778%2014.3981%2070.3778%2014.4562%2070.0978%2014.571C69.8178%2014.6857%2069.5632%2014.8548%2069.3489%2015.0684C69.1345%2015.2821%2068.9646%2015.536%2068.8489%2015.8157C68.7332%2016.0953%2068.674%2016.3951%2068.6748%2016.6978Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22Vector_2%22%3E%0A%3Cpath%20d%3D%22M3.39891%200.293999C3.78853%200.26604%204.17949%200.3249%204.5436%200.466333C4.90771%200.607766%205.2359%200.828247%205.50449%201.11187C5.77307%201.3955%205.97536%201.7352%206.09676%202.10647C6.21817%202.47774%206.25566%202.87132%206.20653%203.25884C6.20653%205.16509%205.17626%206.26084%203.39891%206.26084H1.24364V0.293999H3.39891ZM2.17039%205.417H3.29539C3.5738%205.43364%203.85241%205.38799%204.11095%205.28338C4.36949%205.17876%204.60145%205.01782%204.78994%204.81225C4.97844%204.60669%205.11872%204.36168%205.20058%204.09506C5.28244%203.82844%205.30382%203.54692%205.26316%203.271C5.30087%202.99617%205.27732%202.71639%205.19421%202.45173C5.11109%202.18707%204.97046%201.94406%204.78239%201.74013C4.59433%201.5362%204.36349%201.37639%204.10641%201.27216C3.84933%201.16792%203.57238%201.12184%203.29539%201.13721H2.17039V5.417Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M7.2534%204.00734C7.22509%203.71142%207.25895%203.41285%207.35279%203.13078C7.44663%202.84871%207.59838%202.58937%207.79833%202.36939C7.99827%202.14941%208.24198%201.97364%208.51383%201.85337C8.78568%201.73309%209.07967%201.67096%209.37694%201.67096C9.67421%201.67096%209.9682%201.73309%2010.24%201.85337C10.5119%201.97364%2010.7556%202.14941%2010.9556%202.36939C11.1555%202.58937%2011.3073%202.84871%2011.4011%203.13078C11.4949%203.41285%2011.5288%203.71142%2011.5005%204.00734C11.5293%204.30356%2011.4959%204.60254%2011.4023%204.88507C11.3087%205.16759%2011.157%205.42741%2010.957%205.64783C10.757%205.86824%2010.5131%206.04437%2010.241%206.16491C9.96889%206.28544%209.67456%206.34771%209.37694%206.34771C9.07932%206.34771%208.78498%206.28544%208.51286%206.16491C8.24074%206.04437%207.99684%205.86824%207.79685%205.64783C7.59686%205.42741%207.44519%205.16759%207.3516%204.88507C7.25801%204.60254%207.22456%204.30356%207.2534%204.00734ZM10.5864%204.00734C10.5864%203.03127%2010.1479%202.46047%209.3784%202.46047C8.60594%202.46047%208.1714%203.03127%208.1714%204.00735C8.1714%204.99124%208.60597%205.55764%209.3784%205.55764C10.1479%205.55763%2010.5864%204.98732%2010.5864%204.00734Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M17.146%206.26075H16.2241L15.2935%202.94434H15.2231L14.2964%206.26075H13.3833L12.1421%201.75782H13.0435L13.8501%205.19382H13.9165L14.8423%201.75782H15.6948L16.6206%205.19382H16.6909L17.4936%201.75782H18.3823L17.146%206.26075Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M19.4263%201.75782H20.2817V2.47315H20.3481C20.4608%202.21623%2020.6508%202.00086%2020.8917%201.85705C21.1325%201.71324%2021.4123%201.64817%2021.6919%201.6709C21.911%201.65443%2022.131%201.68746%2022.3356%201.76756C22.5402%201.84765%2022.7241%201.97276%2022.8738%202.1336C23.0235%202.29445%2023.1351%202.48691%2023.2003%202.69673C23.2655%202.90655%2023.2826%203.12835%2023.2505%203.3457V6.2607H22.3618V3.56886C22.3618%202.84523%2022.0474%202.48536%2021.3901%202.48536C21.2414%202.47843%2021.0929%202.50375%2020.9548%202.55958C20.8168%202.61541%2020.6924%202.70043%2020.5903%202.80882C20.4882%202.9172%2020.4107%203.04639%2020.3631%203.18752C20.3156%203.32865%2020.2992%203.47839%2020.3149%203.62647V6.26075H19.4263L19.4263%201.75782Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M24.6665%200H25.5552V6.26074H24.6665V0Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M26.7905%204.00734C26.7622%203.7114%2026.7961%203.41282%2026.89%203.13074C26.9838%202.84866%2027.1356%202.58931%2027.3356%202.36932C27.5355%202.14933%2027.7793%201.97356%2028.0511%201.85329C28.323%201.73301%2028.617%201.67088%2028.9143%201.67088C29.2116%201.67088%2029.5056%201.73301%2029.7775%201.85329C30.0493%201.97356%2030.2931%202.14933%2030.493%202.36932C30.693%202.58931%2030.8448%202.84866%2030.9386%203.13074C31.0325%203.41282%2031.0664%203.7114%2031.0381%204.00734C31.0669%204.30357%2031.0334%204.60256%2030.9398%204.88508C30.8462%205.16761%2030.6945%205.42742%2030.4944%205.64783C30.2944%205.86823%2030.0505%206.04436%2029.7784%206.16489C29.5063%206.28542%2029.2119%206.34768%2028.9143%206.34768C28.6167%206.34768%2028.3223%206.28542%2028.0502%206.16489C27.778%206.04436%2027.5341%205.86823%2027.3341%205.64783C27.1341%205.42742%2026.9824%205.16761%2026.8888%204.88508C26.7952%204.60256%2026.7617%204.30357%2026.7905%204.00734ZM30.1235%204.00734C30.1235%203.03127%2029.685%202.46047%2028.9155%202.46047C28.143%202.46047%2027.7085%203.03127%2027.7085%204.00735C27.7085%204.99124%2028.1431%205.55764%2028.9155%205.55764C29.685%205.55763%2030.1235%204.98732%2030.1235%204.00734Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M31.9736%204.98732C31.9736%204.17677%2032.5771%203.70949%2033.6484%203.64308L34.8682%203.57277V3.1841C34.8682%202.70851%2034.5537%202.43996%2033.9463%202.43996C33.4502%202.43996%2033.1064%202.62209%2033.0078%202.94045H32.1475C32.2383%202.16701%2032.9658%201.67092%2033.9873%201.67092C35.1162%201.67092%2035.7529%202.23292%2035.7529%203.1841V6.26076H34.8975V5.62795H34.8271C34.6844%205.85494%2034.484%206.03999%2034.2464%206.1642C34.0088%206.28841%2033.7424%206.34733%2033.4746%206.33495C33.2856%206.35461%2033.0945%206.33444%2032.9137%206.27575C32.733%206.21705%2032.5665%206.12112%2032.4251%205.99415C32.2837%205.86718%2032.1705%205.71199%2032.0927%205.53857C32.0149%205.36516%2031.9744%205.17737%2031.9736%204.98732ZM34.8682%204.60255V4.22609L33.7685%204.2964C33.1484%204.3379%2032.8672%204.54884%2032.8672%204.94581C32.8672%205.35108%2033.2187%205.58692%2033.7022%205.58692C33.8438%205.60126%2033.9869%205.58696%2034.1229%205.54487C34.2589%205.50278%2034.3851%205.43376%2034.4938%205.34192C34.6026%205.25007%2034.6918%205.13729%2034.7561%205.01027C34.8204%204.88325%2034.8585%204.74459%2034.8682%204.60255Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M36.9209%204.00734C36.9209%202.58449%2037.6523%201.68312%2038.79%201.68312C39.0714%201.67015%2039.3507%201.73756%2039.5953%201.87745C39.8398%202.01735%2040.0394%202.22395%2040.1709%202.47312H40.2373V0H41.126V6.26074H40.2744V5.54931H40.2041C40.0625%205.7968%2039.8559%206.00083%2039.6066%206.13932C39.3574%206.2778%2039.075%206.34545%2038.79%206.33495C37.6445%206.335%2036.9209%205.43361%2036.9209%204.00734ZM37.8389%204.00734C37.8389%204.96242%2038.2891%205.53713%2039.042%205.53713C39.791%205.53713%2040.2539%204.95413%2040.2539%204.01125C40.2539%203.07277%2039.7862%202.48146%2039.042%202.48146C38.2939%202.48146%2037.8389%203.06007%2037.8389%204.00734Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M44.8027%204.00734C44.7744%203.71142%2044.8083%203.41285%2044.9021%203.13078C44.9959%202.84871%2045.1477%202.58937%2045.3476%202.36939C45.5476%202.14941%2045.7913%201.97364%2046.0631%201.85337C46.335%201.73309%2046.629%201.67096%2046.9263%201.67096C47.2235%201.67096%2047.5175%201.73309%2047.7894%201.85337C48.0612%201.97364%2048.3049%202.14941%2048.5049%202.36939C48.7048%202.58937%2048.8566%202.84871%2048.9504%203.13078C49.0442%203.41285%2049.0781%203.71142%2049.0498%204.00734C49.0786%204.30356%2049.0452%204.60254%2048.9516%204.88507C48.858%205.16759%2048.7063%205.42741%2048.5063%205.64783C48.3064%205.86824%2048.0625%206.04437%2047.7903%206.16491C47.5182%206.28544%2047.2239%206.34771%2046.9263%206.34771C46.6286%206.34771%2046.3343%206.28544%2046.0622%206.16491C45.7901%206.04437%2045.5462%205.86824%2045.3462%205.64783C45.1462%205.42741%2044.9945%205.16759%2044.9009%204.88507C44.8073%204.60254%2044.7739%204.30356%2044.8027%204.00734ZM48.1357%204.00734C48.1357%203.03127%2047.6972%202.46047%2046.9277%202.46047C46.1553%202.46047%2045.7207%203.03127%2045.7207%204.00735C45.7207%204.99124%2046.1553%205.55764%2046.9277%205.55764C47.6973%205.55763%2048.1357%204.98732%2048.1357%204.00734Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M50.2422%201.75782H51.0976V2.47315H51.1641C51.2767%202.21623%2051.4667%202.00086%2051.7076%201.85705C51.9485%201.71324%2052.2282%201.64817%2052.5078%201.6709C52.7269%201.65443%2052.9469%201.68746%2053.1515%201.76756C53.3561%201.84765%2053.5401%201.97276%2053.6897%202.1336C53.8394%202.29445%2053.951%202.48691%2054.0162%202.69673C54.0814%202.90655%2054.0986%203.12835%2054.0664%203.3457V6.2607H53.1777V3.56886C53.1777%202.84523%2052.8633%202.48536%2052.206%202.48536C52.0573%202.47843%2051.9088%202.50375%2051.7707%202.55958C51.6327%202.61541%2051.5083%202.70043%2051.4062%202.80882C51.3041%202.9172%2051.2266%203.04639%2051.1791%203.18752C51.1315%203.32865%2051.1151%203.47839%2051.1308%203.62647V6.26075H50.2422V1.75782Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M59.0879%200.63673V1.77833H60.0635V2.52687H59.0879V4.8423C59.0879%205.31398%2059.2822%205.52052%2059.7246%205.52052C59.8379%205.52016%2059.951%205.51331%2060.0635%205.50001V6.24024C59.9039%206.26879%2059.7422%206.28398%2059.5801%206.28565C58.5918%206.28565%2058.1982%205.93799%2058.1982%205.06983V2.52683H57.4834V1.77829H58.1982V0.63673H59.0879Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M61.2773%200H62.1582V2.48145H62.2285C62.3466%202.22213%2062.5419%202.00554%2062.7876%201.86119C63.0332%201.71684%2063.3175%201.65176%2063.6015%201.67481C63.8195%201.66295%2064.0374%201.69934%2064.2396%201.78138C64.4419%201.86342%2064.6236%201.9891%2064.7717%202.14943C64.9198%202.30977%2065.0307%202.50082%2065.0965%202.70896C65.1623%202.91709%2065.1813%203.13718%2065.1523%203.35352V6.26075H64.2627V3.57275C64.2627%202.85351%2063.9277%202.48925%2063.2998%202.48925C63.1471%202.47672%2062.9935%202.49772%2062.8497%202.55077C62.7059%202.60383%2062.5755%202.68766%2062.4675%202.79639C62.3595%202.90513%2062.2765%203.03615%2062.2245%203.18029C62.1724%203.32443%2062.1525%203.4782%2062.166%203.63085V6.26073H61.2774L61.2773%200Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M70.334%205.04493C70.2132%205.45647%2069.9516%205.81245%2069.5949%206.0506C69.2383%206.28875%2068.8092%206.3939%2068.3828%206.34766C68.0861%206.35549%2067.7913%206.29867%2067.5188%206.18114C67.2463%206.06361%2067.0027%205.88819%2066.8047%205.66706C66.6068%205.44592%2066.4594%205.18436%2066.3727%204.90054C66.286%204.61672%2066.2622%204.31743%2066.3027%204.02345C66.2632%203.72856%2066.2875%203.42863%2066.374%203.14396C66.4605%202.85929%2066.6071%202.59652%2066.804%202.37345C67.0009%202.15037%2067.2434%201.9722%2067.5151%201.85099C67.7868%201.72979%2068.0814%201.66837%2068.3789%201.67091C69.6318%201.67091%2070.3877%202.52691%2070.3877%203.94091V4.251H67.208V4.3008C67.1941%204.46605%2067.2149%204.63238%2067.269%204.78913C67.3231%204.94588%2067.4094%205.08958%2067.5223%205.21104C67.6352%205.3325%2067.7722%205.42902%2067.9246%205.49441C68.077%205.55981%2068.2414%205.59264%2068.4072%205.5908C68.6198%205.61632%2068.8351%205.57804%2069.0259%205.48083C69.2167%205.38363%2069.3742%205.23188%2069.4785%205.0449L70.334%205.04493ZM67.208%203.59376H69.4824C69.4936%203.44263%2069.473%203.29083%2069.4221%203.14811C69.3711%203.0054%2069.2909%202.87492%2069.1865%202.76506C69.0821%202.6552%2068.9559%202.5684%2068.816%202.51022C68.676%202.45205%2068.5255%202.42379%2068.374%202.42726C68.2203%202.42533%2068.0678%202.45419%2067.9254%202.51213C67.783%202.57008%2067.6537%202.65594%2067.545%202.76465C67.4364%202.87336%2067.3506%203.00273%2067.2927%203.14512C67.2348%203.28752%2067.206%203.44006%2067.208%203.59376Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgImageSvgrepoCom = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22image_svgrepo.com%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M52.5%2040V50C52.5%2051.3807%2051.3807%2052.5%2050%2052.5H10C8.6193%2052.5%207.5%2051.3807%207.5%2050V45M52.5%2040V10C52.5%208.6193%2051.3807%207.5%2050%207.5H10C8.6193%207.5%207.5%208.6193%207.5%2010V45M52.5%2040L38.7072%2030.8048C37.9607%2030.307%2037.0047%2030.2475%2036.2022%2030.6487L7.5%2045%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M20%2027.5C22.7614%2027.5%2025%2025.2614%2025%2022.5C25%2019.7386%2022.7614%2017.5%2020%2017.5C17.2386%2017.5%2015%2019.7386%2015%2022.5C15%2025.2614%2017.2386%2027.5%2020%2027.5Z%22%20stroke%3D%22var(--stroke-0%2C%20white)%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
\ No newline at end of file
diff --git a/src/imports/svg-1i81mccly7.ts b/src/imports/svg-1i81mccly7.ts
new file mode 100644
index 0000000..da9661b
--- /dev/null
+++ b/src/imports/svg-1i81mccly7.ts
@@ -0,0 +1,7 @@
+export default {
+p28e1e680: "M249.213 61.9424V159.243H157.654",
+p2c99d260: "M361.481 299.804L346.814 291.632L349.831 287.274H346.814L344.802 280.233L320.329 275.54L314.294 278.892L304.907 267.494H301.554V260.118L295.855 257.101L293.508 258.442L288.815 252.743H284.792H279.251",
+p39dfe300: "M2.67661 144.624C2.84461 143.953 -1.17839 141.942 2.67661 138.087C6.53161 134.232 3.1796 128.7 3.5146 126.018C3.8496 123.336 5.86161 119.305 7.36961 119.058C8.87861 118.811 9.21361 124.175 12.2306 123.169C15.2476 122.163 11.3926 118.475 14.2426 116.296C17.0926 114.117 23.2946 113.614 27.8206 108.25C32.3466 102.886 33.0166 103.557 39.8896 103.724C46.7626 103.892 50.4496 99.0314 53.9706 99.5334C57.4906 100.036 57.3236 95.8454 63.5256 95.5104C69.7276 95.1754 74.0866 93.6664 79.2826 89.1404C84.4786 84.6144 82.9706 82.4354 85.8196 84.1114C88.6696 85.7874 92.5666 75.1434 90.4296 75.0174C88.2926 74.8914 86.1546 71.3714 88.2926 70.2404C90.4296 69.1084 89.2986 65.4634 92.4416 63.8284C95.5846 62.1944 98.9786 59.5534 99.2306 61.5654C99.4816 63.5774 99.2306 66.9714 101.871 69.4854C104.511 71.9994 105.768 71.7484 106.523 70.2394C107.277 68.7304 105.894 66.3424 106.523 65.0854C107.152 63.8284 103.003 58.1704 106.02 58.0454C109.037 57.9194 112.683 59.5544 115.449 58.0454C118.215 56.5364 114.946 54.6504 115.449 52.5134C115.952 50.3764 114.317 47.4844 118.341 47.3594C122.364 47.2334 121.484 49.2454 122.49 44.0904C123.496 38.9364 123.496 37.9304 126.262 37.9304C129.028 37.9304 129.908 31.3934 133.428 31.7704C136.948 32.1474 136.948 34.1594 142.103 34.6614C147.258 35.1644 148.892 40.8214 148.012 40.6964C147.132 40.5704 148.338 43.8394 148.238 45.2224C148.138 46.6054 149.898 46.8564 150.904 45.5994C151.91 44.3424 152.915 43.5874 154.927 43.9654C156.939 44.3424 159.579 46.7314 162.722 45.7254C165.865 44.7194 164.734 43.0854 164.734 41.5764C164.734 40.0674 164.105 37.6794 162.597 36.7994C161.088 35.9194 161.591 33.4514 164.231 32.4854C166.871 31.5194 164.985 25.6104 167.877 25.8614C170.769 26.1124 169.511 23.3474 170.14 21.3354C170.769 19.3234 172.277 19.8264 177.935 18.8214C183.592 17.8154 185.227 15.4274 189.753 15.8044C194.279 16.1814 195.159 16.9364 195.033 12.7874C194.907 8.6384 195.787 9.1414 193.399 8.0104C191.01 6.8784 188.496 4.9934 189.25 3.7364C190.004 2.4794 190.507 5.8734 193.525 6.5024C196.543 7.1314 198.051 7.2564 199.308 8.6394C200.565 10.0224 201.445 11.0284 205.594 10.7764C209.743 10.5254 208.36 12.7874 211.377 13.7934C214.394 14.7994 217.914 17.6904 222.315 16.1824C226.715 14.6734 228.475 13.4164 229.858 15.4284C231.241 17.4394 231.995 15.5544 234.258 16.0574C236.521 16.5604 236.395 18.9494 234.258 20.3314C232.121 21.7144 233.378 24.3544 231.995 25.3604C230.612 26.3664 229.983 23.7264 227.972 23.9774C225.96 24.2284 222.44 25.7374 225.206 28.5034C227.972 31.2694 228.098 31.8974 226.212 33.0294C224.326 34.1614 218.417 40.4464 221.56 42.3324C224.703 44.2184 231.995 48.3674 233 51.1324C234.006 53.8984 235.012 52.7664 239.537 54.7784C244.063 56.7904 246.452 60.9384 249.217 61.9444C251.983 62.9504 256.886 62.1954 259.777 66.9734C262.669 71.7504 273.229 72.2534 275.995 68.6074C278.761 64.9614 279.767 60.3094 281.904 59.1784C284.041 58.0474 280.27 50.3784 283.161 46.8584C286.052 43.3384 284.67 40.6984 284.795 36.8004C284.921 32.9034 281.275 30.7654 283.286 28.3774C285.298 25.9884 283.479 23.8514 285.017 21.8404C286.555 19.8294 287.812 20.3314 288.189 19.9544C288.566 19.5774 284.166 17.4404 285.8 15.4284C287.434 13.4164 287.103 13.7944 288.212 9.5194C289.32 5.2454 293.469 -1.1666 294.475 1.7244C295.481 4.6164 294.852 6.5014 296.487 9.3934C298.121 12.2854 300.887 14.2964 299.756 17.3134C298.624 20.3304 303.025 20.3304 302.647 24.6054C302.27 28.8794 302.898 38.5604 306.293 38.8114C309.687 39.0624 311.196 34.6624 313.333 37.9314C315.47 41.2004 322.133 41.4514 321.63 45.7264C321.127 50.0004 318.361 58.9274 323.139 61.5674C327.916 64.2074 325.653 64.8364 328.042 68.9844C330.431 73.1334 326.911 70.7444 328.042 75.6474C329.174 80.5504 333.322 78.4134 330.934 82.1844C328.545 85.9564 333.951 87.2134 336.088 88.0934C338.225 88.9734 343.128 88.9734 343.38 91.7394C343.632 94.5054 344.763 96.2104 349.792 97.1804C354.821 98.1504 355.324 99.0304 354.569 101.67C353.815 104.31 364.124 115.625 365.129 120.277C366.134 124.929 373.049 122.163 373.929 128.323C374.809 134.483 380.969 138.632 387.13 143.912C393.29 149.192 391.53 147.181 392.662 151.204C393.793 155.227 399.325 157.616 398.445 161.639C397.565 165.662 398.948 175.091 401.337 180.371C403.726 185.651 405.36 191.309 403.223 192.44C401.086 193.571 404.48 197.846 401.337 202.498C398.194 207.15 398.194 215.573 397.943 218.716C397.691 221.859 394.8 220.099 393.543 225.253C392.286 230.407 389.771 233.676 387.257 236.945C384.743 240.214 384.743 244.991 381.977 245.368C379.211 245.745 379.588 245.871 379.84 249.768C380.091 253.665 373.931 258.443 374.56 262.591C375.189 266.74 374.434 272.397 371.417 276.169C368.4 279.941 366.137 287.861 366.514 291.758C366.891 295.655 364 298.924 361.485 299.804C358.971 300.684 355.702 301.941 349.919 301.941C344.136 301.941 342.753 306.718 339.107 308.981C335.461 311.244 331.312 308.855 328.798 312.501C326.284 316.147 322.26 309.484 323.895 307.975C325.529 306.466 320.752 305.586 318.615 306.341C316.478 307.096 317.232 303.575 318.992 302.192C320.752 300.809 315.472 299.803 313.963 302.318C312.454 304.832 314.592 306.844 311.323 308.73C308.054 310.616 306.043 313.145 304.283 313.578C302.523 314.01 301.014 312.502 295.86 310.616C290.705 308.73 288.568 305.21 282.911 306.09C277.254 306.97 276.122 304.707 271.345 302.067C266.568 299.427 262.545 291.632 265.185 289.495C267.825 287.358 264.934 279.312 261.916 277.3C258.899 275.288 253.996 272.397 251.984 272.271C249.973 272.145 250.098 268.248 252.738 265.859C255.378 263.47 252.109 263.847 251.984 259.322C251.858 254.796 250.853 256.179 248.338 257.059C245.824 257.939 247.709 261.459 245.949 263.974C244.189 266.488 243.183 266.614 240.669 266.866C238.155 267.117 237.275 270.512 235.892 270.261C234.509 270.01 233.88 266.364 237.778 265.609C241.675 264.855 242.43 263.723 243.058 259.826C243.686 255.929 241.549 255.3 244.441 252.408C247.333 249.516 247.835 248.008 247.584 246.374C247.333 244.74 244.315 240.717 242.052 243.86C239.789 247.003 241.298 247.757 238.28 249.392C235.263 251.026 234.257 246.878 231.743 253.038C229.229 259.198 229.731 261.964 225.583 261.461C221.434 260.958 221.811 254.672 219.423 251.152C217.034 247.632 211.754 246.375 213.137 242.1C214.52 237.825 208.863 231.162 203.205 230.785C197.548 230.408 195.285 231.288 191.513 228.773C187.741 226.259 183.467 223.87 179.193 224.373C174.918 224.876 158.826 224.624 153.923 226.636C149.02 228.648 145.5 232.293 139.214 232.419C132.928 232.545 126.349 230.91 123.227 233.802C120.105 236.694 119.099 240.465 112.185 240.591C105.27 240.717 110.425 251.403 101.122 252.031C91.8186 252.66 94.0816 257.06 85.5326 254.168C76.9836 251.276 69.9436 252.911 65.9206 253.539C61.8976 254.168 64.5376 261.711 60.1376 260.328C55.7376 258.945 53.9776 259.951 50.3316 262.339C46.6856 264.728 36.8796 266.865 30.4676 263.219C24.0556 259.573 25.0616 260.453 20.9126 258.945C16.7636 257.436 13.8726 249.265 18.0206 248.51C22.1696 247.756 22.6726 249.013 22.9236 246.121C23.1756 243.229 21.5406 239.332 25.3126 236.818C29.0846 234.304 24.6836 229.778 24.1806 226.886C23.6776 223.994 17.3916 218.337 17.8946 209.034C18.3976 199.731 18.9006 198.096 16.2606 195.079C13.6206 192.062 14.5006 189.547 13.6206 186.279C12.7406 183.01 8.96861 185.525 7.96361 179.364C6.95761 173.204 -0.711394 165.786 1.55161 165.409C3.81461 165.032 4.5686 168.552 5.8266 165.158C7.0836 161.763 5.1976 158.998 7.7126 161.009C10.2266 163.021 8.96961 165.284 10.2266 163.021C11.4836 160.758 8.2146 157.238 8.0896 154.598C7.9576 151.957 2.67661 144.624 2.67661 144.624Z",
+p3aafe380: "M279.251 306.183V159.243H249.213",
+pcf0600: "M403.22 192.439H393.414H388.05L386.708 197.761H383.356V200.443H378.663V194.744L372.963 194.073L367.599 192.439L360.224 189.715L357.206 195.079H279.251",
+}
diff --git a/src/imports/svg-7b6pdtz4h8.ts b/src/imports/svg-7b6pdtz4h8.ts
new file mode 100644
index 0000000..aae1ed4
--- /dev/null
+++ b/src/imports/svg-7b6pdtz4h8.ts
@@ -0,0 +1,9 @@
+export default {
+p1a0ff300: "M0.700391 1.62325L1.6575 0.667047L6.87063 5.87837C6.95466 5.96188 7.02135 6.06118 7.06686 6.17055C7.11237 6.27993 7.1358 6.39723 7.1358 6.51569C7.1358 6.63416 7.11237 6.75146 7.06686 6.86084C7.02135 6.97021 6.95466 7.06951 6.87063 7.15302L1.6575 12.367L0.701293 11.4108L5.59418 6.51705L0.700391 1.62325Z",
+p268fe000: "M18.999 7H15.999V6C15.999 4.93913 15.5776 3.92172 14.8275 3.17157C14.0773 2.42143 13.0599 2 11.999 2C10.9382 2 9.92074 2.42143 9.1706 3.17157C8.42045 3.92172 7.99902 4.93913 7.99902 6V7H4.99902C4.73381 7 4.47945 7.10536 4.29192 7.29289C4.10438 7.48043 3.99902 7.73478 3.99902 8V19C3.99902 19.7956 4.31509 20.5587 4.8777 21.1213C5.44031 21.6839 6.20337 22 6.99902 22H16.999C17.7947 22 18.5577 21.6839 19.1203 21.1213C19.683 20.5587 19.999 19.7956 19.999 19V8C19.999 7.73478 19.8937 7.48043 19.7061 7.29289C19.5186 7.10536 19.2642 7 18.999 7ZM9.99902 6C9.99902 5.46957 10.2097 4.96086 10.5848 4.58579C10.9599 4.21071 11.4686 4 11.999 4C12.5295 4 13.0382 4.21071 13.4132 4.58579C13.7883 4.96086 13.999 5.46957 13.999 6V7H9.99902V6ZM17.999 19C17.999 19.2652 17.8937 19.5196 17.7061 19.7071C17.5186 19.8946 17.2642 20 16.999 20H6.99902C6.73381 20 6.47945 19.8946 6.29192 19.7071C6.10438 19.5196 5.99902 19.2652 5.99902 19V9H7.99902V10C7.99902 10.2652 8.10438 10.5196 8.29192 10.7071C8.47945 10.8946 8.73381 11 8.99902 11C9.26424 11 9.51859 10.8946 9.70613 10.7071C9.89367 10.5196 9.99902 10.2652 9.99902 10V9H13.999V10C13.999 10.2652 14.1044 10.5196 14.2919 10.7071C14.4795 10.8946 14.7338 11 14.999 11C15.2642 11 15.5186 10.8946 15.7061 10.7071C15.8937 10.5196 15.999 10.2652 15.999 10V9H17.999V19Z",
+p2d96d520: "M0.539921 1.24922L1.27616 0.513672L5.28626 4.52238C5.3509 4.58662 5.4022 4.663 5.43721 4.74714C5.47221 4.83127 5.49023 4.9215 5.49023 5.01263C5.49023 5.10376 5.47221 5.19399 5.43721 5.27812C5.4022 5.36226 5.3509 5.43864 5.28626 5.50288L1.27616 9.51367L0.540615 8.77813L4.30438 5.01367L0.539921 1.24922Z",
+p2e6ec460: "M0.726562 2.42193C1.98427 2.42193 2.92743 0.902344 2.92743 0.902344C2.92743 0.902344 3.87058 2.42193 5.12829 2.42193C6.386 2.42193 7.64321 0.902344 7.64321 0.902344C7.64321 0.902344 8.90092 2.42193 9.84407 2.42193M0.726562 5.96763C1.98427 5.96763 2.92743 4.44804 2.92743 4.44804C2.92743 4.44804 3.87058 5.96763 5.12829 5.96763C6.386 5.96763 7.64321 4.44804 7.64321 4.44804C7.64321 4.44804 8.90092 5.96763 9.84407 5.96763",
+p5f6c800: "M-7.29869 1.62339L-6.34158 0.667187L-1.12845 5.87851C-1.04442 5.96202 -0.977726 6.06131 -0.932218 6.17069C-0.886709 6.28007 -0.863281 6.39737 -0.863281 6.51583C-0.863281 6.6343 -0.886709 6.7516 -0.932218 6.86098C-0.977726 6.97035 -1.04442 7.06965 -1.12845 7.15315L-6.34158 12.3672L-7.29779 11.411L-2.40489 6.51719L-7.29869 1.62339Z",
+pa2b3d80: "M8.83436 2.94479H0V0.981595L8.83436 0V2.94479Z",
+pd3b5ac0: "M10.9688 25.5215H4.7263C4.7263 25.5215 4.8838 24.5666 6.01295 24.5666C6.36332 24.5666 6.62291 24.2738 6.77458 24.039C5.15762 14.9199 11.6623 7.12088 11.6623 7.12088C11.6269 7.14312 10.636 7.1526 9.92721 7.78335C9.89111 7.74178 9.26073 7.43626 9.00661 7.46797C9.00661 7.46797 9.4299 7.75199 9.51449 7.95179C9.51449 7.95179 8.72077 8.17273 8.06487 8.62482C8.06487 8.62482 7.54642 8.32003 7.23943 8.40388C7.23943 8.40388 7.65215 8.67733 7.71559 8.80347C7.71559 8.80347 6.69984 9.28729 6.11795 10.0023C6.11795 10.0023 6.09462 7.94632 7.84247 7.03703C9.19693 6.33263 11.4082 6.64801 11.4082 6.64801C11.4082 6.64801 10.551 6.04862 9.5247 6.09091C9.5247 6.09091 9.35553 5.62824 8.87937 5.54402C8.87937 5.54402 9.00625 5.77517 9.04854 6.06976C9.04854 6.06976 8.4455 5.99612 7.5672 6.21706C7.5672 6.21706 7.20735 5.82804 6.95359 5.79632C6.95359 5.79632 7.04875 6.02747 7.14391 6.28013C7.14391 6.28013 5.63085 6.64801 4.90094 7.12125C4.90094 7.12125 5.94841 4.37696 8.66754 4.66098C10.8591 4.88994 11.7254 6.20649 11.7254 6.20649C11.7254 6.20649 11.2397 4.88885 10.7096 4.59791C10.7202 4.50311 10.8048 3.97737 10.5404 3.72507C10.5404 3.72507 10.4664 4.19831 10.3819 4.30332C10.3819 4.30332 9.66251 3.662 9.21807 3.55663C9.21807 3.55663 9.22865 3.07282 9.00661 2.92589C9.00661 2.92589 8.97489 3.45163 8.90088 3.49356C8.90088 3.49356 8.2344 2.96782 6.8588 3.09396C6.8588 3.09396 8.08602 1.98998 9.39818 2.3265C10.71 2.66302 11.7046 3.74585 12.2125 5.64902C12.2125 5.64902 12.5406 4.30368 12.1173 3.34626C12.1173 3.34626 12.382 2.91531 12.2971 2.67323C12.2971 2.67323 12.0962 2.95724 11.9266 2.9361C11.9266 2.9361 11.5985 2.00019 11.4188 1.75846C11.4188 1.75846 11.6196 1.25387 11.5033 1.02235C11.5033 1.02235 11.3342 1.44309 11.2175 1.44309C11.2175 1.44309 11.0589 0.791201 10.1912 0.0237353C10.1912 0.0237353 12.0127 -0.305127 12.8257 1.48538C13.7569 3.53585 13.1221 4.94463 12.9526 5.75439C12.9526 5.75439 14.536 3.8144 16.698 4.47176C18.4966 5.01864 18.5498 7.35276 18.5498 7.35276C18.5498 7.35276 18.1054 6.71145 17.3755 6.36435C17.3755 6.36435 17.2909 5.64939 16.9204 5.38652C16.9204 5.38652 17.0896 5.73361 16.9099 6.09091C16.9099 6.09091 16.3386 5.62824 15.7144 5.68074C15.7144 5.68074 15.5452 5.4073 15.1008 5.19693C15.1008 5.19693 15.2335 5.41678 15.2502 5.66142C15.2502 5.66142 13.7474 5.67746 12.9409 6.44529C12.9409 6.44529 15.7862 6.41904 16.6875 7.47855C17.5552 8.49831 17.3962 10.1386 17.2165 11.0114C17.2165 11.0114 16.8566 10.2123 16.4228 9.73902C16.4228 9.73902 16.4756 9.00291 16.2642 8.71925C16.2642 8.71925 16.2536 9.28692 16.0633 9.38172C16.0633 9.38172 15.9123 8.65654 15.3334 8.20408C15.3334 8.20408 15.418 7.92007 15.2594 7.51027C15.2594 7.51027 15.1544 7.86173 15.0381 7.99846C15.0381 7.99846 13.9512 7.12854 12.7543 7.04432C12.7543 7.04432 14.342 8.18403 14.5929 9.35036C14.8342 10.4718 15.0585 12.0735 13.7463 13.6613C13.7463 13.6613 13.7146 12.4312 13.5031 12.021C13.5031 12.021 13.8418 11.5795 13.8735 11.0745C13.8735 11.0745 13.6409 11.3162 13.4397 11.4322C13.4397 11.4322 13.3657 10.244 13.2705 10.0653C13.2705 10.0653 13.6832 9.62381 13.5458 9.27671C13.5458 9.27671 13.4718 9.52901 13.1965 9.65516C13.1965 9.65516 13.0379 8.40388 12.2019 7.41547C12.2019 7.41547 6.36842 14.3157 8.44222 24.1375C9.68803 25.3242 9.47475 23.7353 10.9688 25.5215Z",
+}
diff --git a/src/imports/svg-7twn37a15.ts b/src/imports/svg-7twn37a15.ts
new file mode 100644
index 0000000..a744d4f
--- /dev/null
+++ b/src/imports/svg-7twn37a15.ts
@@ -0,0 +1,9 @@
+export default {
+p1347bee0: "M0.221846 0.740788C0.605791 0.740788 0.893711 0.276899 0.893711 0.276899C0.893711 0.276899 1.18163 0.740788 1.56558 0.740788C1.94952 0.740788 2.33331 0.276899 2.33331 0.276899C2.33331 0.276899 2.71726 0.740788 3.00518 0.740788M0.221846 1.82319C0.605791 1.82319 0.893711 1.35931 0.893711 1.35931C0.893711 1.35931 1.18163 1.82319 1.56558 1.82319C1.94952 1.82319 2.33331 1.35931 2.33331 1.35931C2.33331 1.35931 2.71726 1.82319 3.00518 1.82319",
+p1a313240: "M41.455 81.91C63.7977 81.91 81.91 63.7977 81.91 41.455C81.91 19.1123 63.7977 1 41.455 1C19.1123 1 1 19.1123 1 41.455C1 63.7977 19.1123 81.91 41.455 81.91Z",
+p285ae700: "M45.2798 63.8439H47.511V61.9498C46.1741 61.8928 45.1039 60.7877 45.1039 59.4367C45.1039 58.0858 46.1747 56.9806 47.511 56.9236V54.2321C46.1741 54.1757 45.1039 53.0705 45.1039 51.7196C45.1039 50.3686 46.1747 49.2634 47.511 49.2071V46.5156C46.1741 46.4592 45.1039 45.354 45.1039 44.003C45.1039 42.6521 46.1747 41.5469 47.511 41.4905V38.799C46.1741 38.7426 45.1039 37.6369 45.1039 36.2859C45.1039 34.9349 46.1747 33.8298 47.511 33.7734V31.0825C46.1741 31.0261 45.1039 29.9203 45.1039 28.5694C45.1039 27.219 46.1747 26.1132 47.511 26.0568V23.3666C46.1741 23.3102 45.1039 22.2044 45.1039 20.8541C45.1039 19.5031 46.1747 18.3979 47.511 18.3415V15.6494C46.1741 15.593 45.1039 14.4873 45.1039 13.1369C45.1039 11.786 46.1747 10.6808 47.511 10.6238V7.93229C46.1741 7.8759 45.1039 6.77073 45.1039 5.41978C45.1039 4.06882 46.1747 2.96365 47.511 2.90665V0H45.2915C45.2081 1.31112 44.114 2.35253 42.782 2.35253C41.4495 2.35253 40.3559 1.31112 40.2726 0H37.5756C37.4922 1.31112 36.3981 2.35253 35.0655 2.35253C33.7342 2.35253 32.64 1.31112 32.5561 0H29.859C29.7757 1.31112 28.6815 2.35253 27.3496 2.35253C26.0176 2.35253 24.9235 1.31112 24.8401 0H22.1425C22.0585 1.31112 20.965 2.35253 19.633 2.35253C18.3005 2.35253 17.2063 1.31112 17.123 0H14.426C14.3426 1.31112 13.2485 2.35253 11.9159 2.35253C10.5839 2.35253 9.48982 1.31112 9.40646 0H6.70821C6.62485 1.31112 5.53072 2.35253 4.19877 2.35253C2.8662 2.35253 1.77268 1.31112 1.68932 0H0V2.91707C1.27863 3.04027 2.2753 4.1154 2.2753 5.41978C2.2753 6.72599 1.27495 7.80234 0 7.9231V10.6336C1.27863 10.7574 2.2753 11.8325 2.2753 13.1363C2.2753 14.4425 1.27495 15.5189 0 15.6396V18.3501C1.27863 18.4739 2.2753 19.5485 2.2753 20.8528C2.2753 22.159 1.27495 23.2354 0 23.3562V26.0667C1.27863 26.1905 2.2753 27.265 2.2753 28.5688C2.2753 29.875 1.27495 30.9513 0 31.0721V33.7832C1.27863 33.9064 2.2753 34.9815 2.2753 36.2853C2.2753 37.5915 1.27495 38.6679 0 38.7892V41.5003C1.27863 41.6235 2.2753 42.6987 2.2753 44.0024C2.2753 45.3086 1.27495 46.385 0 46.5057V49.2169C1.27863 49.3407 2.2753 50.4152 2.2753 51.719C2.2753 53.0252 1.27495 54.1015 0 54.2223V56.9334C1.27863 57.0572 2.2753 58.1317 2.2753 59.4361C2.2753 60.7423 1.27495 61.8187 0 61.9394V63.8427H1.70095C1.83703 62.5849 2.91095 61.5992 4.19938 61.5992C5.48782 61.5992 6.5611 62.5849 6.69718 63.8427H9.41811C9.55419 62.5849 10.6269 61.5992 11.9159 61.5992C13.2043 61.5992 14.2776 62.5849 14.4143 63.8427H17.1346C17.2713 62.5849 18.3446 61.5992 19.633 61.5992C20.9215 61.5992 21.9942 62.5849 22.1309 63.8427H24.8518C24.9885 62.5849 26.0611 61.5992 27.3496 61.5992C28.638 61.5992 29.7113 62.5849 29.8474 63.8427H32.5677C32.7044 62.5849 33.7771 61.5992 35.0655 61.5992C36.3546 61.5992 37.4278 62.5849 37.5639 63.8427H40.2842C40.4203 62.5849 41.4942 61.5992 42.7826 61.5992C44.0705 61.6005 45.1438 62.5861 45.2798 63.8439Z",
+p33bc9700: "M40.7691 6.18944H6.74134V57.6552H40.7691V6.18944Z",
+p3794ff00: "M2.69689 0.898964H0V0.299655L2.69689 0V0.898964Z",
+p80f500: "M3.3484 7.79161H1.44272C1.44272 7.79161 1.4908 7.50011 1.8355 7.50011C1.94246 7.50011 2.0217 7.41074 2.06801 7.33906C1.57439 4.55522 3.5601 2.1744 3.5601 2.1744C3.5493 2.18119 3.24679 2.18408 3.03042 2.37663C3.0194 2.36395 2.82696 2.27068 2.74939 2.28036C2.74939 2.28036 2.8786 2.36706 2.90443 2.42805C2.90443 2.42805 2.66213 2.4955 2.4619 2.63351C2.4619 2.63351 2.30363 2.54047 2.20991 2.56607C2.20991 2.56607 2.33591 2.64954 2.35527 2.68805C2.35527 2.68805 2.04519 2.83575 1.86755 3.05401C1.86755 3.05401 1.86043 2.42638 2.394 2.1488C2.80748 1.93377 3.48252 2.03004 3.48252 2.03004C3.48252 2.03004 3.22085 1.84707 2.90754 1.85998C2.90754 1.85998 2.8559 1.71874 2.71054 1.69303C2.71054 1.69303 2.74927 1.76359 2.76218 1.85352C2.76218 1.85352 2.57809 1.83104 2.30997 1.89849C2.30997 1.89849 2.20012 1.77973 2.12265 1.77005C2.12265 1.77005 2.1517 1.84061 2.18075 1.91774C2.18075 1.91774 1.71886 2.03004 1.49603 2.17451C1.49603 2.17451 1.8158 1.33676 2.64588 1.42346C3.3149 1.49336 3.57935 1.89526 3.57935 1.89526C3.57935 1.89526 3.4311 1.49302 3.26927 1.4042C3.2725 1.37527 3.29832 1.21477 3.21763 1.13775C3.21763 1.13775 3.19503 1.28222 3.16921 1.31427C3.16921 1.31427 2.94961 1.1185 2.81394 1.08633C2.81394 1.08633 2.81717 0.938635 2.74939 0.893781C2.74939 0.893781 2.7397 1.05428 2.71711 1.06708C2.71711 1.06708 2.51365 0.906581 2.09372 0.945091C2.09372 0.945091 2.46835 0.608074 2.86892 0.710804C3.26938 0.813534 3.57301 1.1441 3.72805 1.72508C3.72805 1.72508 3.82822 1.31438 3.699 1.02211C3.699 1.02211 3.7798 0.890554 3.75387 0.81665C3.75387 0.81665 3.69254 0.903353 3.64079 0.896898C3.64079 0.896898 3.54062 0.61119 3.48575 0.537398C3.48575 0.537398 3.54707 0.383359 3.51157 0.312683C3.51157 0.312683 3.45993 0.441123 3.42431 0.441123C3.42431 0.441123 3.37589 0.242119 3.111 0.00783182C3.111 0.00783182 3.66706 -0.0925609 3.91525 0.454034C4.19952 1.07999 4.00574 1.51005 3.95399 1.75725C3.95399 1.75725 4.43736 1.16502 5.09737 1.36569C5.64642 1.53264 5.66267 2.24519 5.66267 2.24519C5.66267 2.24519 5.52699 2.04941 5.30417 1.94345C5.30417 1.94345 5.27835 1.72519 5.16527 1.64495C5.16527 1.64495 5.21691 1.7509 5.16204 1.85998C5.16204 1.85998 4.98763 1.71874 4.79709 1.73477C4.79709 1.73477 4.74544 1.65129 4.60977 1.58707C4.60977 1.58707 4.65028 1.65418 4.6554 1.72887C4.6554 1.72887 4.19662 1.73376 3.95043 1.96816C3.95043 1.96816 4.81901 1.96015 5.09415 2.28359C5.35904 2.59489 5.31051 3.09563 5.25564 3.36209C5.25564 3.36209 5.14579 3.11812 5.01334 2.97365C5.01334 2.97365 5.02948 2.74893 4.96493 2.66234C4.96493 2.66234 4.9617 2.83564 4.9036 2.86457C4.9036 2.86457 4.85752 2.6432 4.68078 2.50507C4.68078 2.50507 4.7066 2.41837 4.65818 2.29327C4.65818 2.29327 4.62613 2.40056 4.59062 2.4423C4.59062 2.4423 4.25884 2.17674 3.89344 2.15103C3.89344 2.15103 4.37815 2.49895 4.45473 2.855C4.52841 3.19736 4.59686 3.6863 4.19629 4.17102C4.19629 4.17102 4.1866 3.79549 4.12205 3.67028C4.12205 3.67028 4.22545 3.53549 4.23513 3.38134C4.23513 3.38134 4.16412 3.45513 4.10268 3.49053C4.10268 3.49053 4.08009 3.1278 4.05104 3.07326C4.05104 3.07326 4.17703 2.93848 4.13507 2.83252C4.13507 2.83252 4.11248 2.90954 4.02845 2.94805C4.02845 2.94805 3.98003 2.56607 3.72482 2.26433C3.72482 2.26433 1.94402 4.3708 2.57709 7.36911C2.95741 7.7314 2.89229 7.24635 3.3484 7.79161Z",
+pefd30f0: "M28.1 55.2C43.0669 55.2 55.2 43.0669 55.2 28.1C55.2 13.1331 43.0669 1 28.1 1C13.1331 1 1 13.1331 1 28.1C1 43.0669 13.1331 55.2 28.1 55.2Z",
+}
diff --git a/src/imports/svg-8a8pqw9e9t.ts b/src/imports/svg-8a8pqw9e9t.ts
new file mode 100644
index 0000000..da9661b
--- /dev/null
+++ b/src/imports/svg-8a8pqw9e9t.ts
@@ -0,0 +1,7 @@
+export default {
+p28e1e680: "M249.213 61.9424V159.243H157.654",
+p2c99d260: "M361.481 299.804L346.814 291.632L349.831 287.274H346.814L344.802 280.233L320.329 275.54L314.294 278.892L304.907 267.494H301.554V260.118L295.855 257.101L293.508 258.442L288.815 252.743H284.792H279.251",
+p39dfe300: "M2.67661 144.624C2.84461 143.953 -1.17839 141.942 2.67661 138.087C6.53161 134.232 3.1796 128.7 3.5146 126.018C3.8496 123.336 5.86161 119.305 7.36961 119.058C8.87861 118.811 9.21361 124.175 12.2306 123.169C15.2476 122.163 11.3926 118.475 14.2426 116.296C17.0926 114.117 23.2946 113.614 27.8206 108.25C32.3466 102.886 33.0166 103.557 39.8896 103.724C46.7626 103.892 50.4496 99.0314 53.9706 99.5334C57.4906 100.036 57.3236 95.8454 63.5256 95.5104C69.7276 95.1754 74.0866 93.6664 79.2826 89.1404C84.4786 84.6144 82.9706 82.4354 85.8196 84.1114C88.6696 85.7874 92.5666 75.1434 90.4296 75.0174C88.2926 74.8914 86.1546 71.3714 88.2926 70.2404C90.4296 69.1084 89.2986 65.4634 92.4416 63.8284C95.5846 62.1944 98.9786 59.5534 99.2306 61.5654C99.4816 63.5774 99.2306 66.9714 101.871 69.4854C104.511 71.9994 105.768 71.7484 106.523 70.2394C107.277 68.7304 105.894 66.3424 106.523 65.0854C107.152 63.8284 103.003 58.1704 106.02 58.0454C109.037 57.9194 112.683 59.5544 115.449 58.0454C118.215 56.5364 114.946 54.6504 115.449 52.5134C115.952 50.3764 114.317 47.4844 118.341 47.3594C122.364 47.2334 121.484 49.2454 122.49 44.0904C123.496 38.9364 123.496 37.9304 126.262 37.9304C129.028 37.9304 129.908 31.3934 133.428 31.7704C136.948 32.1474 136.948 34.1594 142.103 34.6614C147.258 35.1644 148.892 40.8214 148.012 40.6964C147.132 40.5704 148.338 43.8394 148.238 45.2224C148.138 46.6054 149.898 46.8564 150.904 45.5994C151.91 44.3424 152.915 43.5874 154.927 43.9654C156.939 44.3424 159.579 46.7314 162.722 45.7254C165.865 44.7194 164.734 43.0854 164.734 41.5764C164.734 40.0674 164.105 37.6794 162.597 36.7994C161.088 35.9194 161.591 33.4514 164.231 32.4854C166.871 31.5194 164.985 25.6104 167.877 25.8614C170.769 26.1124 169.511 23.3474 170.14 21.3354C170.769 19.3234 172.277 19.8264 177.935 18.8214C183.592 17.8154 185.227 15.4274 189.753 15.8044C194.279 16.1814 195.159 16.9364 195.033 12.7874C194.907 8.6384 195.787 9.1414 193.399 8.0104C191.01 6.8784 188.496 4.9934 189.25 3.7364C190.004 2.4794 190.507 5.8734 193.525 6.5024C196.543 7.1314 198.051 7.2564 199.308 8.6394C200.565 10.0224 201.445 11.0284 205.594 10.7764C209.743 10.5254 208.36 12.7874 211.377 13.7934C214.394 14.7994 217.914 17.6904 222.315 16.1824C226.715 14.6734 228.475 13.4164 229.858 15.4284C231.241 17.4394 231.995 15.5544 234.258 16.0574C236.521 16.5604 236.395 18.9494 234.258 20.3314C232.121 21.7144 233.378 24.3544 231.995 25.3604C230.612 26.3664 229.983 23.7264 227.972 23.9774C225.96 24.2284 222.44 25.7374 225.206 28.5034C227.972 31.2694 228.098 31.8974 226.212 33.0294C224.326 34.1614 218.417 40.4464 221.56 42.3324C224.703 44.2184 231.995 48.3674 233 51.1324C234.006 53.8984 235.012 52.7664 239.537 54.7784C244.063 56.7904 246.452 60.9384 249.217 61.9444C251.983 62.9504 256.886 62.1954 259.777 66.9734C262.669 71.7504 273.229 72.2534 275.995 68.6074C278.761 64.9614 279.767 60.3094 281.904 59.1784C284.041 58.0474 280.27 50.3784 283.161 46.8584C286.052 43.3384 284.67 40.6984 284.795 36.8004C284.921 32.9034 281.275 30.7654 283.286 28.3774C285.298 25.9884 283.479 23.8514 285.017 21.8404C286.555 19.8294 287.812 20.3314 288.189 19.9544C288.566 19.5774 284.166 17.4404 285.8 15.4284C287.434 13.4164 287.103 13.7944 288.212 9.5194C289.32 5.2454 293.469 -1.1666 294.475 1.7244C295.481 4.6164 294.852 6.5014 296.487 9.3934C298.121 12.2854 300.887 14.2964 299.756 17.3134C298.624 20.3304 303.025 20.3304 302.647 24.6054C302.27 28.8794 302.898 38.5604 306.293 38.8114C309.687 39.0624 311.196 34.6624 313.333 37.9314C315.47 41.2004 322.133 41.4514 321.63 45.7264C321.127 50.0004 318.361 58.9274 323.139 61.5674C327.916 64.2074 325.653 64.8364 328.042 68.9844C330.431 73.1334 326.911 70.7444 328.042 75.6474C329.174 80.5504 333.322 78.4134 330.934 82.1844C328.545 85.9564 333.951 87.2134 336.088 88.0934C338.225 88.9734 343.128 88.9734 343.38 91.7394C343.632 94.5054 344.763 96.2104 349.792 97.1804C354.821 98.1504 355.324 99.0304 354.569 101.67C353.815 104.31 364.124 115.625 365.129 120.277C366.134 124.929 373.049 122.163 373.929 128.323C374.809 134.483 380.969 138.632 387.13 143.912C393.29 149.192 391.53 147.181 392.662 151.204C393.793 155.227 399.325 157.616 398.445 161.639C397.565 165.662 398.948 175.091 401.337 180.371C403.726 185.651 405.36 191.309 403.223 192.44C401.086 193.571 404.48 197.846 401.337 202.498C398.194 207.15 398.194 215.573 397.943 218.716C397.691 221.859 394.8 220.099 393.543 225.253C392.286 230.407 389.771 233.676 387.257 236.945C384.743 240.214 384.743 244.991 381.977 245.368C379.211 245.745 379.588 245.871 379.84 249.768C380.091 253.665 373.931 258.443 374.56 262.591C375.189 266.74 374.434 272.397 371.417 276.169C368.4 279.941 366.137 287.861 366.514 291.758C366.891 295.655 364 298.924 361.485 299.804C358.971 300.684 355.702 301.941 349.919 301.941C344.136 301.941 342.753 306.718 339.107 308.981C335.461 311.244 331.312 308.855 328.798 312.501C326.284 316.147 322.26 309.484 323.895 307.975C325.529 306.466 320.752 305.586 318.615 306.341C316.478 307.096 317.232 303.575 318.992 302.192C320.752 300.809 315.472 299.803 313.963 302.318C312.454 304.832 314.592 306.844 311.323 308.73C308.054 310.616 306.043 313.145 304.283 313.578C302.523 314.01 301.014 312.502 295.86 310.616C290.705 308.73 288.568 305.21 282.911 306.09C277.254 306.97 276.122 304.707 271.345 302.067C266.568 299.427 262.545 291.632 265.185 289.495C267.825 287.358 264.934 279.312 261.916 277.3C258.899 275.288 253.996 272.397 251.984 272.271C249.973 272.145 250.098 268.248 252.738 265.859C255.378 263.47 252.109 263.847 251.984 259.322C251.858 254.796 250.853 256.179 248.338 257.059C245.824 257.939 247.709 261.459 245.949 263.974C244.189 266.488 243.183 266.614 240.669 266.866C238.155 267.117 237.275 270.512 235.892 270.261C234.509 270.01 233.88 266.364 237.778 265.609C241.675 264.855 242.43 263.723 243.058 259.826C243.686 255.929 241.549 255.3 244.441 252.408C247.333 249.516 247.835 248.008 247.584 246.374C247.333 244.74 244.315 240.717 242.052 243.86C239.789 247.003 241.298 247.757 238.28 249.392C235.263 251.026 234.257 246.878 231.743 253.038C229.229 259.198 229.731 261.964 225.583 261.461C221.434 260.958 221.811 254.672 219.423 251.152C217.034 247.632 211.754 246.375 213.137 242.1C214.52 237.825 208.863 231.162 203.205 230.785C197.548 230.408 195.285 231.288 191.513 228.773C187.741 226.259 183.467 223.87 179.193 224.373C174.918 224.876 158.826 224.624 153.923 226.636C149.02 228.648 145.5 232.293 139.214 232.419C132.928 232.545 126.349 230.91 123.227 233.802C120.105 236.694 119.099 240.465 112.185 240.591C105.27 240.717 110.425 251.403 101.122 252.031C91.8186 252.66 94.0816 257.06 85.5326 254.168C76.9836 251.276 69.9436 252.911 65.9206 253.539C61.8976 254.168 64.5376 261.711 60.1376 260.328C55.7376 258.945 53.9776 259.951 50.3316 262.339C46.6856 264.728 36.8796 266.865 30.4676 263.219C24.0556 259.573 25.0616 260.453 20.9126 258.945C16.7636 257.436 13.8726 249.265 18.0206 248.51C22.1696 247.756 22.6726 249.013 22.9236 246.121C23.1756 243.229 21.5406 239.332 25.3126 236.818C29.0846 234.304 24.6836 229.778 24.1806 226.886C23.6776 223.994 17.3916 218.337 17.8946 209.034C18.3976 199.731 18.9006 198.096 16.2606 195.079C13.6206 192.062 14.5006 189.547 13.6206 186.279C12.7406 183.01 8.96861 185.525 7.96361 179.364C6.95761 173.204 -0.711394 165.786 1.55161 165.409C3.81461 165.032 4.5686 168.552 5.8266 165.158C7.0836 161.763 5.1976 158.998 7.7126 161.009C10.2266 163.021 8.96961 165.284 10.2266 163.021C11.4836 160.758 8.2146 157.238 8.0896 154.598C7.9576 151.957 2.67661 144.624 2.67661 144.624Z",
+p3aafe380: "M279.251 306.183V159.243H249.213",
+pcf0600: "M403.22 192.439H393.414H388.05L386.708 197.761H383.356V200.443H378.663V194.744L372.963 194.073L367.599 192.439L360.224 189.715L357.206 195.079H279.251",
+}
diff --git a/src/imports/svg-afhvgvqd7l.ts b/src/imports/svg-afhvgvqd7l.ts
new file mode 100644
index 0000000..ca2a1a2
--- /dev/null
+++ b/src/imports/svg-afhvgvqd7l.ts
@@ -0,0 +1,11 @@
+export default {
+p1358f400: "M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z",
+p1660e80: "M52.5 40V50C52.5 51.3807 51.3807 52.5 50 52.5H10C8.6193 52.5 7.5 51.3807 7.5 50V45M52.5 40V10C52.5 8.6193 51.3807 7.5 50 7.5H10C8.6193 7.5 7.5 8.6193 7.5 10V45M52.5 40L38.7072 30.8048C37.9607 30.307 37.0047 30.2475 36.2022 30.6487L7.5 45",
+p1873f780: "M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z",
+p2ddd6280: "M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7",
+p2eab3c00: "M12.07 10.315C12.4512 10.1667 12.8877 10.0654 13.5265 10.0363C14.1666 10.0068 14.3712 10 16.0007 10C17.6302 10 17.8347 10.0072 18.4745 10.0363C19.1128 10.0649 19.549 10.1667 19.9309 10.315C20.325 10.4682 20.6599 10.6732 20.9933 11.0071C21.3268 11.341 21.5319 11.6754 21.6855 12.07C21.8338 12.4511 21.9351 12.8875 21.9641 13.5263C21.9932 14.1661 22 14.3706 22 16C22 17.6294 21.9932 17.8335 21.9641 18.4737C21.9355 19.1124 21.8338 19.5487 21.6855 19.9301C21.5319 20.3245 21.3273 20.6595 20.9933 20.9929C20.6594 21.3263 20.325 21.5314 19.9305 21.685C19.549 21.8333 19.1128 21.9346 18.474 21.9637C17.8343 21.9932 17.6297 22 16.0003 22C14.3708 22 14.1666 21.9927 13.5265 21.9637C12.8877 21.9346 12.4519 21.8333 12.07 21.685C11.6753 21.5314 11.341 21.3262 11.0071 20.9929C10.6732 20.6597 10.4682 20.3245 10.315 19.9301C10.1667 19.5487 10.0654 19.1125 10.0363 18.4737C10.0068 17.8339 10 17.6294 10 16C10 14.3706 10.0068 14.1661 10.0363 13.5263C10.0654 12.8876 10.1667 12.4514 10.315 12.07C10.4682 11.6752 10.6732 11.3405 11.0071 11.0071C11.3411 10.6737 11.6753 10.4682 12.07 10.315ZM15.9997 14C14.8953 14 14 14.8955 14 16C14 17.1045 14.8953 18 15.9997 18C17.1043 18 18 17.1043 18 16C18 14.8957 17.1043 14 15.9997 14ZM12.6667 16C12.6667 14.1594 14.1586 12.6667 15.9997 12.6667C17.8405 12.6667 19.3333 14.1591 19.3333 16C19.3333 17.8409 17.8405 19.3333 15.9997 19.3333C14.1586 19.3333 12.6667 17.8407 12.6667 16ZM20 12.6667C20.3682 12.6667 20.6667 12.3682 20.6667 12C20.6667 11.6318 20.3682 11.3333 20 11.3333C19.6318 11.3333 19.3333 11.6318 19.3333 12C19.3333 12.3682 19.6318 12.6667 20 12.6667Z",
+p317063f1: "M20.58 19.37L17.59 11.01C17.38 10.46 16.91 10.12 16.37 10.12C15.83 10.12 15.37 10.46 15.14 11.03L12.16 19.37C12.02 19.76 12.22 20.19 12.61 20.33C13 20.47 13.43 20.27 13.57 19.88L14.19 18.15H18.54L19.16 19.88C19.27 20.19 19.56 20.38 19.87 20.38C19.95 20.38 20.04 20.37 20.12 20.34C20.51 20.2 20.71 19.77 20.57 19.38L20.58 19.37ZM14.74 16.64L16.38 12.05L18.02 16.64H14.74ZM12.19 7.85C9.92999 11.42 7.89 13.58 5.41 15.02C5.29 15.09 5.16 15.12 5.04 15.12C4.78 15.12 4.53 14.99 4.39 14.75C4.18 14.39 4.3 13.93 4.66 13.73C6.75999 12.51 8.48 10.76 10.41 7.86H4.12C3.71 7.86 3.37 7.52 3.37 7.11C3.37 6.7 3.71 6.36 4.12 6.36H7.87V4.38C7.87 3.97 8.21 3.63 8.62 3.63C9.02999 3.63 9.37 3.97 9.37 4.38V6.36H13.12C13.53 6.36 13.87 6.7 13.87 7.11C13.87 7.52 13.53 7.86 13.12 7.86H12.18L12.19 7.85ZM12.23 15.12C12.1 15.12 11.97 15.09 11.85 15.02C11.2 14.64 10.57 14.22 9.97999 13.78C9.64999 13.53 9.58 13.06 9.83 12.73C10.08 12.4 10.55 12.33 10.88 12.58C11.42 12.99 12.01 13.37 12.61 13.72C12.97 13.93 13.09 14.39 12.88 14.75C12.74 14.99 12.49 15.12 12.23 15.12Z",
+p349a7f80: "M20 27.5C22.7614 27.5 25 25.2614 25 22.5C25 19.7386 22.7614 17.5 20 17.5C17.2386 17.5 15 19.7386 15 22.5C15 25.2614 17.2386 27.5 20 27.5Z",
+p3754fa00: "M19.0226 10.0027V10H19.7259L19.9829 10.0506C20.1542 10.0835 20.3098 10.1265 20.4495 10.1798C20.5893 10.2331 20.7245 10.2952 20.8552 10.3663C20.986 10.4373 21.1046 10.5097 21.2111 10.5834C21.3165 10.6562 21.4112 10.7334 21.4951 10.8151C21.578 10.8977 21.7074 10.919 21.8832 10.879C22.0591 10.8391 22.2485 10.7836 22.4513 10.7125C22.6542 10.6415 22.8548 10.5616 23.0532 10.4728C23.2516 10.384 23.3724 10.3276 23.4157 10.3037C23.458 10.2788 23.4806 10.2655 23.4833 10.2637L23.486 10.2597L23.4995 10.253L23.5131 10.2464L23.5266 10.2397L23.5401 10.2331L23.5428 10.2291L23.5469 10.2264L23.551 10.2238L23.5537 10.2198L23.5672 10.2158L23.5807 10.2131L23.578 10.2331L23.5739 10.253L23.5672 10.273L23.5604 10.293L23.5537 10.3063L23.5469 10.3196L23.5401 10.3396C23.5356 10.3529 23.5311 10.3707 23.5266 10.3929C23.5221 10.4151 23.4793 10.5039 23.3981 10.6593C23.317 10.8147 23.2155 10.9723 23.0938 11.1321C22.9721 11.2919 22.8629 11.4126 22.7665 11.4943C22.6691 11.5769 22.6046 11.6346 22.5731 11.6675C22.5415 11.7012 22.5031 11.7323 22.4581 11.7607L22.3904 11.8047L22.3769 11.8113L22.3634 11.818L22.3607 11.822L22.3566 11.8246L22.3526 11.8273L22.3499 11.8313L22.3363 11.838L22.3228 11.8446L22.3202 11.8486L22.316 11.8513L22.312 11.8539L22.3093 11.8579L22.3066 11.8619L22.3025 11.8646L22.2985 11.8673L22.2958 11.8713H22.3634L22.7421 11.7913C22.9946 11.7381 23.2358 11.6737 23.4657 11.5982L23.8309 11.4784L23.8715 11.465L23.8918 11.4584L23.9054 11.4517L23.9188 11.4451L23.9323 11.4384L23.9459 11.4317L23.9729 11.4277L24 11.4251V11.4517L23.9932 11.4544L23.9865 11.4584L23.9838 11.4624L23.9797 11.465L23.9756 11.4677L23.9729 11.4717L23.9702 11.4757L23.9662 11.4784L23.9621 11.481L23.9594 11.485L23.9567 11.489L23.9527 11.4917L23.9459 11.505L23.9391 11.5183L23.9351 11.521C23.9333 11.5236 23.876 11.5991 23.7633 11.7474C23.6506 11.8966 23.5898 11.972 23.5807 11.9738C23.5717 11.9765 23.5591 11.9898 23.5428 12.0138C23.5275 12.0386 23.432 12.1376 23.2561 12.3108C23.0803 12.4839 22.9081 12.638 22.7394 12.7729C22.5699 12.9088 22.4843 13.0757 22.4825 13.2737C22.4798 13.4708 22.4693 13.6937 22.4513 13.9423C22.4333 14.1909 22.3995 14.4595 22.3499 14.748C22.3003 15.0366 22.2236 15.3629 22.1199 15.727C22.0163 16.091 21.89 16.4462 21.7412 16.7924C21.5924 17.1387 21.4369 17.4495 21.2746 17.7248C21.1123 18 20.9635 18.2331 20.8282 18.424C20.6929 18.6149 20.5555 18.7946 20.4157 18.9634C20.2759 19.1321 20.0992 19.3221 19.8855 19.5334C19.6708 19.7439 19.5537 19.8593 19.5338 19.8797C19.5131 19.8992 19.4247 19.9721 19.2687 20.0981C19.1136 20.225 18.9468 20.352 18.7682 20.479C18.5906 20.6051 18.4274 20.7103 18.2786 20.7947C18.1298 20.8791 17.9504 20.9754 17.7403 21.0837C17.5311 21.1929 17.3047 21.2941 17.0613 21.3873C16.8178 21.4805 16.5609 21.5672 16.2904 21.647C16.0198 21.727 15.7583 21.7891 15.5059 21.8335C15.2534 21.8779 14.9671 21.9156 14.647 21.9468L14.1668 21.9933V22H13.2876V21.9933L13.1727 21.9867C13.096 21.9822 13.0329 21.9778 12.9833 21.9734C12.9337 21.969 12.7466 21.9445 12.422 21.9001C12.0974 21.8557 11.8427 21.8113 11.6578 21.7669C11.473 21.7225 11.1979 21.6382 10.8327 21.5139C10.4675 21.3896 10.1551 21.264 9.8954 21.137C9.63662 21.0109 9.47431 20.931 9.40847 20.8972C9.34355 20.8644 9.27052 20.8236 9.18936 20.7747L9.06763 20.7015L9.06494 20.6975L9.06086 20.6948L9.05681 20.6922L9.0541 20.6881L9.04058 20.6815L9.02705 20.6748L9.02436 20.6708L9.02029 20.6681L9.01623 20.6655L9.01352 20.6615L9.01084 20.6575L9.00677 20.6548H9V20.6282L9.01352 20.6309L9.02705 20.6349L9.08791 20.6415C9.1285 20.6459 9.23896 20.6526 9.4193 20.6615C9.59965 20.6704 9.79125 20.6704 9.99414 20.6615C10.197 20.6526 10.4044 20.6326 10.6163 20.6016C10.8282 20.5705 11.0785 20.5172 11.367 20.4417C11.6556 20.3663 11.9207 20.2766 12.1623 20.1727C12.4031 20.0679 12.5744 19.9898 12.6763 19.9383C12.7773 19.8877 12.9315 19.7936 13.1389 19.6559L13.45 19.4495L13.4527 19.4455L13.4567 19.4429L13.4608 19.4402L13.4635 19.4362L13.4662 19.4322L13.4702 19.4295L13.4743 19.4268L13.477 19.4229L13.4905 19.4189L13.5041 19.4162L13.5068 19.4029L13.5108 19.3895L13.5149 19.3869L13.5176 19.3829L13.4094 19.3763C13.3372 19.3718 13.2674 19.3674 13.1997 19.3629C13.1321 19.3585 13.0262 19.3385 12.8819 19.303C12.7376 19.2674 12.5821 19.2142 12.4152 19.1432C12.2484 19.0722 12.0861 18.9878 11.9283 18.8901C11.7705 18.7925 11.6564 18.7112 11.5861 18.6464C11.5167 18.5825 11.4265 18.4919 11.3156 18.3747C11.2056 18.2566 11.11 18.1354 11.0289 18.0111C10.9477 17.8868 10.8702 17.7434 10.7962 17.5809L10.684 17.3385L10.6772 17.3185L10.6704 17.2985L10.6664 17.2853L10.6637 17.2719L10.684 17.2745L10.7042 17.2786L10.853 17.2985C10.9522 17.3119 11.1078 17.3163 11.3197 17.3119C11.5316 17.3075 11.6781 17.2986 11.7592 17.2853C11.8404 17.2719 11.89 17.263 11.908 17.2586L11.9351 17.252L11.9689 17.2453L12.0027 17.2386L12.0054 17.2347L12.0095 17.232L12.0135 17.2293L12.0162 17.2253L11.9892 17.2187L11.9621 17.212L11.9351 17.2053L11.908 17.1986L11.881 17.192C11.8629 17.1876 11.8314 17.1787 11.7863 17.1653C11.7412 17.1521 11.6195 17.1032 11.4211 17.0189C11.2227 16.9345 11.0649 16.8524 10.9477 16.7725C10.8302 16.6923 10.7181 16.6047 10.6123 16.5101C10.5068 16.4142 10.3909 16.2908 10.2646 16.1399C10.1384 15.9889 10.0257 15.8135 9.92651 15.6137C9.82732 15.4139 9.75293 15.2231 9.70333 15.0411C9.65394 14.8601 9.62135 14.6751 9.60596 14.4883L9.5816 14.2087L9.59513 14.2113L9.60865 14.2153L9.62219 14.222L9.63571 14.2286L9.64923 14.2353L9.66276 14.242L9.87241 14.3352C10.0122 14.3973 10.1858 14.4506 10.3931 14.495C10.6006 14.5394 10.7245 14.5638 10.7651 14.5682L10.826 14.5749H10.9477L10.945 14.5709L10.9409 14.5682L10.9369 14.5656L10.9342 14.5616L10.9315 14.5576L10.9274 14.555L10.9234 14.5523L10.9207 14.5483L10.9071 14.5416L10.8936 14.535L10.8909 14.531L10.8868 14.5283L10.8828 14.5256L10.8801 14.5217L10.8665 14.515L10.853 14.5083L10.8503 14.5044C10.8476 14.5026 10.8088 14.4741 10.734 14.4191C10.66 14.3632 10.5825 14.2908 10.5014 14.202C10.4202 14.1132 10.339 14.02 10.2579 13.9223C10.1766 13.8244 10.1042 13.7197 10.0415 13.6093C9.97837 13.4983 9.91163 13.3572 9.8413 13.1858C9.77187 13.0153 9.71912 12.8435 9.68305 12.6704C9.64699 12.4972 9.6267 12.3263 9.62219 12.1576C9.61768 11.9889 9.62218 11.8446 9.63571 11.7248C9.64923 11.6049 9.67628 11.4695 9.71687 11.3185C9.75744 11.1676 9.81606 11.0078 9.89269 10.8391L10.0077 10.586L10.0144 10.566L10.0212 10.5461L10.0253 10.5434L10.0279 10.5394L10.0307 10.5354L10.0347 10.5327L10.0388 10.5354L10.0415 10.5394L10.0442 10.5434L10.0482 10.5461L10.0523 10.5487L10.055 10.5527L10.0577 10.5567L10.0618 10.5594L10.0685 10.5727L10.0753 10.586L10.0794 10.5887L10.0821 10.5927L10.2646 10.7925C10.3864 10.9256 10.5307 11.0744 10.6975 11.2386C10.8643 11.4029 10.9567 11.4881 10.9747 11.4943C10.9928 11.5014 11.0153 11.5219 11.0424 11.5556C11.0694 11.5885 11.1596 11.667 11.3129 11.7913C11.4662 11.9156 11.6668 12.0599 11.9148 12.2242C12.1628 12.3884 12.4378 12.5505 12.7399 12.7103C13.0419 12.8701 13.3666 13.0144 13.7137 13.1432C14.0609 13.2719 14.3043 13.3563 14.4441 13.3962C14.5839 13.4362 14.8228 13.4872 15.1609 13.5494C15.4991 13.6116 15.7538 13.6515 15.9251 13.6693C16.0965 13.687 16.2137 13.6972 16.2768 13.6999L16.3715 13.7026L16.3688 13.6826L16.3648 13.6626L16.3377 13.4961C16.3196 13.3851 16.3106 13.2297 16.3106 13.03C16.3106 12.8302 16.3265 12.646 16.358 12.4772C16.3895 12.3085 16.4369 12.1376 16.5 11.9645C16.5632 11.7913 16.6249 11.6524 16.6853 11.5476C16.7466 11.4437 16.8268 11.3252 16.9261 11.192C17.0252 11.0588 17.1538 10.9212 17.3116 10.7791C17.4694 10.6371 17.6497 10.5105 17.8526 10.3996C18.0554 10.2886 18.2425 10.2042 18.4138 10.1465C18.5852 10.0888 18.7295 10.0511 18.8467 10.0333C18.9639 10.0155 19.0226 10.0053 19.0226 10.0027Z",
+pe943800: "M16.8946 22V16.7982H18.6636L18.9284 14.576H16.8945V13.1573C16.8945 12.514 17.0597 12.0755 17.9124 12.0755L19 12.075V10.0876C18.8119 10.0605 18.1662 10 17.4152 10C15.8471 10 14.7735 11.0355 14.7735 12.9373V14.576H13V16.7982H14.7735V21.9999L16.8946 22Z",
+}
diff --git a/src/imports/svg-d9xnvztfng.ts b/src/imports/svg-d9xnvztfng.ts
new file mode 100644
index 0000000..b20dfeb
--- /dev/null
+++ b/src/imports/svg-d9xnvztfng.ts
@@ -0,0 +1,3 @@
+export default {
+pc423380: "M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z",
+}
diff --git a/src/imports/svg-dxeurs6zar.ts b/src/imports/svg-dxeurs6zar.ts
new file mode 100644
index 0000000..84f8a73
--- /dev/null
+++ b/src/imports/svg-dxeurs6zar.ts
@@ -0,0 +1,66 @@
+export default {
+p11d0cb00: "M130 0H5C2.23858 0 0 2.23858 0 5V35C0 37.7614 2.23858 40 5 40H130C132.761 40 135 37.7614 135 35V5C135 2.23858 132.761 0 130 0Z",
+p12efde80: "M15.25 15.25L11.8855 11.8795M13.75 7.375C13.75 9.06576 13.0784 10.6873 11.8828 11.8828C10.6873 13.0784 9.06576 13.75 7.375 13.75C5.68424 13.75 4.06274 13.0784 2.86719 11.8828C1.67165 10.6873 1 9.06576 1 7.375C1 5.68424 1.67165 4.06274 2.86719 2.86719C4.06274 1.67165 5.68424 1 7.375 1C9.06576 1 10.6873 1.67165 11.8828 2.86719C13.0784 4.06274 13.75 5.68424 13.75 7.375Z",
+p1358f400: "M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z",
+p140623c0: "M20.7324 17.5327C20.7324 20.3462 19.2266 22.1538 16.9541 22.1538C16.3784 22.1839 15.8059 22.0513 15.3022 21.7712C14.7984 21.491 14.3836 21.0747 14.1055 20.5698H14.0625V25.0542H12.2041V13.0054H14.0029V14.5112H14.0371C14.3281 14.0088 14.7498 13.5946 15.2574 13.3127C15.7651 13.0309 16.3396 12.8919 16.9199 12.9106C19.2177 12.9107 20.7324 14.7271 20.7324 17.5327ZM18.8223 17.5327C18.8223 15.6997 17.875 14.4946 16.4297 14.4946C15.0098 14.4946 14.0547 15.7251 14.0547 17.5327C14.0547 19.3569 15.0098 20.5786 16.4297 20.5786C17.875 20.5786 18.8223 19.3823 18.8223 17.5327Z",
+p146a6200: "M18.8965 7.13442V1.13442H19.667V7.13442H18.8965Z",
+p14978a80: "M74.957 19.3999C74.707 21.0435 73.1064 22.1714 71.0586 22.1714C68.4248 22.1714 66.79 20.4067 66.79 17.5757C66.79 14.7358 68.4336 12.894 70.9805 12.894C73.4853 12.894 75.0606 14.6147 75.0606 17.3599V17.9966H68.666V18.1089C68.6365 18.4421 68.6782 18.7778 68.7884 19.0936C68.8986 19.4094 69.0747 19.6982 69.3051 19.9408C69.5354 20.1833 69.8147 20.3741 70.1245 20.5004C70.4342 20.6267 70.7673 20.6856 71.1016 20.6733C71.5407 20.7145 71.9814 20.6128 72.3582 20.3833C72.7349 20.1539 73.0274 19.809 73.1924 19.3999L74.957 19.3999ZM68.6748 16.6978H73.2012C73.2179 16.3982 73.1724 16.0983 73.0678 15.8171C72.9631 15.5359 72.8014 15.2794 72.5929 15.0636C72.3844 14.8479 72.1335 14.6775 71.856 14.5633C71.5785 14.4491 71.2805 14.3935 70.9805 14.3999C70.6778 14.3981 70.3778 14.4562 70.0978 14.571C69.8178 14.6857 69.5632 14.8548 69.3489 15.0684C69.1345 15.2821 68.9646 15.536 68.8489 15.8157C68.7332 16.0953 68.674 16.3951 68.6748 16.6978Z",
+p153efec0: "M17.7773 24.4446L22.2218 20.0001L17.7773 15.5557",
+p15bde300: "M18.4769 6.40648C18.3941 6.15855 18.2343 5.94022 18.0187 5.78011C17.803 5.62 17.5415 5.52559 17.2685 5.50926L12.3518 5.18657L10.5309 0.818518C10.4314 0.578003 10.2584 0.371406 10.034 0.225473C9.80973 0.0795413 9.54452 0.000993936 9.27273 0V0C9.00094 0.000993936 8.73572 0.0795413 8.51142 0.225473C8.28711 0.371406 8.11403 0.578003 8.0146 0.818518L6.16051 5.21018L1.27698 5.50926C1.00425 5.52665 0.743283 5.62145 0.527839 5.78141C0.312394 5.94137 0.152385 6.15911 0.0685104 6.40648C-0.0176213 6.65764 -0.0226537 6.92758 0.0540622 7.18149C0.130778 7.43539 0.285725 7.66163 0.498924 7.83102L4.25676 10.8532L3.13934 15.0324C3.06203 15.3151 3.07594 15.6134 3.17927 15.8885C3.2826 16.1636 3.47057 16.4028 3.71874 16.575C3.95964 16.7394 4.24664 16.8317 4.54302 16.8401C4.8394 16.8485 5.13168 16.7727 5.38246 16.6222L9.26445 14.2847H9.28101L13.461 16.7954C13.6754 16.9279 13.9254 16.9989 14.1811 17C14.3899 16.9984 14.5955 16.9514 14.7822 16.8624C14.9689 16.7735 15.1316 16.645 15.2579 16.4869C15.3842 16.3288 15.4707 16.1453 15.5107 15.9505C15.5508 15.7556 15.5433 15.5546 15.4889 15.363L14.3053 10.7903L18.0465 7.83102C18.2597 7.66163 18.4147 7.43539 18.4914 7.18149C18.5681 6.92758 18.5631 6.65764 18.4769 6.40648Z",
+p1660e80: "M52.5 40V50C52.5 51.3807 51.3807 52.5 50 52.5H10C8.6193 52.5 7.5 51.3807 7.5 50V45M52.5 40V10C52.5 8.6193 51.3807 7.5 50 7.5H10C8.6193 7.5 7.5 8.6193 7.5 10V45M52.5 40L38.7072 30.8048C37.9607 30.307 37.0047 30.2475 36.2022 30.6487L7.5 45",
+p172e0300: "M20.5811 19.37L17.5911 11.01C17.3811 10.46 16.9111 10.12 16.3711 10.12C15.8311 10.12 15.3711 10.46 15.1411 11.03L12.1611 19.37C12.0211 19.76 12.2211 20.19 12.6111 20.33C13.0011 20.47 13.4311 20.27 13.5711 19.88L14.1911 18.15H18.5411L19.1611 19.88C19.2711 20.19 19.5611 20.38 19.8711 20.38C19.9511 20.38 20.0411 20.37 20.1211 20.34C20.5111 20.2 20.7111 19.77 20.5711 19.38L20.5811 19.37ZM14.7411 16.64L16.3811 12.05L18.0211 16.64H14.7411ZM12.1911 7.85C9.93108 11.42 7.89109 13.58 5.41109 15.02C5.29109 15.09 5.16109 15.12 5.04109 15.12C4.78109 15.12 4.53109 14.99 4.39109 14.75C4.18109 14.39 4.30109 13.93 4.66109 13.73C6.76108 12.51 8.48109 10.76 10.4111 7.86H4.12109C3.71109 7.86 3.37109 7.52 3.37109 7.11C3.37109 6.7 3.71109 6.36 4.12109 6.36H7.87109V4.38C7.87109 3.97 8.21109 3.63 8.62109 3.63C9.03108 3.63 9.37109 3.97 9.37109 4.38V6.36H13.1211C13.5311 6.36 13.8711 6.7 13.8711 7.11C13.8711 7.52 13.5311 7.86 13.1211 7.86H12.1811L12.1911 7.85ZM12.2311 15.12C12.1011 15.12 11.9711 15.09 11.8511 15.02C11.2011 14.64 10.5711 14.22 9.98108 13.78C9.65108 13.53 9.58109 13.06 9.83109 12.73C10.0811 12.4 10.5511 12.33 10.8811 12.58C11.4211 12.99 12.0111 13.37 12.6111 13.72C12.9711 13.93 13.0911 14.39 12.8811 14.75C12.7411 14.99 12.4911 15.12 12.2311 15.12Z",
+p1865d740: "M70.334 5.04493C70.2132 5.45647 69.9516 5.81245 69.5949 6.0506C69.2383 6.28875 68.8092 6.3939 68.3828 6.34766C68.0861 6.35549 67.7913 6.29867 67.5188 6.18114C67.2463 6.06361 67.0027 5.88819 66.8047 5.66706C66.6068 5.44592 66.4594 5.18436 66.3727 4.90054C66.286 4.61672 66.2622 4.31743 66.3027 4.02345C66.2632 3.72856 66.2875 3.42863 66.374 3.14396C66.4605 2.85929 66.6071 2.59652 66.804 2.37345C67.0009 2.15037 67.2434 1.9722 67.5151 1.85099C67.7868 1.72979 68.0814 1.66837 68.3789 1.67091C69.6318 1.67091 70.3877 2.52691 70.3877 3.94091V4.251H67.208V4.3008C67.1941 4.46605 67.2149 4.63238 67.269 4.78913C67.3231 4.94588 67.4094 5.08958 67.5223 5.21104C67.6352 5.3325 67.7722 5.42902 67.9246 5.49441C68.077 5.55981 68.2414 5.59264 68.4072 5.5908C68.6198 5.61632 68.8351 5.57804 69.0259 5.48083C69.2167 5.38363 69.3742 5.23188 69.4785 5.0449L70.334 5.04493ZM67.208 3.59376H69.4824C69.4936 3.44263 69.473 3.29083 69.4221 3.14811C69.3711 3.0054 69.2909 2.87492 69.1865 2.76506C69.0821 2.6552 68.9559 2.5684 68.816 2.51022C68.676 2.45205 68.5255 2.42379 68.374 2.42726C68.2203 2.42533 68.0678 2.45419 67.9254 2.51213C67.783 2.57008 67.6537 2.65594 67.545 2.76465C67.4364 2.87336 67.3506 3.00273 67.2927 3.14512C67.2348 3.28752 67.206 3.44006 67.208 3.59376Z",
+p1873f780: "M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z",
+p190f4c00: "M32.5679 6.35902C31.9839 6.94126 31.1928 7.26822 30.3682 7.26822C29.5435 7.26822 28.7525 6.94126 28.1685 6.35902C27.8796 6.06639 27.6524 5.71865 27.5006 5.33649C27.3488 4.95432 27.2753 4.54553 27.2847 4.13442C27.2753 3.7233 27.3488 3.31451 27.5006 2.93234C27.6524 2.55018 27.8796 2.20244 28.1685 1.90982C28.4571 1.62108 28.7999 1.39211 29.1772 1.23602C29.5544 1.07992 29.9588 0.999755 30.367 1.00012C30.7753 1.00048 31.1795 1.08136 31.5565 1.23813C31.9335 1.39489 32.2758 1.62447 32.564 1.91372C32.8531 2.20557 33.0806 2.55253 33.2331 2.934C33.3856 3.31547 33.4599 3.72368 33.4517 4.13442C33.4607 4.5455 33.3872 4.95422 33.2354 5.33635C33.0836 5.71848 32.8566 6.06624 32.5679 6.35902ZM28.7378 5.85662C29.1703 6.28841 29.7565 6.53093 30.3677 6.53093C30.9788 6.53093 31.565 6.28841 31.9976 5.85662C32.2194 5.62953 32.3928 5.35984 32.5075 5.06384C32.6221 4.76783 32.6756 4.45166 32.6646 4.13442C32.6756 3.81718 32.6221 3.501 32.5075 3.20499C32.3928 2.90899 32.2194 2.6393 31.9976 2.41222C31.565 1.98042 30.9788 1.73791 30.3677 1.73791C29.7565 1.73791 29.1703 1.98042 28.7378 2.41222C28.5163 2.63948 28.3431 2.90922 28.2286 3.2052C28.1142 3.50118 28.0608 3.81727 28.0718 4.13442C28.0608 4.45157 28.1142 4.76765 28.2286 5.06363C28.3431 5.35961 28.5163 5.62935 28.7378 5.85662Z",
+p1ab2e500: "M130 0.8C131.114 0.801287 132.181 1.24423 132.968 2.03165C133.756 2.81907 134.199 3.88666 134.2 5.0002V35.0002C134.199 36.1137 133.756 37.1813 132.968 37.9687C132.181 38.7561 131.114 39.1991 130 39.2004H5C3.88645 39.1991 2.81888 38.7562 2.0315 37.9688C1.24412 37.1813 0.801231 36.1138 0.8 35.0002V5.0002C0.801212 3.88664 1.24409 2.81904 2.03148 2.03162C2.81886 1.2442 3.88644 0.801266 5 0.8H130ZM130 0.000200272H5C3.67511 0.00407837 2.40559 0.532108 1.46875 1.46895C0.531908 2.40579 0.0038781 3.67531 0 5.0002L0 35.0002C0.0038781 36.3251 0.531908 37.5946 1.46875 38.5315C2.40559 39.4683 3.67511 39.9963 5 40.0002H130C131.325 39.9963 132.594 39.4683 133.531 38.5315C134.468 37.5946 134.996 36.3251 135 35.0002V5.0002C134.996 3.67531 134.468 2.40579 133.531 1.46895C132.594 0.532108 131.325 0.00407837 130 0.000200272V0.000200272Z",
+p1ae2b0c0: "M17.0588 17.1472L12.9294 13.0158V12.7235L17.0598 8.59311L17.1529 8.64621L22.0457 11.4263C23.4433 12.2203 23.4433 13.5195 22.0457 14.314L17.1529 17.0941L17.0588 17.1472Z",
+p1b13c280: "M17.1529 8.64571L2.54453 0.345309C2.24543 0.111403 1.87393 -0.0105038 1.49439 0.000710063C1.11486 0.0119239 0.7512 0.155552 0.466431 0.406709L12.9294 12.8697L17.1529 8.64571Z",
+p1b75f800: "M17.0598 17.0006L2.54453 25.2479C2.25695 25.4668 1.90595 25.5863 1.54452 25.5882C1.18309 25.5901 0.830837 25.4745 0.540931 25.2586L0.466431 25.3331L0.540431 25.4052L0.540931 25.4047C0.830788 25.6207 1.18306 25.7364 1.54452 25.7345C1.90598 25.7326 2.257 25.6131 2.54453 25.394L17.1529 17.0936L17.0598 17.0006Z",
+p1ba7a100: "M14.7973 11.5804C14.8081 10.7457 15.0298 9.92737 15.4418 9.20142C15.8538 8.47546 16.4428 7.86552 17.1539 7.42835C16.7021 6.78319 16.1062 6.25225 15.4134 5.8777C14.7205 5.50314 13.9499 5.2953 13.1627 5.27067C11.4835 5.09441 9.85552 6.2755 8.99981 6.2755C8.12754 6.2755 6.81004 5.28817 5.39131 5.31736C4.47364 5.34701 3.57929 5.61386 2.79541 6.09192C2.01154 6.56998 1.36486 7.24294 0.918393 8.04523C-1.01561 11.3936 0.426982 16.3147 2.27959 19.0213C3.20649 20.3467 4.28977 21.8271 5.70722 21.7746C7.09428 21.7171 7.61232 20.8901 9.28662 20.8901C10.9454 20.8901 11.4314 21.7746 12.8776 21.7412C14.366 21.7171 15.3038 20.41 16.1981 19.0721C16.8641 18.1277 17.3766 17.084 17.7166 15.9796C16.8518 15.6139 16.1139 15.0017 15.5948 14.2194C15.0757 13.4371 14.7983 12.5193 14.7973 11.5804V11.5804Z",
+p1c846872: "M7.2534 4.00734C7.22509 3.71142 7.25895 3.41285 7.35279 3.13078C7.44663 2.84871 7.59838 2.58937 7.79833 2.36939C7.99827 2.14941 8.24198 1.97364 8.51383 1.85337C8.78568 1.73309 9.07967 1.67096 9.37694 1.67096C9.67421 1.67096 9.9682 1.73309 10.24 1.85337C10.5119 1.97364 10.7556 2.14941 10.9556 2.36939C11.1555 2.58937 11.3073 2.84871 11.4011 3.13078C11.4949 3.41285 11.5288 3.71142 11.5005 4.00734C11.5293 4.30356 11.4959 4.60254 11.4023 4.88507C11.3087 5.16759 11.157 5.42741 10.957 5.64783C10.757 5.86824 10.5131 6.04437 10.241 6.16491C9.96889 6.28544 9.67456 6.34771 9.37694 6.34771C9.07932 6.34771 8.78498 6.28544 8.51286 6.16491C8.24074 6.04437 7.99684 5.86824 7.79685 5.64783C7.59686 5.42741 7.44519 5.16759 7.3516 4.88507C7.25801 4.60254 7.22456 4.30356 7.2534 4.00734ZM10.5864 4.00734C10.5864 3.03127 10.1479 2.46047 9.3784 2.46047C8.60594 2.46047 8.1714 3.03127 8.1714 4.00735C8.1714 4.99124 8.60597 5.55764 9.3784 5.55764C10.1479 5.55763 10.5864 4.98732 10.5864 4.00734Z",
+p1e77dec0: "M85.0434 6.40648C84.9605 6.15855 84.8007 5.94022 84.5851 5.78011C84.3694 5.62 84.1079 5.52559 83.8349 5.50926L78.9182 5.18657L77.0973 0.818518C76.9978 0.578003 76.8248 0.371406 76.6004 0.225473C76.3761 0.0795413 76.1109 0.000993936 75.8391 0V0C75.5673 0.000993936 75.3021 0.0795413 75.0778 0.225473C74.8535 0.371406 74.6804 0.578003 74.581 0.818518L72.7269 5.21018L67.8434 5.50926C67.5707 5.52665 67.3097 5.62145 67.0942 5.78141C66.8788 5.94137 66.7188 6.15911 66.6349 6.40648C66.5488 6.65764 66.5438 6.92758 66.6205 7.18149C66.6972 7.43539 66.8521 7.66163 67.0653 7.83102L70.8232 10.8532L69.7057 15.0324C69.6284 15.3151 69.6424 15.6134 69.7457 15.8885C69.849 16.1636 70.037 16.4028 70.2852 16.575C70.526 16.7394 70.813 16.8317 71.1094 16.8401C71.4058 16.8485 71.6981 16.7727 71.9489 16.6222L75.8309 14.2847H75.8474L80.0274 16.7954C80.2418 16.9279 80.4918 16.9989 80.7475 17C80.9563 16.9984 81.1619 16.9514 81.3486 16.8624C81.5353 16.7735 81.698 16.645 81.8243 16.4869C81.9506 16.3288 82.0371 16.1453 82.0771 15.9505C82.1172 15.7556 82.1097 15.5546 82.0553 15.363L80.8717 10.7903L84.6129 7.83102C84.8261 7.66163 84.9811 7.43539 85.0578 7.18149C85.1345 6.92758 85.1295 6.65764 85.0434 6.40648Z",
+p1fa9cb00: "M61.2773 0H62.1582V2.48145H62.2285C62.3466 2.22213 62.5419 2.00554 62.7876 1.86119C63.0332 1.71684 63.3175 1.65176 63.6015 1.67481C63.8195 1.66295 64.0374 1.69934 64.2396 1.78138C64.4419 1.86342 64.6236 1.9891 64.7717 2.14943C64.9198 2.30977 65.0307 2.50082 65.0965 2.70896C65.1623 2.91709 65.1813 3.13718 65.1523 3.35352V6.26075H64.2627V3.57275C64.2627 2.85351 63.9277 2.48925 63.2998 2.48925C63.1471 2.47672 62.9935 2.49772 62.8497 2.55077C62.7059 2.60383 62.5755 2.68766 62.4675 2.79639C62.3595 2.90513 62.2765 3.03615 62.2245 3.18029C62.1724 3.32443 62.1525 3.4782 62.166 3.63085V6.26073H61.2774L61.2773 0Z",
+p20fe0080: "M2.54453 0.491909L22.0457 11.5719C22.3094 11.6918 22.5414 11.8715 22.7234 12.0968C22.9054 12.3221 23.0323 12.5867 23.094 12.8697C23.0645 12.5572 22.9516 12.2584 22.7673 12.0045C22.5829 11.7505 22.3337 11.5507 22.0457 11.4258L2.54453 0.345809C1.14693 -0.448291 0.00363159 0.211308 0.00363159 1.81211V1.95821C0.00363159 0.357508 1.14693 -0.302091 2.54453 0.491909Z",
+p21d6a400: "M48.9189 10.8628V13.0054H50.6406V14.4771H48.9189V19.4683C48.9189 20.2437 49.2637 20.605 50.0205 20.605C50.2249 20.6014 50.429 20.5871 50.6318 20.562V22.0249C50.2916 22.0885 49.9457 22.1172 49.5996 22.1108C47.7666 22.1108 47.0518 21.4223 47.0518 19.6665V14.4771H45.7354V13.0054H47.0517V10.8628H48.9189Z",
+p22016470: "M31.9736 4.98732C31.9736 4.17677 32.5771 3.70949 33.6484 3.64308L34.8682 3.57277V3.1841C34.8682 2.70851 34.5537 2.43996 33.9463 2.43996C33.4502 2.43996 33.1064 2.62209 33.0078 2.94045H32.1475C32.2383 2.16701 32.9658 1.67092 33.9873 1.67092C35.1162 1.67092 35.7529 2.23292 35.7529 3.1841V6.26076H34.8975V5.62795H34.8271C34.6844 5.85494 34.484 6.03999 34.2464 6.1642C34.0088 6.28841 33.7424 6.34733 33.4746 6.33495C33.2856 6.35461 33.0945 6.33444 32.9137 6.27575C32.733 6.21705 32.5665 6.12112 32.4251 5.99415C32.2837 5.86718 32.1705 5.71199 32.0927 5.53857C32.0149 5.36516 31.9744 5.17737 31.9736 4.98732ZM34.8682 4.60255V4.22609L33.7685 4.2964C33.1484 4.3379 32.8672 4.54884 32.8672 4.94581C32.8672 5.35108 33.2187 5.58692 33.7022 5.58692C33.8438 5.60126 33.9869 5.58696 34.1229 5.54487C34.2589 5.50278 34.3851 5.43376 34.4938 5.34192C34.6026 5.25007 34.6918 5.13729 34.7561 5.01027C34.8204 4.88325 34.8585 4.74459 34.8682 4.60255Z",
+p234bdb12: "M23.0869 7.13442H22.3154V1.87172H20.6397V1.13442H24.7627V1.87172H23.0869V7.13442Z",
+p235e2a00: "M17.146 6.26075H16.2241L15.2935 2.94434H15.2231L14.2964 6.26075H13.3833L12.1421 1.75782H13.0435L13.8501 5.19382H13.9165L14.8423 1.75782H15.6948L16.6206 5.19382H16.6909L17.4936 1.75782H18.3823L17.146 6.26075Z",
+p25f97b00: "M22.0457 14.1674L17.0598 17.0006L17.1529 17.0936L22.0457 14.3135C22.3335 14.1886 22.5826 13.9888 22.767 13.735C22.9513 13.4811 23.0643 13.1824 23.094 12.8701C23.0322 13.153 22.9052 13.4175 22.7232 13.6427C22.5413 13.8679 22.3093 14.0475 22.0457 14.1674V14.1674Z",
+p26d43100: "M0.466427 25.187C0.138544 24.7949 -0.0270254 24.2923 0.00362672 23.7821V23.9282C-0.0270439 24.4384 0.138528 24.941 0.466427 25.3331L0.540927 25.2586L0.466427 25.187Z",
+p26de8970: "M12.0657 3.49062C12.8772 2.51641 13.277 1.26423 13.1802 0C11.9404 0.13022 10.7951 0.722779 9.97262 1.65961C9.57048 2.11728 9.26248 2.64971 9.06624 3.22648C8.86999 3.80325 8.78935 4.41304 8.82891 5.021C9.44905 5.02739 10.0626 4.89297 10.6232 4.62788C11.1839 4.3628 11.6771 3.97395 12.0657 3.49062Z",
+p28b0e180: "M50.2422 1.75782H51.0976V2.47315H51.1641C51.2767 2.21623 51.4667 2.00086 51.7076 1.85705C51.9485 1.71324 52.2282 1.64817 52.5078 1.6709C52.7269 1.65443 52.9469 1.68746 53.1515 1.76756C53.3561 1.84765 53.5401 1.97276 53.6897 2.1336C53.8394 2.29445 53.951 2.48691 54.0162 2.69673C54.0814 2.90655 54.0986 3.12835 54.0664 3.3457V6.2607H53.1777V3.56886C53.1777 2.84523 52.8633 2.48536 52.206 2.48536C52.0573 2.47843 51.9088 2.50375 51.7707 2.55958C51.6327 2.61541 51.5083 2.70043 51.4062 2.80882C51.3041 2.9172 51.2266 3.04639 51.1791 3.18752C51.1315 3.32865 51.1151 3.47839 51.1308 3.62647V6.26075H50.2422V1.75782Z",
+p2db3f680: "M107.231 6.40648C107.148 6.15855 106.988 5.94022 106.773 5.78011C106.557 5.62 106.295 5.52559 106.022 5.50926L101.106 5.18657L99.2848 0.818518C99.1853 0.578003 99.0123 0.371406 98.7879 0.225473C98.5636 0.0795413 98.2984 0.000993936 98.0266 0V0C97.7548 0.000993936 97.4896 0.0795413 97.2653 0.225473C97.041 0.371406 96.8679 0.578003 96.7685 0.818518L94.9144 5.21018L90.0309 5.50926C89.7582 5.52665 89.4972 5.62145 89.2817 5.78141C89.0663 5.94137 88.9063 6.15911 88.8224 6.40648C88.7363 6.65764 88.7313 6.92758 88.808 7.18149C88.8847 7.43539 89.0396 7.66163 89.2528 7.83102L93.0107 10.8532L91.8932 15.0324C91.8159 15.3151 91.8299 15.6134 91.9332 15.8885C92.0365 16.1636 92.2245 16.4028 92.4727 16.575C92.7135 16.7394 93.0005 16.8317 93.2969 16.8401C93.5933 16.8485 93.8856 16.7727 94.1364 16.6222L98.0184 14.2847H98.0349L102.215 16.7954C102.429 16.9279 102.679 16.9989 102.935 17C103.144 16.9984 103.349 16.9514 103.536 16.8624C103.723 16.7735 103.886 16.645 104.012 16.4869C104.138 16.3288 104.225 16.1453 104.265 15.9505C104.305 15.7556 104.297 15.5546 104.243 15.363L103.059 10.7903L106.8 7.83102C107.014 7.66163 107.169 7.43539 107.245 7.18149C107.322 6.92758 107.317 6.65764 107.231 6.40648Z",
+p2ddae880: "M17.1529 17.0936L12.9294 12.8697L0.466431 25.3326C0.7512 25.5838 1.11486 25.7274 1.49439 25.7386C1.87393 25.7498 2.24543 25.6279 2.54453 25.394L17.1529 17.0936Z",
+p2ddd6280: "M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7",
+p2e09de00: "M10.9863 1.87172H8.25386V3.77402H10.7178V4.49482H8.25386V6.39712H10.9863V7.13442H7.48336V1.13442H10.9863V1.87172Z",
+p2eab3c00: "M12.07 10.315C12.4512 10.1667 12.8877 10.0654 13.5265 10.0363C14.1666 10.0068 14.3712 10 16.0007 10C17.6302 10 17.8347 10.0072 18.4745 10.0363C19.1128 10.0649 19.549 10.1667 19.9309 10.315C20.325 10.4682 20.6599 10.6732 20.9933 11.0071C21.3268 11.341 21.5319 11.6754 21.6855 12.07C21.8338 12.4511 21.9351 12.8875 21.9641 13.5263C21.9932 14.1661 22 14.3706 22 16C22 17.6294 21.9932 17.8335 21.9641 18.4737C21.9355 19.1124 21.8338 19.5487 21.6855 19.9301C21.5319 20.3245 21.3273 20.6595 20.9933 20.9929C20.6594 21.3263 20.325 21.5314 19.9305 21.685C19.549 21.8333 19.1128 21.9346 18.474 21.9637C17.8343 21.9932 17.6297 22 16.0003 22C14.3708 22 14.1666 21.9927 13.5265 21.9637C12.8877 21.9346 12.4519 21.8333 12.07 21.685C11.6753 21.5314 11.341 21.3262 11.0071 20.9929C10.6732 20.6597 10.4682 20.3245 10.315 19.9301C10.1667 19.5487 10.0654 19.1125 10.0363 18.4737C10.0068 17.8339 10 17.6294 10 16C10 14.3706 10.0068 14.1661 10.0363 13.5263C10.0654 12.8876 10.1667 12.4514 10.315 12.07C10.4682 11.6752 10.6732 11.3405 11.0071 11.0071C11.3411 10.6737 11.6753 10.4682 12.07 10.315ZM15.9997 14C14.8953 14 14 14.8955 14 16C14 17.1045 14.8953 18 15.9997 18C17.1043 18 18 17.1043 18 16C18 14.8957 17.1043 14 15.9997 14ZM12.6667 16C12.6667 14.1594 14.1586 12.6667 15.9997 12.6667C17.8405 12.6667 19.3333 14.1591 19.3333 16C19.3333 17.8409 17.8405 19.3333 15.9997 19.3333C14.1586 19.3333 12.6667 17.8407 12.6667 16ZM20 12.6667C20.3682 12.6667 20.6667 12.3682 20.6667 12C20.6667 11.6318 20.3682 11.3333 20 11.3333C19.6318 11.3333 19.3333 11.6318 19.3333 12C19.3333 12.3682 19.6318 12.6667 20 12.6667Z",
+p2edcc080: "M14.2373 7.13442H13.4658V1.87172H11.79V1.13442H15.9131V1.87172H14.2373V7.13442Z",
+p3195a1f8: "M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z",
+p31d8c180: "M2.07003 0.315027C2.45122 0.166707 2.8877 0.0654267 3.52646 0.0363334C4.16657 0.00676674 4.37125 0 6.00073 0C7.6302 0 7.83473 0.00724674 8.47447 0.0363334C9.1128 0.0649467 9.549 0.166707 9.93093 0.315027C10.325 0.468193 10.6599 0.673153 10.9933 1.00709C11.3268 1.34103 11.5319 1.67544 11.6855 2.06995C11.8338 2.45112 11.9351 2.88753 11.9641 3.52632C11.9932 4.16607 12 4.37059 12 6C12 7.6294 11.9932 7.83347 11.9641 8.47367C11.9355 9.1124 11.8338 9.54867 11.6855 9.93007C11.5319 10.3245 11.3273 10.6595 10.9933 10.9929C10.6594 11.3263 10.325 11.5314 9.93047 11.685C9.549 11.8333 9.1128 11.9346 8.474 11.9637C7.83427 11.9932 7.62973 12 6.00027 12C4.37077 12 4.16657 11.9927 3.52646 11.9637C2.8877 11.9346 2.45194 11.8333 2.07003 11.685C1.67527 11.5314 1.34103 11.3262 1.00713 10.9929C0.673227 10.6597 0.468213 10.3245 0.315033 9.93007C0.166713 9.54867 0.0654267 9.11247 0.0363401 8.47367C0.00676674 7.83393 0 7.6294 0 6C0 4.37059 0.00676674 4.16607 0.0363401 3.52632C0.0654267 2.88759 0.166713 2.45136 0.315033 2.06995C0.468213 1.6752 0.67318 1.34049 1.00713 1.00709C1.34108 0.67368 1.67527 0.468193 2.07003 0.315027ZM5.99967 4C4.89527 4 4 4.89547 4 6C4 7.10453 4.89527 8 5.99967 8C7.10433 8 8 7.10433 8 6C8 4.89567 7.10433 4 5.99967 4ZM2.66667 6C2.66667 4.15936 4.15859 2.66667 5.99967 2.66667C7.84053 2.66667 9.33333 4.15915 9.33333 6C9.33333 7.84087 7.84053 9.33333 5.99967 9.33333C4.15859 9.33333 2.66667 7.84067 2.66667 6ZM10 2.66667C10.3682 2.66667 10.6667 2.36819 10.6667 2C10.6667 1.63181 10.3682 1.33333 10 1.33333C9.6318 1.33333 9.33333 1.63181 9.33333 2C9.33333 2.36819 9.6318 2.66667 10 2.66667Z",
+p330e6600: "M7.875 18.7026H3.1416L2.00488 22.0591H0L4.4834 9.64109H6.5664L11.0498 22.0591H9.01073L7.875 18.7026ZM3.63183 17.1538H7.38383L5.53422 11.7065H5.48246L3.63183 17.1538Z",
+p3394cd00: "M9.42998 39.128C9.08566 39.128 8.74966 39.1241 8.40804 39.1173C7.70034 39.1091 6.9943 39.0546 6.29571 38.9542C5.6443 38.8549 5.01327 38.6702 4.42342 38.4062C3.83897 38.1443 3.30591 37.801 2.84466 37.3893C2.37673 36.9825 1.98715 36.5107 1.69137 35.9926C1.39233 35.471 1.18538 34.912 1.07772 34.335C0.961463 33.715 0.898562 33.0881 0.889561 32.4596C0.882396 32.2487 0.873016 31.5463 0.873016 31.5463V8.44093C0.873016 8.44093 0.883007 7.74937 0.889618 7.5462C0.898236 6.91875 0.960772 6.29279 1.07668 5.67374C1.18454 5.09514 1.39165 4.53452 1.69085 4.01129C1.98554 3.4935 2.37296 3.02132 2.83807 2.61305C3.30266 2.20091 3.83742 1.85582 4.42286 1.59037C5.01136 1.3272 5.6412 1.1438 6.29129 1.04631C6.99218 0.944858 7.70067 0.890007 8.41082 0.882219L9.43053 0.870007H125.57L126.602 0.882709C127.306 0.89011 128.008 0.944472 128.702 1.04533C129.359 1.14404 129.995 1.32872 130.59 1.5933C131.763 2.12826 132.718 2.97461 133.32 4.01373C133.614 4.53335 133.818 5.0894 133.924 5.663C134.042 6.28713 134.107 6.91801 134.121 7.5506C134.124 7.83386 134.124 8.13813 134.124 8.44093C134.133 8.81601 134.133 9.17301 134.133 9.53295V30.466C134.133 30.8294 134.133 31.1839 134.124 31.5414C134.124 31.8667 134.124 32.1646 134.12 32.4713C134.106 33.0926 134.042 33.7122 133.927 34.3252C133.821 34.9064 133.615 35.4698 133.316 35.9956C133.018 36.5081 132.631 36.9758 132.169 37.3815C131.707 37.7954 131.173 38.1407 130.587 38.4043C129.994 38.6703 129.358 38.8557 128.702 38.9542C128.004 39.0551 127.297 39.1097 126.59 39.1173C126.259 39.1241 125.912 39.128 125.576 39.128L124.35 39.13L9.42998 39.128Z",
+p34657a80: "M62.8559 6.40648C62.773 6.15855 62.6132 5.94022 62.3976 5.78011C62.1819 5.62 61.9204 5.52559 61.6474 5.50926L56.7307 5.18657L54.9098 0.818518C54.8103 0.578003 54.6373 0.371406 54.4129 0.225473C54.1886 0.0795413 53.9234 0.000993936 53.6516 0V0C53.3798 0.000993936 53.1146 0.0795413 52.8903 0.225473C52.666 0.371406 52.4929 0.578003 52.3935 0.818518L50.5394 5.21018L45.6559 5.50926C45.3832 5.52665 45.1222 5.62145 44.9067 5.78141C44.6913 5.94137 44.5313 6.15911 44.4474 6.40648C44.3613 6.65764 44.3563 6.92758 44.433 7.18149C44.5097 7.43539 44.6646 7.66163 44.8778 7.83102L48.6357 10.8532L47.5182 15.0324C47.4409 15.3151 47.4549 15.6134 47.5582 15.8885C47.6615 16.1636 47.8495 16.4028 48.0977 16.575C48.3385 16.7394 48.6255 16.8317 48.9219 16.8401C49.2183 16.8485 49.5106 16.7727 49.7614 16.6222L53.6434 14.2847H53.6599L57.8399 16.7954C58.0543 16.9279 58.3043 16.9989 58.56 17C58.7688 16.9984 58.9744 16.9514 59.1611 16.8624C59.3478 16.7735 59.5105 16.645 59.6368 16.4869C59.7631 16.3288 59.8496 16.1453 59.8896 15.9505C59.9297 15.7556 59.9222 15.5546 59.8678 15.363L58.6842 10.7903L62.4254 7.83102C62.6386 7.66163 62.7936 7.43539 62.8703 7.18149C62.947 6.92758 62.942 6.65764 62.8559 6.40648Z",
+p349a7f80: "M20 27.5C22.7614 27.5 25 25.2614 25 22.5C25 19.7386 22.7614 17.5 20 17.5C17.2386 17.5 15 19.7386 15 22.5C15 25.2614 17.2386 27.5 20 27.5Z",
+p35419200: "M30.6973 17.5327C30.6973 20.3462 29.1914 22.1538 26.9189 22.1538C26.3433 22.1839 25.7708 22.0513 25.267 21.7712C24.7632 21.491 24.3485 21.0747 24.0703 20.5698H24.0273V25.0542H22.1689V13.0054H23.9677V14.5112H24.0019C24.2929 14.0088 24.7146 13.5946 25.2222 13.3127C25.7299 13.0309 26.3044 12.8919 26.8847 12.9107C29.1826 12.9107 30.6973 14.7271 30.6973 17.5327ZM28.7871 17.5327C28.7871 15.6997 27.8398 14.4946 26.3945 14.4946C24.9746 14.4946 24.0195 15.7251 24.0195 17.5327C24.0195 19.3569 24.9746 20.5786 26.3945 20.5786C27.8398 20.5786 28.7871 19.3823 28.7871 17.5327Z",
+p35c3b610: "M3.8946 12V6.79818H5.66358L5.92842 4.57604H3.89454V3.15731C3.89454 2.51396 4.05966 2.07554 4.91244 2.07554L6 2.07499V0.087552C5.8119 0.060516 5.16624 0 4.41522 0C2.84706 0 1.77352 1.03554 1.77352 2.93731V4.57604H0V6.79818H1.77352V11.9999L3.8946 12Z",
+p35e78e00: "M44.8027 4.00734C44.7744 3.71142 44.8083 3.41285 44.9021 3.13078C44.9959 2.84871 45.1477 2.58937 45.3476 2.36939C45.5476 2.14941 45.7913 1.97364 46.0631 1.85337C46.335 1.73309 46.629 1.67096 46.9263 1.67096C47.2235 1.67096 47.5175 1.73309 47.7894 1.85337C48.0612 1.97364 48.3049 2.14941 48.5049 2.36939C48.7048 2.58937 48.8566 2.84871 48.9504 3.13078C49.0442 3.41285 49.0781 3.71142 49.0498 4.00734C49.0786 4.30356 49.0452 4.60254 48.9516 4.88507C48.858 5.16759 48.7063 5.42741 48.5063 5.64783C48.3064 5.86824 48.0625 6.04437 47.7903 6.16491C47.5182 6.28544 47.2239 6.34771 46.9263 6.34771C46.6286 6.34771 46.3343 6.28544 46.0622 6.16491C45.7901 6.04437 45.5462 5.86824 45.3462 5.64783C45.1462 5.42741 44.9945 5.16759 44.9009 4.88507C44.8073 4.60254 44.7739 4.30356 44.8027 4.00734ZM48.1357 4.00734C48.1357 3.03127 47.6972 2.46047 46.9277 2.46047C46.1553 2.46047 45.7207 3.03127 45.7207 4.00735C45.7207 4.99124 46.1553 5.55764 46.9277 5.55764C47.6973 5.55763 48.1357 4.98732 48.1357 4.00734Z",
+p360ff200: "M6.37696 4.37762C6.39514 4.74456 6.33844 5.11137 6.21033 5.4557C6.08222 5.80003 5.88537 6.11469 5.63176 6.38052C5.34755 6.67528 5.00431 6.90672 4.62449 7.05969C4.24467 7.21266 3.83684 7.28372 3.42766 7.26822C3.01588 7.2719 2.60752 7.19324 2.22657 7.03685C1.84563 6.88046 1.49979 6.64949 1.20938 6.35753C0.918978 6.06557 0.689869 5.7185 0.535514 5.33672C0.38116 4.95495 0.304678 4.54617 0.310565 4.13442C0.304724 3.72265 0.381233 3.31387 0.535598 2.93209C0.689963 2.55031 0.919067 2.20322 1.20946 1.91123C1.49985 1.61924 1.84567 1.38823 2.22659 1.23176C2.60752 1.0753 3.01587 0.996541 3.42766 1.00012C3.85105 0.998837 4.27019 1.08444 4.65916 1.25162C5.02043 1.39806 5.34199 1.62776 5.59766 1.92202L5.07026 2.44982C4.86928 2.21327 4.61665 2.02605 4.33185 1.90262C4.04705 1.77919 3.7377 1.72284 3.42766 1.73792C3.11558 1.7363 2.80639 1.79769 2.51859 1.9184C2.2308 2.03911 1.97032 2.21666 1.75277 2.44042C1.53522 2.66418 1.36507 2.92955 1.2525 3.22063C1.13994 3.5117 1.08727 3.8225 1.09766 4.13442C1.09022 4.60161 1.22169 5.0605 1.47539 5.45288C1.72909 5.84526 2.0936 6.15347 2.52269 6.33842C2.95178 6.52337 3.42613 6.57673 3.88559 6.49174C4.34505 6.40675 4.76893 6.18723 5.10347 5.86102C5.41135 5.52925 5.58982 5.09793 5.60636 4.64562H3.42766V3.92492H6.33496C6.36245 4.07426 6.37651 4.22577 6.37696 4.37762Z",
+p3709a00: "M61.7588 13.0054H63.5312V14.5464H63.5742C63.6942 14.0651 63.9761 13.6398 64.3727 13.3419C64.7693 13.044 65.2563 12.8917 65.752 12.9106C65.9661 12.9099 66.1797 12.9331 66.3887 12.98V14.7183C66.1183 14.6356 65.8363 14.5977 65.5537 14.606C65.2837 14.595 65.0146 14.6426 64.7647 14.7455C64.5149 14.8484 64.2903 15.0041 64.1063 15.202C63.9223 15.3999 63.7833 15.6353 63.6989 15.8919C63.6145 16.1486 63.5866 16.4205 63.6172 16.689V22.0591H61.7588L61.7588 13.0054Z",
+p3754fa00: "M19.0226 10.0027V10H19.7259L19.9829 10.0506C20.1542 10.0835 20.3098 10.1265 20.4495 10.1798C20.5893 10.2331 20.7245 10.2952 20.8552 10.3663C20.986 10.4373 21.1046 10.5097 21.2111 10.5834C21.3165 10.6562 21.4112 10.7334 21.4951 10.8151C21.578 10.8977 21.7074 10.919 21.8832 10.879C22.0591 10.8391 22.2485 10.7836 22.4513 10.7125C22.6542 10.6415 22.8548 10.5616 23.0532 10.4728C23.2516 10.384 23.3724 10.3276 23.4157 10.3037C23.458 10.2788 23.4806 10.2655 23.4833 10.2637L23.486 10.2597L23.4995 10.253L23.5131 10.2464L23.5266 10.2397L23.5401 10.2331L23.5428 10.2291L23.5469 10.2264L23.551 10.2238L23.5537 10.2198L23.5672 10.2158L23.5807 10.2131L23.578 10.2331L23.5739 10.253L23.5672 10.273L23.5604 10.293L23.5537 10.3063L23.5469 10.3196L23.5401 10.3396C23.5356 10.3529 23.5311 10.3707 23.5266 10.3929C23.5221 10.4151 23.4793 10.5039 23.3981 10.6593C23.317 10.8147 23.2155 10.9723 23.0938 11.1321C22.9721 11.2919 22.8629 11.4126 22.7665 11.4943C22.6691 11.5769 22.6046 11.6346 22.5731 11.6675C22.5415 11.7012 22.5031 11.7323 22.4581 11.7607L22.3904 11.8047L22.3769 11.8113L22.3634 11.818L22.3607 11.822L22.3566 11.8246L22.3526 11.8273L22.3499 11.8313L22.3363 11.838L22.3228 11.8446L22.3202 11.8486L22.316 11.8513L22.312 11.8539L22.3093 11.8579L22.3066 11.8619L22.3025 11.8646L22.2985 11.8673L22.2958 11.8713H22.3634L22.7421 11.7913C22.9946 11.7381 23.2358 11.6737 23.4657 11.5982L23.8309 11.4784L23.8715 11.465L23.8918 11.4584L23.9054 11.4517L23.9188 11.4451L23.9323 11.4384L23.9459 11.4317L23.9729 11.4277L24 11.4251V11.4517L23.9932 11.4544L23.9865 11.4584L23.9838 11.4624L23.9797 11.465L23.9756 11.4677L23.9729 11.4717L23.9702 11.4757L23.9662 11.4784L23.9621 11.481L23.9594 11.485L23.9567 11.489L23.9527 11.4917L23.9459 11.505L23.9391 11.5183L23.9351 11.521C23.9333 11.5236 23.876 11.5991 23.7633 11.7474C23.6506 11.8966 23.5898 11.972 23.5807 11.9738C23.5717 11.9765 23.5591 11.9898 23.5428 12.0138C23.5275 12.0386 23.432 12.1376 23.2561 12.3108C23.0803 12.4839 22.9081 12.638 22.7394 12.7729C22.5699 12.9088 22.4843 13.0757 22.4825 13.2737C22.4798 13.4708 22.4693 13.6937 22.4513 13.9423C22.4333 14.1909 22.3995 14.4595 22.3499 14.748C22.3003 15.0366 22.2236 15.3629 22.1199 15.727C22.0163 16.091 21.89 16.4462 21.7412 16.7924C21.5924 17.1387 21.4369 17.4495 21.2746 17.7248C21.1123 18 20.9635 18.2331 20.8282 18.424C20.6929 18.6149 20.5555 18.7946 20.4157 18.9634C20.2759 19.1321 20.0992 19.3221 19.8855 19.5334C19.6708 19.7439 19.5537 19.8593 19.5338 19.8797C19.5131 19.8992 19.4247 19.9721 19.2687 20.0981C19.1136 20.225 18.9468 20.352 18.7682 20.479C18.5906 20.6051 18.4274 20.7103 18.2786 20.7947C18.1298 20.8791 17.9504 20.9754 17.7403 21.0837C17.5311 21.1929 17.3047 21.2941 17.0613 21.3873C16.8178 21.4805 16.5609 21.5672 16.2904 21.647C16.0198 21.727 15.7583 21.7891 15.5059 21.8335C15.2534 21.8779 14.9671 21.9156 14.647 21.9468L14.1668 21.9933V22H13.2876V21.9933L13.1727 21.9867C13.096 21.9822 13.0329 21.9778 12.9833 21.9734C12.9337 21.969 12.7466 21.9445 12.422 21.9001C12.0974 21.8557 11.8427 21.8113 11.6578 21.7669C11.473 21.7225 11.1979 21.6382 10.8327 21.5139C10.4675 21.3896 10.1551 21.264 9.8954 21.137C9.63662 21.0109 9.47431 20.931 9.40847 20.8972C9.34355 20.8644 9.27052 20.8236 9.18936 20.7747L9.06763 20.7015L9.06494 20.6975L9.06086 20.6948L9.05681 20.6922L9.0541 20.6881L9.04058 20.6815L9.02705 20.6748L9.02436 20.6708L9.02029 20.6681L9.01623 20.6655L9.01352 20.6615L9.01084 20.6575L9.00677 20.6548H9V20.6282L9.01352 20.6309L9.02705 20.6349L9.08791 20.6415C9.1285 20.6459 9.23896 20.6526 9.4193 20.6615C9.59965 20.6704 9.79125 20.6704 9.99414 20.6615C10.197 20.6526 10.4044 20.6326 10.6163 20.6016C10.8282 20.5705 11.0785 20.5172 11.367 20.4417C11.6556 20.3663 11.9207 20.2766 12.1623 20.1727C12.4031 20.0679 12.5744 19.9898 12.6763 19.9383C12.7773 19.8877 12.9315 19.7936 13.1389 19.6559L13.45 19.4495L13.4527 19.4455L13.4567 19.4429L13.4608 19.4402L13.4635 19.4362L13.4662 19.4322L13.4702 19.4295L13.4743 19.4268L13.477 19.4229L13.4905 19.4189L13.5041 19.4162L13.5068 19.4029L13.5108 19.3895L13.5149 19.3869L13.5176 19.3829L13.4094 19.3763C13.3372 19.3718 13.2674 19.3674 13.1997 19.3629C13.1321 19.3585 13.0262 19.3385 12.8819 19.303C12.7376 19.2674 12.5821 19.2142 12.4152 19.1432C12.2484 19.0722 12.0861 18.9878 11.9283 18.8901C11.7705 18.7925 11.6564 18.7112 11.5861 18.6464C11.5167 18.5825 11.4265 18.4919 11.3156 18.3747C11.2056 18.2566 11.11 18.1354 11.0289 18.0111C10.9477 17.8868 10.8702 17.7434 10.7962 17.5809L10.684 17.3385L10.6772 17.3185L10.6704 17.2985L10.6664 17.2853L10.6637 17.2719L10.684 17.2745L10.7042 17.2786L10.853 17.2985C10.9522 17.3119 11.1078 17.3163 11.3197 17.3119C11.5316 17.3075 11.6781 17.2986 11.7592 17.2853C11.8404 17.2719 11.89 17.263 11.908 17.2586L11.9351 17.252L11.9689 17.2453L12.0027 17.2386L12.0054 17.2347L12.0095 17.232L12.0135 17.2293L12.0162 17.2253L11.9892 17.2187L11.9621 17.212L11.9351 17.2053L11.908 17.1986L11.881 17.192C11.8629 17.1876 11.8314 17.1787 11.7863 17.1653C11.7412 17.1521 11.6195 17.1032 11.4211 17.0189C11.2227 16.9345 11.0649 16.8524 10.9477 16.7725C10.8302 16.6923 10.7181 16.6047 10.6123 16.5101C10.5068 16.4142 10.3909 16.2908 10.2646 16.1399C10.1384 15.9889 10.0257 15.8135 9.92651 15.6137C9.82732 15.4139 9.75293 15.2231 9.70333 15.0411C9.65394 14.8601 9.62135 14.6751 9.60596 14.4883L9.5816 14.2087L9.59513 14.2113L9.60865 14.2153L9.62219 14.222L9.63571 14.2286L9.64923 14.2353L9.66276 14.242L9.87241 14.3352C10.0122 14.3973 10.1858 14.4506 10.3931 14.495C10.6006 14.5394 10.7245 14.5638 10.7651 14.5682L10.826 14.5749H10.9477L10.945 14.5709L10.9409 14.5682L10.9369 14.5656L10.9342 14.5616L10.9315 14.5576L10.9274 14.555L10.9234 14.5523L10.9207 14.5483L10.9071 14.5416L10.8936 14.535L10.8909 14.531L10.8868 14.5283L10.8828 14.5256L10.8801 14.5217L10.8665 14.515L10.853 14.5083L10.8503 14.5044C10.8476 14.5026 10.8088 14.4741 10.734 14.4191C10.66 14.3632 10.5825 14.2908 10.5014 14.202C10.4202 14.1132 10.339 14.02 10.2579 13.9223C10.1766 13.8244 10.1042 13.7197 10.0415 13.6093C9.97837 13.4983 9.91163 13.3572 9.8413 13.1858C9.77187 13.0153 9.71912 12.8435 9.68305 12.6704C9.64699 12.4972 9.6267 12.3263 9.62219 12.1576C9.61768 11.9889 9.62218 11.8446 9.63571 11.7248C9.64923 11.6049 9.67628 11.4695 9.71687 11.3185C9.75744 11.1676 9.81606 11.0078 9.89269 10.8391L10.0077 10.586L10.0144 10.566L10.0212 10.5461L10.0253 10.5434L10.0279 10.5394L10.0307 10.5354L10.0347 10.5327L10.0388 10.5354L10.0415 10.5394L10.0442 10.5434L10.0482 10.5461L10.0523 10.5487L10.055 10.5527L10.0577 10.5567L10.0618 10.5594L10.0685 10.5727L10.0753 10.586L10.0794 10.5887L10.0821 10.5927L10.2646 10.7925C10.3864 10.9256 10.5307 11.0744 10.6975 11.2386C10.8643 11.4029 10.9567 11.4881 10.9747 11.4943C10.9928 11.5014 11.0153 11.5219 11.0424 11.5556C11.0694 11.5885 11.1596 11.667 11.3129 11.7913C11.4662 11.9156 11.6668 12.0599 11.9148 12.2242C12.1628 12.3884 12.4378 12.5505 12.7399 12.7103C13.0419 12.8701 13.3666 13.0144 13.7137 13.1432C14.0609 13.2719 14.3043 13.3563 14.4441 13.3962C14.5839 13.4362 14.8228 13.4872 15.1609 13.5494C15.4991 13.6116 15.7538 13.6515 15.9251 13.6693C16.0965 13.687 16.2137 13.6972 16.2768 13.6999L16.3715 13.7026L16.3688 13.6826L16.3648 13.6626L16.3377 13.4961C16.3196 13.3851 16.3106 13.2297 16.3106 13.03C16.3106 12.8302 16.3265 12.646 16.358 12.4772C16.3895 12.3085 16.4369 12.1376 16.5 11.9645C16.5632 11.7913 16.6249 11.6524 16.6853 11.5476C16.7466 11.4437 16.8268 11.3252 16.9261 11.192C17.0252 11.0588 17.1538 10.9212 17.3116 10.7791C17.4694 10.6371 17.6497 10.5105 17.8526 10.3996C18.0554 10.2886 18.2425 10.2042 18.4138 10.1465C18.5852 10.0888 18.7295 10.0511 18.8467 10.0333C18.9639 10.0155 19.0226 10.0053 19.0226 10.0027Z",
+p3aebff00: "M0.466434 0.406709C0.13852 0.798782 -0.0270535 1.30141 0.00363445 1.81161V23.9277C-0.0271427 24.4379 0.138442 24.9406 0.466434 25.3326L0.540435 25.4047L12.9294 13.0158V12.7235L0.540435 0.334109L0.466434 0.406709Z",
+p3b676a80: "M24.6665 0H25.5552V6.26074H24.6665V0Z",
+p3c1952c0: "M19.4263 1.75782H20.2817V2.47315H20.3481C20.4608 2.21623 20.6508 2.00086 20.8917 1.85705C21.1325 1.71324 21.4123 1.64817 21.6919 1.6709C21.911 1.65443 22.131 1.68746 22.3356 1.76756C22.5402 1.84765 22.7241 1.97276 22.8738 2.1336C23.0235 2.29445 23.1351 2.48691 23.2003 2.69673C23.2655 2.90655 23.2826 3.12835 23.2505 3.3457V6.2607H22.3618V3.56886C22.3618 2.84523 22.0474 2.48536 21.3901 2.48536C21.2414 2.47843 21.0929 2.50375 20.9548 2.55958C20.8168 2.61541 20.6924 2.70043 20.5903 2.80882C20.4882 2.9172 20.4107 3.04639 20.3631 3.18752C20.3156 3.32865 20.2992 3.47839 20.3149 3.62647V6.26075H19.4263L19.4263 1.75782Z",
+p3c536e80: "M51.6377 17.5327C51.6377 14.6841 53.3155 12.8941 55.9317 12.8941C58.5567 12.8941 60.2266 14.6841 60.2266 17.5327C60.2266 20.3892 58.5655 22.1714 55.9317 22.1714C53.2988 22.1714 51.6377 20.3892 51.6377 17.5327ZM58.333 17.5327C58.333 15.5786 57.4375 14.4253 55.9317 14.4253C54.4258 14.4253 53.5313 15.5874 53.5313 17.5327C53.5313 19.4946 54.4258 20.6392 55.9317 20.6392C57.4375 20.6392 58.333 19.4946 58.333 17.5327Z",
+p3d90cb00: "M10.0226 0.00266254V0H10.7259L10.9829 0.0506101C11.1542 0.0834676 11.3098 0.126525 11.4495 0.179797C11.5893 0.233077 11.7245 0.29523 11.8552 0.366262C11.986 0.437287 12.1046 0.509663 12.2111 0.58335C12.3165 0.656168 12.4112 0.73341 12.4951 0.815093C12.578 0.897668 12.7074 0.918982 12.8832 0.879022C13.0591 0.83907 13.2485 0.78357 13.4513 0.712545C13.6542 0.641512 13.8548 0.5616 14.0532 0.472808C14.2516 0.384015 14.3724 0.327638 14.4157 0.30366C14.458 0.278813 14.4806 0.265493 14.4833 0.263708L14.486 0.25971L14.4995 0.25305L14.5131 0.24639L14.5266 0.23973L14.5401 0.233078L14.5428 0.22908L14.5469 0.226417L14.551 0.223755L14.5537 0.219758L14.5672 0.21576L14.5807 0.213098L14.578 0.233078L14.5739 0.25305L14.5672 0.27303L14.5604 0.29301L14.5537 0.30633L14.5469 0.319642L14.5401 0.339622C14.5356 0.352942 14.5311 0.370695 14.5266 0.392895C14.5221 0.415102 14.4793 0.50388 14.3981 0.659265C14.317 0.814658 14.2155 0.972255 14.0938 1.13207C13.9721 1.2919 13.8629 1.41265 13.7665 1.49434C13.6691 1.57691 13.6046 1.63462 13.5731 1.66748C13.5415 1.70122 13.5031 1.73229 13.4581 1.76071L13.3904 1.80466L13.3769 1.81132L13.3634 1.81798L13.3607 1.82197L13.3566 1.82464L13.3526 1.8273L13.3499 1.8313L13.3363 1.83796L13.3228 1.84462L13.3202 1.84861L13.316 1.85128L13.312 1.85394L13.3093 1.85794L13.3066 1.86193L13.3025 1.8646L13.2985 1.86726L13.2958 1.87126H13.3634L13.7421 1.79135C13.9946 1.73807 14.2358 1.6737 14.4657 1.59823L14.8309 1.47835L14.8715 1.46504L14.8918 1.45838L14.9054 1.45172L14.9188 1.44506L14.9323 1.4384L14.9459 1.43174L14.9729 1.42774L15 1.42508V1.45172L14.9932 1.45438L14.9865 1.45838L14.9838 1.46237L14.9797 1.46504L14.9756 1.46771L14.9729 1.47169L14.9702 1.47569L14.9662 1.47835L14.9621 1.48102L14.9594 1.48502L14.9567 1.48901L14.9527 1.49168L14.9459 1.50499L14.9391 1.51831L14.9351 1.52098C14.9333 1.52364 14.876 1.59911 14.7633 1.7474C14.6506 1.89656 14.5898 1.97202 14.5807 1.97381C14.5717 1.97647 14.5591 1.98979 14.5428 2.01376C14.5275 2.03861 14.432 2.13763 14.2561 2.31076C14.0803 2.48391 13.9081 2.63795 13.7394 2.77292C13.5699 2.90877 13.4843 3.07569 13.4825 3.2737C13.4798 3.47081 13.4693 3.69368 13.4513 3.94229C13.4333 4.1909 13.3995 4.45948 13.3499 4.74802C13.3003 5.03662 13.2236 5.36295 13.1199 5.727C13.0163 6.09097 12.89 6.44617 12.7412 6.79245C12.5924 7.13872 12.4369 7.44952 12.2746 7.72477C12.1123 8.00002 11.9635 8.23305 11.8282 8.424C11.6929 8.61488 11.5555 8.79465 11.4157 8.9634C11.2759 9.13207 11.0992 9.32213 10.8855 9.5334C10.6708 9.74385 10.5537 9.85927 10.5338 9.87967C10.5131 9.89925 10.4247 9.97207 10.2687 10.0981C10.1136 10.225 9.9468 10.352 9.76822 10.479C9.59062 10.6051 9.42743 10.7103 9.27863 10.7947C9.12983 10.8791 8.95042 10.9754 8.74027 11.0837C8.5311 11.1929 8.30475 11.2941 8.0613 11.3873C7.81785 11.4805 7.5609 11.5672 7.29037 11.647C7.01985 11.727 6.75833 11.7891 6.50588 11.8335C6.25343 11.8779 5.96709 11.9156 5.64698 11.9468L5.16682 11.9933V12H4.28764V11.9933L4.17268 11.9867C4.09604 11.9822 4.03291 11.9778 3.98332 11.9734C3.93373 11.969 3.74662 11.9445 3.422 11.9001C3.09739 11.8557 2.84266 11.8113 2.6578 11.7669C2.47296 11.7225 2.19793 11.6382 1.83273 11.5139C1.46754 11.3896 1.1551 11.264 0.895403 11.137C0.636615 11.0109 0.474308 10.931 0.408473 10.8972C0.343553 10.8644 0.270518 10.8236 0.18936 10.7747L0.0676274 10.7015L0.064935 10.6975L0.0608625 10.6948L0.0568051 10.6922L0.054105 10.6881L0.040575 10.6815L0.0270526 10.6748L0.02436 10.6708L0.0202875 10.6681L0.01623 10.6655L0.0135224 10.6615L0.0108376 10.6575L0.00676507 10.6548H0V10.6282L0.0135224 10.6309L0.0270526 10.6349L0.0879149 10.6415C0.128497 10.6459 0.238958 10.6526 0.419295 10.6615C0.599648 10.6704 0.79125 10.6704 0.99414 10.6615C1.19702 10.6526 1.40443 10.6326 1.61632 10.6016C1.82823 10.5705 2.07845 10.5172 2.367 10.4417C2.65556 10.3663 2.92066 10.2766 3.16232 10.1727C3.40308 10.0679 3.5744 9.98978 3.6763 9.93833C3.77729 9.8877 3.93148 9.79357 4.13887 9.65595L4.44995 9.44948L4.45266 9.4455L4.45672 9.44287L4.46079 9.44018L4.46348 9.4362L4.46618 9.43215L4.47024 9.42953L4.47431 9.42682L4.477 9.42285L4.49054 9.41888L4.50406 9.41617L4.50676 9.4029L4.51082 9.38955L4.5149 9.38692L4.51758 9.38287L4.40938 9.37627C4.33724 9.37185 4.26736 9.36735 4.19973 9.36293C4.1321 9.3585 4.02616 9.33855 3.88187 9.303C3.73761 9.26745 3.58207 9.2142 3.41524 9.14318C3.24843 9.07215 3.08611 8.98778 2.92831 8.89013C2.77052 8.79248 2.65645 8.71117 2.58611 8.64637C2.51669 8.58247 2.42651 8.49187 2.3156 8.37472C2.20559 8.2566 2.11001 8.1354 2.02886 8.01113C1.9477 7.88678 1.87015 7.74337 1.79623 7.58092L1.68395 7.33853L1.67719 7.3185L1.67042 7.29855L1.66636 7.28528L1.66366 7.27192L1.68395 7.27455L1.70424 7.2786L1.85302 7.29855C1.95222 7.3119 2.10776 7.31632 2.31966 7.3119C2.53156 7.30747 2.67808 7.29855 2.75924 7.28528C2.8404 7.27193 2.89 7.263 2.90803 7.25857L2.93508 7.25198L2.96889 7.2453L3.00271 7.23862L3.00541 7.23465L3.00946 7.23195L3.01354 7.22933L3.01623 7.22528L2.98918 7.21867L2.96213 7.212L2.93508 7.20532L2.90803 7.19865L2.88098 7.19198C2.86295 7.18755 2.83139 7.1787 2.7863 7.16535C2.74121 7.15207 2.61948 7.10325 2.4211 7.01887C2.22273 6.9345 2.06493 6.85237 1.9477 6.7725C1.83018 6.69232 1.71813 6.60465 1.61226 6.51008C1.50677 6.41423 1.3909 6.29077 1.26465 6.13987C1.13842 5.9889 1.02571 5.81355 0.926512 5.61375C0.827325 5.41395 0.752932 5.22308 0.703335 5.04105C0.65394 4.86008 0.621345 4.67512 0.605963 4.48834L0.581603 4.20865L0.595132 4.21132L0.608655 4.21532L0.622185 4.22198L0.635707 4.22863L0.64923 4.2353L0.66276 4.24196L0.872407 4.33518C1.01218 4.39734 1.18576 4.45061 1.39315 4.495C1.60055 4.53937 1.72453 4.56382 1.7651 4.56825L1.82597 4.57493H1.9477L1.94501 4.57095L1.94094 4.56825L1.93688 4.56562L1.93417 4.56157L1.93148 4.5576L1.92741 4.55498L1.92335 4.55228L1.92065 4.5483L1.90712 4.54163L1.8936 4.53495L1.89091 4.53097L1.88683 4.52827L1.88278 4.52565L1.88007 4.52168L1.86655 4.515L1.85302 4.50832L1.85033 4.50435C1.84763 4.50255 1.80884 4.47413 1.73399 4.41909C1.66005 4.36316 1.58251 4.2908 1.50135 4.202C1.4202 4.1132 1.33904 4.01997 1.25789 3.92231C1.17659 3.82442 1.10417 3.71969 1.04148 3.60932C0.978367 3.49834 0.911633 3.35715 0.841298 3.1858C0.77187 3.01532 0.719122 2.84351 0.683047 2.67037C0.646987 2.49722 0.6267 2.32631 0.622185 2.1576C0.617678 1.9889 0.622185 1.84462 0.635707 1.72475C0.64923 1.60488 0.676283 1.46947 0.716865 1.31854C0.75744 1.16759 0.81606 1.00778 0.892695 0.83907L1.00766 0.586013L1.01443 0.56604L1.02119 0.54606L1.02526 0.543398L1.02795 0.5394L1.03066 0.535403L1.03472 0.53274L1.03879 0.535403L1.04148 0.5394L1.04419 0.543398L1.04825 0.54606L1.05231 0.548722L1.055 0.55272L1.05771 0.556718L1.06177 0.55938L1.06853 0.5727L1.07529 0.586013L1.07936 0.588683L1.08205 0.592672L1.26465 0.79245C1.38638 0.925635 1.53066 1.07437 1.69747 1.23863C1.8643 1.40288 1.95672 1.48812 1.97475 1.49434C1.99279 1.50144 2.01533 1.52186 2.04238 1.55561C2.06943 1.58846 2.15961 1.66704 2.31289 1.79135C2.46619 1.91564 2.66682 2.05994 2.91479 2.22419C3.16277 2.38845 3.43778 2.5505 3.73985 2.71032C4.04194 2.87014 4.36655 3.01442 4.7137 3.14317C5.06087 3.27193 5.30433 3.35627 5.44409 3.39623C5.58387 3.43619 5.82281 3.48723 6.16095 3.54939C6.49912 3.61155 6.75382 3.6515 6.92512 3.66925C7.0965 3.68701 7.21373 3.69722 7.2768 3.69989L7.37153 3.70255L7.36882 3.68257L7.36478 3.6626L7.3377 3.49612C7.31962 3.38513 7.31063 3.22975 7.31063 3.02997C7.31063 2.83019 7.32645 2.64595 7.35795 2.47725C7.38953 2.30854 7.43692 2.13763 7.5 1.96448C7.56315 1.79134 7.62487 1.65238 7.68532 1.54762C7.7466 1.44373 7.82685 1.3252 7.92607 1.19201C8.02522 1.05882 8.15377 0.921202 8.31157 0.779137C8.46937 0.637065 8.64968 0.51054 8.85255 0.399555C9.05543 0.28857 9.24255 0.20421 9.41385 0.146505C9.58522 0.0887926 9.72952 0.0510527 9.84667 0.0333002C9.9639 0.0155402 10.0226 0.00532504 10.0226 0.00266254Z",
+p3f96e4c0: "M34.5337 7.13442V1.13442H35.4722L38.3882 5.80192H38.4214L38.3882 4.64562V1.13442H39.1597V7.13442H38.355L35.3042 2.24082H35.271L35.3042 3.39712V7.13442H34.5337Z",
+p48005c0: "M37.2832 18.5991C37.4209 19.8306 38.6172 20.6391 40.252 20.6391C41.8184 20.6391 42.9453 19.8305 42.9453 18.7202C42.9453 17.7563 42.2656 17.1792 40.6562 16.7837L39.0469 16.396C36.7666 15.8452 35.708 14.7788 35.708 13.0483C35.708 10.9057 37.5752 9.43403 40.2266 9.43403C42.8506 9.43403 44.6494 10.9057 44.71 13.0483H42.834C42.7217 11.809 41.6972 11.061 40.2002 11.061C38.7031 11.061 37.6787 11.8178 37.6787 12.9194C37.6787 13.7973 38.333 14.3139 39.9336 14.7094L41.3017 15.0453C43.8496 15.6479 44.9082 16.6713 44.9082 18.4877C44.9082 20.811 43.0576 22.266 40.1142 22.266C37.3603 22.266 35.5009 20.8451 35.3808 18.599L37.2832 18.5991Z",
+p4ac700: "M59.0879 0.63673V1.77833H60.0635V2.52687H59.0879V4.8423C59.0879 5.31398 59.2822 5.52052 59.7246 5.52052C59.8379 5.52016 59.951 5.51331 60.0635 5.50001V6.24024C59.9039 6.26879 59.7422 6.28398 59.5801 6.28565C58.5918 6.28565 58.1982 5.93799 58.1982 5.06983V2.52683H57.4834V1.77829H58.1982V0.63673H59.0879Z",
+p7fb1900: "M36.9209 4.00734C36.9209 2.58449 37.6523 1.68312 38.79 1.68312C39.0714 1.67015 39.3507 1.73756 39.5953 1.87745C39.8398 2.01735 40.0394 2.22395 40.1709 2.47312H40.2373V0H41.126V6.26074H40.2744V5.54931H40.2041C40.0625 5.7968 39.8559 6.00083 39.6066 6.13932C39.3574 6.2778 39.075 6.34545 38.79 6.33495C37.6445 6.335 36.9209 5.43361 36.9209 4.00734ZM37.8389 4.00734C37.8389 4.96242 38.2891 5.53713 39.042 5.53713C39.791 5.53713 40.2539 4.95413 40.2539 4.01125C40.2539 3.07277 39.7862 2.48146 39.042 2.48146C38.2939 2.48146 37.8389 3.06007 37.8389 4.00734Z",
+p949f00: "M27.0944 15.886C26.2539 15.8892 25.4331 16.1414 24.7358 16.6106C24.0385 17.0799 23.4959 17.7453 23.1764 18.5227C22.857 19.3002 22.7751 20.1548 22.941 20.9788C23.1069 21.8028 23.5133 22.5591 24.1088 23.1523C24.7042 23.7455 25.4621 24.149 26.2867 24.3118C27.1113 24.4746 27.9656 24.3894 28.7419 24.067C29.5181 23.7446 30.1814 23.1995 30.648 22.5004C31.1146 21.8013 31.3637 20.9796 31.3637 20.1391C31.3719 19.5769 31.267 19.0188 31.0552 18.498C30.8434 17.9772 30.5289 17.5044 30.1306 17.1075C29.7323 16.7107 29.2582 16.3981 28.7366 16.1883C28.215 15.9784 27.6565 15.8756 27.0944 15.886V15.886ZM27.0944 22.7168C26.5767 22.7537 26.06 22.6339 25.6114 22.373C25.1628 22.1122 24.8032 21.7223 24.5793 21.2541C24.3554 20.7859 24.2776 20.2612 24.3561 19.7483C24.4346 19.2353 24.6657 18.7578 25.0194 18.3781C25.373 17.9983 25.8328 17.7338 26.3389 17.619C26.845 17.5042 27.3739 17.5444 27.8568 17.7345C28.3397 17.9245 28.7542 18.2555 29.0464 18.6844C29.3385 19.1133 29.4948 19.6202 29.4948 20.1391C29.5105 20.467 29.4604 20.7946 29.3476 21.1028C29.2348 21.411 29.0614 21.6936 28.8377 21.9338C28.614 22.174 28.3446 22.367 28.0452 22.5015C27.7458 22.6359 27.4225 22.7092 27.0944 22.7168V22.7168ZM17.781 15.886C16.9405 15.8892 16.1197 16.1413 15.4224 16.6106C14.7251 17.0799 14.1824 17.7452 13.863 18.5227C13.5435 19.3001 13.4616 20.1548 13.6275 20.9788C13.7934 21.8027 14.1998 22.5591 14.7952 23.1523C15.3907 23.7455 16.1486 24.149 16.9732 24.3118C17.7978 24.4746 18.6521 24.3894 19.4283 24.067C20.2046 23.7447 20.8679 23.1995 21.3345 22.5004C21.8011 21.8013 22.0502 20.9796 22.0502 20.1391C22.0584 19.5769 21.9535 19.0189 21.7417 18.4981C21.5299 17.9773 21.2154 17.5044 20.8171 17.1076C20.4188 16.7108 19.9448 16.3981 19.4232 16.1883C18.9016 15.9784 18.3431 15.8756 17.781 15.886V15.886ZM17.781 22.7168C17.2633 22.7537 16.7466 22.6339 16.298 22.373C15.8494 22.1122 15.4898 21.7223 15.2659 21.2541C15.042 20.7859 14.9642 20.2612 15.0427 19.7483C15.1212 19.2353 15.3523 18.7578 15.706 18.3781C16.0596 17.9983 16.5194 17.7338 17.0255 17.619C17.5316 17.5042 18.0605 17.5444 18.5434 17.7345C19.0263 17.9245 19.4408 18.2555 19.733 18.6844C20.0251 19.1133 20.1814 19.6202 20.1814 20.1391C20.1971 20.467 20.1471 20.7946 20.0342 21.1028C19.9214 21.4111 19.748 21.6936 19.5243 21.9338C19.3007 22.174 19.0312 22.367 18.7318 22.5015C18.4324 22.636 18.1091 22.7092 17.781 22.7168ZM6.70216 17.191V18.9953H11.0199C10.9576 19.8416 10.6113 20.6421 10.0371 21.2669C9.60438 21.7079 9.08405 22.0534 8.50964 22.2809C7.93522 22.5084 7.31949 22.613 6.70216 22.5879C5.44014 22.5708 4.2356 22.0575 3.3492 21.159C2.4628 20.2605 1.96582 19.0492 1.96582 17.787C1.96582 16.5249 2.4628 15.3135 3.3492 14.415C4.2356 13.5165 5.44014 13.0032 6.70216 12.9861C7.91438 12.9703 9.08387 13.4334 9.95657 14.2749L11.2293 13.0022C10.6338 12.4127 9.92668 11.9481 9.1493 11.6354C8.37192 11.3228 7.53994 11.1686 6.70216 11.1817C5.82665 11.169 4.95734 11.3304 4.14478 11.6566C3.33222 11.9829 2.59261 12.4674 1.96898 13.082C1.34534 13.6966 0.850114 14.4291 0.512093 15.2368C0.174071 16.0445 0 16.9114 0 17.787C0 18.6626 0.174071 19.5295 0.512093 20.3372C0.850114 21.1449 1.34534 21.8774 1.96898 22.492C2.59261 23.1067 3.33222 23.5912 4.14478 23.9174C4.95734 24.2436 5.82665 24.4051 6.70216 24.3923C7.55762 24.4278 8.41085 24.281 9.20523 23.9615C9.99961 23.6421 10.717 23.1574 11.3098 22.5396C12.3622 21.3909 12.9231 19.8758 12.8726 18.3187C12.8767 17.9406 12.8443 17.5629 12.7758 17.191H6.70216ZM52.0105 18.5925C51.7549 17.8221 51.2683 17.1491 50.6169 16.6649C49.9655 16.1807 49.1808 15.9088 48.3695 15.886C47.823 15.8894 47.2829 16.0036 46.7818 16.2216C46.2807 16.4397 45.829 16.757 45.4541 17.1546C45.0791 17.5521 44.7887 18.0216 44.6003 18.5346C44.4119 19.0475 44.3295 19.5934 44.3581 20.1391C44.3457 20.6983 44.4463 21.2542 44.6536 21.7737C44.861 22.2931 45.1709 22.7655 45.5649 23.1625C45.9589 23.5595 46.4288 23.873 46.9467 24.0843C47.4646 24.2956 48.0197 24.4004 48.579 24.3923C49.2796 24.3962 49.9703 24.226 50.5889 23.897C51.2075 23.568 51.7347 23.0905 52.1232 22.5074L50.6733 21.5408C50.4561 21.9015 50.1488 22.1996 49.7816 22.4058C49.4145 22.612 49 22.7191 48.579 22.7168C48.1457 22.7334 47.7174 22.6194 47.3497 22.3896C46.9819 22.1598 46.6918 21.8248 46.5168 21.428L52.2039 19.0759L52.0105 18.5925ZM46.2108 20.0103C46.1907 19.7008 46.2326 19.3903 46.334 19.0972C46.4354 18.804 46.5943 18.534 46.8013 18.303C47.0083 18.0719 47.2593 17.8845 47.5396 17.7517C47.82 17.6188 48.124 17.5432 48.4339 17.5293C48.7566 17.5081 49.0783 17.5823 49.3591 17.7428C49.6399 17.9032 49.8672 18.1427 50.0128 18.4315L46.2108 20.0103ZM41.587 24.1345H43.4558V11.6329H41.587V24.1345ZM38.526 16.8365H38.4616C38.1774 16.5278 37.8307 16.2834 37.4445 16.1194C37.0583 15.9555 36.6416 15.8759 36.2222 15.886C35.1255 15.9327 34.0892 16.4012 33.3297 17.1937C32.5702 17.9862 32.1462 19.0415 32.1462 20.1392C32.1462 21.2369 32.5702 22.2921 33.3297 23.0846C34.0892 23.8771 35.1255 24.3456 36.2222 24.3923C36.6432 24.4035 37.0617 24.3229 37.4484 24.1559C37.8352 23.989 38.1809 23.7398 38.4616 23.4257H38.526V24.0379C38.526 25.6651 37.6561 26.535 36.2544 26.535C35.7872 26.5238 35.334 26.3738 34.9524 26.1041C34.5708 25.8344 34.2782 25.4572 34.1118 25.0206L32.4846 25.6973C32.7912 26.444 33.3139 27.0821 33.9855 27.5298C34.6572 27.9776 35.4472 28.2146 36.2544 28.2105C38.4455 28.2105 40.2982 26.9217 40.2982 23.7801V16.1437H38.526V16.8365ZM36.3834 22.7168C35.7374 22.662 35.1356 22.3668 34.697 21.8894C34.2584 21.412 34.015 20.7874 34.015 20.1392C34.015 19.4909 34.2584 18.8663 34.697 18.3889C35.1356 17.9116 35.7374 17.6163 36.3834 17.5615C36.7047 17.5772 37.0196 17.6574 37.3093 17.7974C37.599 17.9374 37.8575 18.1343 38.0695 18.3763C38.2815 18.6184 38.4426 18.9006 38.5431 19.2062C38.6437 19.5119 38.6817 19.8346 38.6549 20.1552C38.68 20.4738 38.6406 20.7943 38.539 21.0973C38.4375 21.4004 38.2758 21.6798 38.0638 21.919C37.8517 22.1581 37.5936 22.352 37.3049 22.4891C37.0161 22.6262 36.7027 22.7036 36.3834 22.7168V22.7168ZM60.7644 11.6331H56.2932V24.1345H58.1589V19.3981H60.7644C61.2921 19.427 61.8202 19.3481 62.3164 19.166C62.8126 18.984 63.2665 18.7027 63.6504 18.3393C64.0342 17.976 64.3399 17.5382 64.5489 17.0527C64.7578 16.5672 64.8655 16.0442 64.8655 15.5156C64.8655 14.9871 64.7578 14.4641 64.5489 13.9786C64.3399 13.4931 64.0342 13.0553 63.6504 12.6919C63.2665 12.3285 62.8126 12.0472 62.3164 11.8652C61.8202 11.6832 61.2921 11.6042 60.7644 11.6331V11.6331ZM60.8126 17.6583H58.1589V13.373H60.8126C61.0977 13.3671 61.3811 13.4182 61.6462 13.5232C61.9114 13.6282 62.1529 13.7851 62.3566 13.9846C62.5603 14.1842 62.7222 14.4224 62.8327 14.6853C62.9432 14.9482 63.0001 15.2305 63.0001 15.5157C63.0001 15.8008 62.9432 16.0831 62.8327 16.346C62.7222 16.6089 62.5603 16.8471 62.3566 17.0467C62.1529 17.2462 61.9114 17.4031 61.6462 17.5081C61.3811 17.6132 61.0977 17.6642 60.8126 17.6583V17.6583ZM72.3443 15.863C71.6632 15.8233 70.9854 15.9832 70.394 16.3232C69.8026 16.6632 69.3233 17.1684 69.015 17.7769L70.6716 18.4685C70.8358 18.1665 71.0846 17.9189 71.3873 17.7561C71.6901 17.5932 72.0338 17.5222 72.3764 17.5517C72.8497 17.5055 73.322 17.6489 73.6899 17.9503C74.0577 18.2518 74.291 18.6868 74.3386 19.16V19.2887C73.7394 18.9704 73.071 18.8047 72.3925 18.8062C70.6073 18.8062 68.7899 19.7873 68.7899 21.6208C68.8072 22.0072 68.902 22.3862 69.0686 22.7353C69.2352 23.0844 69.4702 23.3964 69.7597 23.6529C70.0493 23.9094 70.3873 24.1052 70.7539 24.2285C71.1205 24.3519 71.5082 24.4003 71.8939 24.371C72.3637 24.3987 72.8323 24.2999 73.251 24.0849C73.6696 23.8699 74.023 23.5466 74.2743 23.1487H74.3386V24.1137H76.1399V19.3209C76.1399 17.1014 74.4833 15.863 72.3443 15.863V15.863ZM72.1191 22.7144C71.5079 22.7144 70.6555 22.4089 70.6555 21.6529C70.6555 20.688 71.717 20.318 72.6338 20.318C73.2292 20.3022 73.818 20.4466 74.3386 20.7362C74.27 21.2785 74.0075 21.7775 73.5995 22.1412C73.1915 22.5049 72.6656 22.7085 72.1191 22.7144V22.7144ZM82.7019 16.1364L80.5628 21.5564H80.4984L78.279 16.1364H76.2686L79.5978 23.7116L77.7 27.9254H79.646L84.7766 16.1364H82.7019ZM65.8949 24.1345H67.7605V11.6331H65.8949V24.1345Z",
+pa6cfb80: "M3.39891 0.293999C3.78853 0.26604 4.17949 0.3249 4.5436 0.466333C4.90771 0.607766 5.2359 0.828247 5.50449 1.11187C5.77307 1.3955 5.97536 1.7352 6.09676 2.10647C6.21817 2.47774 6.25566 2.87132 6.20653 3.25884C6.20653 5.16509 5.17626 6.26084 3.39891 6.26084H1.24364V0.293999H3.39891ZM2.17039 5.417H3.29539C3.5738 5.43364 3.85241 5.38799 4.11095 5.28338C4.36949 5.17876 4.60145 5.01782 4.78994 4.81225C4.97844 4.60669 5.11872 4.36168 5.20058 4.09506C5.28244 3.82844 5.30382 3.54692 5.26316 3.271C5.30087 2.99617 5.27732 2.71639 5.19421 2.45173C5.11109 2.18707 4.97046 1.94406 4.78239 1.74013C4.59433 1.5362 4.36349 1.37639 4.10641 1.27216C3.84933 1.16792 3.57238 1.12184 3.29539 1.13721H2.17039V5.417Z",
+pd6ee900: "M10.7566 1.72057e-06H124.249C124.655 1.72057e-06 125.067 -0.000128279 125.472 0.00187172C125.753 0.00346346 126.039 0.00766047 126.322 0.0118031C126.386 0.0127355 126.449 0.0136652 126.512 0.0145617C127.269 0.0220095 128.023 0.0811045 128.769 0.191322C129.518 0.304242 130.243 0.515569 130.921 0.818322C132.278 1.43603 133.383 2.4152 134.079 3.61812C134.419 4.2175 134.655 4.85928 134.777 5.52144C134.903 6.18324 134.973 6.85242 134.987 7.52344C134.991 7.83008 134.991 8.1377 134.991 8.44434C135 8.80664 135 9.16992 135 9.53613V30.4648C135 30.834 135 31.1953 134.991 31.5586C134.991 31.8691 134.991 32.1699 134.987 32.4805C134.973 33.1515 134.903 33.8206 134.777 34.4824C134.655 35.1449 134.42 35.7871 134.079 36.3867C133.733 36.9835 133.283 37.5282 132.746 38.001C132.213 38.4778 131.597 38.8758 130.921 39.1797C130.243 39.4833 129.518 39.6958 128.769 39.8105C128.023 39.9198 127.268 39.9789 126.512 39.9873C126.169 39.9941 125.816 39.998 125.472 39.998C125.067 40 124.655 40 124.249 40H10.7566C10.343 40 9.93419 40 9.5216 39.998C9.17621 39.998 8.83358 39.9941 8.48488 39.9873C7.72738 39.9785 6.9717 39.9194 6.22416 39.8105C5.47772 39.6966 4.75481 39.484 4.07967 39.1797C3.40371 38.876 2.78717 38.478 2.25357 38.001C1.71505 37.5301 1.26616 36.9849 0.924356 36.3867C0.581124 35.7875 0.343339 35.1453 0.219258 34.4824C0.0936522 33.8207 0.0260614 33.1514 0.0170916 32.4805C0.00993901 32.2683 0.00715699 32.0607 0.00435296 31.8514C0.0030527 31.7544 0.00174771 31.657 0 31.5586V8.44434C0.00176842 8.34604 0.00308357 8.24765 0.00439918 8.14922C0.0071877 7.94059 0.00997831 7.7318 0.0170916 7.52348C0.0260586 6.85252 0.0936495 6.18319 0.219258 5.52148C0.343683 4.85894 0.581453 4.21711 0.924356 3.61816C1.26632 3.01802 1.71514 2.47064 2.25357 1.99707C2.7892 1.52217 3.40534 1.12447 4.07967 0.818412C4.75482 0.514917 5.4778 0.303534 6.22416 0.191412C6.97157 0.081678 7.72733 0.0226035 8.48488 0.0147017C8.55727 0.0136865 8.6294 0.0126317 8.70135 0.0115795C8.97596 0.00756356 9.24792 0.00358651 9.5216 0.00200172C9.9342 1.72062e-06 10.3429 1.72057e-06 10.7566 1.72057e-06ZM8.40804 39.1173C8.74966 39.1241 9.08566 39.128 9.42998 39.128L124.35 39.13L125.576 39.128C125.912 39.128 126.259 39.1241 126.59 39.1173C127.297 39.1097 128.004 39.0551 128.702 38.9542C129.358 38.8557 129.993 38.6703 130.587 38.4043C131.173 38.1407 131.707 37.7954 132.169 37.3815C132.631 36.9758 133.018 36.5081 133.316 35.9956C133.615 35.4698 133.821 34.9064 133.927 34.3252C134.042 33.7122 134.106 33.0926 134.12 32.4713C134.124 32.1646 134.124 31.8667 134.124 31.5414C134.133 31.1839 134.133 30.8294 134.133 30.466V9.53295C134.133 9.17301 134.133 8.81601 134.124 8.44093C134.124 8.13813 134.124 7.83386 134.121 7.55061C134.107 6.91801 134.042 6.28713 133.924 5.663C133.818 5.0894 133.614 4.53335 133.32 4.01374C132.718 2.97461 131.763 2.12826 130.59 1.5933C129.995 1.32872 129.359 1.14404 128.702 1.04533C128.008 0.944474 127.306 0.890111 126.602 0.882711L125.57 0.870008H9.43053L8.41082 0.882221C7.70067 0.890008 6.99218 0.94486 6.29129 1.04631C5.6412 1.1438 5.01136 1.3272 4.42286 1.59037C3.83742 1.85582 3.30266 2.20091 2.83807 2.61305C2.37296 3.02132 1.98554 3.4935 1.69085 4.01129C1.39165 4.53452 1.18454 5.09514 1.07668 5.67374C0.960772 6.2928 0.898236 6.91875 0.889618 7.5462C0.883007 7.74938 0.873016 8.44093 0.873016 8.44093V31.5463C0.873016 31.5463 0.882396 32.2487 0.889561 32.4596C0.898562 33.0881 0.961463 33.715 1.07772 34.335C1.18538 34.912 1.39233 35.471 1.69137 35.9925C1.98715 36.5107 2.37673 36.9825 2.84466 37.3893C3.30591 37.801 3.83897 38.1443 4.42342 38.4062C5.01327 38.6702 5.6443 38.8549 6.29571 38.9542C6.9943 39.0546 7.70034 39.1091 8.40804 39.1173Z",
+pd9336c0: "M26.7905 4.00734C26.7622 3.7114 26.7961 3.41282 26.89 3.13074C26.9838 2.84866 27.1356 2.58931 27.3356 2.36932C27.5355 2.14933 27.7793 1.97356 28.0511 1.85329C28.323 1.73301 28.617 1.67088 28.9143 1.67088C29.2116 1.67088 29.5056 1.73301 29.7775 1.85329C30.0493 1.97356 30.2931 2.14933 30.493 2.36932C30.693 2.58931 30.8448 2.84866 30.9386 3.13074C31.0325 3.41282 31.0664 3.7114 31.0381 4.00734C31.0669 4.30357 31.0334 4.60256 30.9398 4.88508C30.8462 5.16761 30.6945 5.42742 30.4944 5.64783C30.2944 5.86823 30.0505 6.04436 29.7784 6.16489C29.5063 6.28542 29.2119 6.34768 28.9143 6.34768C28.6167 6.34768 28.3223 6.28542 28.0502 6.16489C27.778 6.04436 27.5341 5.86823 27.3341 5.64783C27.1341 5.42742 26.9824 5.16761 26.8888 4.88508C26.7952 4.60256 26.7617 4.30357 26.7905 4.00734ZM30.1235 4.00734C30.1235 3.03127 29.685 2.46047 28.9155 2.46047C28.143 2.46047 27.7085 3.03127 27.7085 4.00735C27.7085 4.99124 28.1431 5.55764 28.9155 5.55764C29.685 5.55763 30.1235 4.98732 30.1235 4.00734Z",
+pe0e8600: "M40.6644 6.40648C40.5816 6.15855 40.4218 5.94022 40.2062 5.78011C39.9905 5.62 39.729 5.52559 39.456 5.50926L34.5393 5.18657L32.7184 0.818518C32.6189 0.578003 32.4459 0.371406 32.2215 0.225473C31.9972 0.0795413 31.732 0.000993936 31.4602 0V0C31.1884 0.000993936 30.9232 0.0795413 30.6989 0.225473C30.4746 0.371406 30.3015 0.578003 30.2021 0.818518L28.348 5.21018L23.4645 5.50926C23.1917 5.52665 22.9308 5.62145 22.7153 5.78141C22.4999 5.94137 22.3399 6.15911 22.256 6.40648C22.1699 6.65764 22.1648 6.92758 22.2416 7.18149C22.3183 7.43539 22.4732 7.66163 22.6864 7.83102L26.4443 10.8532L25.3268 15.0324C25.2495 15.3151 25.2634 15.6134 25.3668 15.8885C25.4701 16.1636 25.6581 16.4028 25.9062 16.575C26.1471 16.7394 26.4341 16.8317 26.7305 16.8401C27.0269 16.8485 27.3192 16.7727 27.57 16.6222L31.452 14.2847H31.4685L35.6485 16.7954C35.8629 16.9279 36.1129 16.9989 36.3686 17C36.5774 16.9984 36.783 16.9514 36.9697 16.8624C37.1564 16.7735 37.3191 16.645 37.4454 16.4869C37.5717 16.3288 37.6582 16.1453 37.6982 15.9505C37.7383 15.7556 37.7308 15.5546 37.6764 15.363L36.4928 10.7903L40.234 7.83102C40.4472 7.66163 40.6022 7.43539 40.6789 7.18149C40.7556 6.92758 40.7506 6.65764 40.6644 6.40648Z",
+pe79f480: "M2 10.6667V2.66667C2 1.93029 2.59695 1.33333 3.33333 1.33333H10M6 14.6667H12C12.7364 14.6667 13.3333 14.0697 13.3333 13.3333V5.33333C13.3333 4.59695 12.7364 4 12 4H6C5.26362 4 4.66667 4.59695 4.66667 5.33333V13.3333C4.66667 14.0697 5.26362 14.6667 6 14.6667Z",
+pe943800: "M16.8946 22V16.7982H18.6636L18.9284 14.576H16.8945V13.1573C16.8945 12.514 17.0597 12.0755 17.9124 12.0755L19 12.075V10.0876C18.8119 10.0605 18.1662 10 17.4152 10C15.8471 10 14.7735 11.0355 14.7735 12.9373V14.576H13V16.7982H14.7735V21.9999L16.8946 22Z",
+}
diff --git a/src/imports/svg-haxfz4hsaa.ts b/src/imports/svg-haxfz4hsaa.ts
new file mode 100644
index 0000000..a744d4f
--- /dev/null
+++ b/src/imports/svg-haxfz4hsaa.ts
@@ -0,0 +1,9 @@
+export default {
+p1347bee0: "M0.221846 0.740788C0.605791 0.740788 0.893711 0.276899 0.893711 0.276899C0.893711 0.276899 1.18163 0.740788 1.56558 0.740788C1.94952 0.740788 2.33331 0.276899 2.33331 0.276899C2.33331 0.276899 2.71726 0.740788 3.00518 0.740788M0.221846 1.82319C0.605791 1.82319 0.893711 1.35931 0.893711 1.35931C0.893711 1.35931 1.18163 1.82319 1.56558 1.82319C1.94952 1.82319 2.33331 1.35931 2.33331 1.35931C2.33331 1.35931 2.71726 1.82319 3.00518 1.82319",
+p1a313240: "M41.455 81.91C63.7977 81.91 81.91 63.7977 81.91 41.455C81.91 19.1123 63.7977 1 41.455 1C19.1123 1 1 19.1123 1 41.455C1 63.7977 19.1123 81.91 41.455 81.91Z",
+p285ae700: "M45.2798 63.8439H47.511V61.9498C46.1741 61.8928 45.1039 60.7877 45.1039 59.4367C45.1039 58.0858 46.1747 56.9806 47.511 56.9236V54.2321C46.1741 54.1757 45.1039 53.0705 45.1039 51.7196C45.1039 50.3686 46.1747 49.2634 47.511 49.2071V46.5156C46.1741 46.4592 45.1039 45.354 45.1039 44.003C45.1039 42.6521 46.1747 41.5469 47.511 41.4905V38.799C46.1741 38.7426 45.1039 37.6369 45.1039 36.2859C45.1039 34.9349 46.1747 33.8298 47.511 33.7734V31.0825C46.1741 31.0261 45.1039 29.9203 45.1039 28.5694C45.1039 27.219 46.1747 26.1132 47.511 26.0568V23.3666C46.1741 23.3102 45.1039 22.2044 45.1039 20.8541C45.1039 19.5031 46.1747 18.3979 47.511 18.3415V15.6494C46.1741 15.593 45.1039 14.4873 45.1039 13.1369C45.1039 11.786 46.1747 10.6808 47.511 10.6238V7.93229C46.1741 7.8759 45.1039 6.77073 45.1039 5.41978C45.1039 4.06882 46.1747 2.96365 47.511 2.90665V0H45.2915C45.2081 1.31112 44.114 2.35253 42.782 2.35253C41.4495 2.35253 40.3559 1.31112 40.2726 0H37.5756C37.4922 1.31112 36.3981 2.35253 35.0655 2.35253C33.7342 2.35253 32.64 1.31112 32.5561 0H29.859C29.7757 1.31112 28.6815 2.35253 27.3496 2.35253C26.0176 2.35253 24.9235 1.31112 24.8401 0H22.1425C22.0585 1.31112 20.965 2.35253 19.633 2.35253C18.3005 2.35253 17.2063 1.31112 17.123 0H14.426C14.3426 1.31112 13.2485 2.35253 11.9159 2.35253C10.5839 2.35253 9.48982 1.31112 9.40646 0H6.70821C6.62485 1.31112 5.53072 2.35253 4.19877 2.35253C2.8662 2.35253 1.77268 1.31112 1.68932 0H0V2.91707C1.27863 3.04027 2.2753 4.1154 2.2753 5.41978C2.2753 6.72599 1.27495 7.80234 0 7.9231V10.6336C1.27863 10.7574 2.2753 11.8325 2.2753 13.1363C2.2753 14.4425 1.27495 15.5189 0 15.6396V18.3501C1.27863 18.4739 2.2753 19.5485 2.2753 20.8528C2.2753 22.159 1.27495 23.2354 0 23.3562V26.0667C1.27863 26.1905 2.2753 27.265 2.2753 28.5688C2.2753 29.875 1.27495 30.9513 0 31.0721V33.7832C1.27863 33.9064 2.2753 34.9815 2.2753 36.2853C2.2753 37.5915 1.27495 38.6679 0 38.7892V41.5003C1.27863 41.6235 2.2753 42.6987 2.2753 44.0024C2.2753 45.3086 1.27495 46.385 0 46.5057V49.2169C1.27863 49.3407 2.2753 50.4152 2.2753 51.719C2.2753 53.0252 1.27495 54.1015 0 54.2223V56.9334C1.27863 57.0572 2.2753 58.1317 2.2753 59.4361C2.2753 60.7423 1.27495 61.8187 0 61.9394V63.8427H1.70095C1.83703 62.5849 2.91095 61.5992 4.19938 61.5992C5.48782 61.5992 6.5611 62.5849 6.69718 63.8427H9.41811C9.55419 62.5849 10.6269 61.5992 11.9159 61.5992C13.2043 61.5992 14.2776 62.5849 14.4143 63.8427H17.1346C17.2713 62.5849 18.3446 61.5992 19.633 61.5992C20.9215 61.5992 21.9942 62.5849 22.1309 63.8427H24.8518C24.9885 62.5849 26.0611 61.5992 27.3496 61.5992C28.638 61.5992 29.7113 62.5849 29.8474 63.8427H32.5677C32.7044 62.5849 33.7771 61.5992 35.0655 61.5992C36.3546 61.5992 37.4278 62.5849 37.5639 63.8427H40.2842C40.4203 62.5849 41.4942 61.5992 42.7826 61.5992C44.0705 61.6005 45.1438 62.5861 45.2798 63.8439Z",
+p33bc9700: "M40.7691 6.18944H6.74134V57.6552H40.7691V6.18944Z",
+p3794ff00: "M2.69689 0.898964H0V0.299655L2.69689 0V0.898964Z",
+p80f500: "M3.3484 7.79161H1.44272C1.44272 7.79161 1.4908 7.50011 1.8355 7.50011C1.94246 7.50011 2.0217 7.41074 2.06801 7.33906C1.57439 4.55522 3.5601 2.1744 3.5601 2.1744C3.5493 2.18119 3.24679 2.18408 3.03042 2.37663C3.0194 2.36395 2.82696 2.27068 2.74939 2.28036C2.74939 2.28036 2.8786 2.36706 2.90443 2.42805C2.90443 2.42805 2.66213 2.4955 2.4619 2.63351C2.4619 2.63351 2.30363 2.54047 2.20991 2.56607C2.20991 2.56607 2.33591 2.64954 2.35527 2.68805C2.35527 2.68805 2.04519 2.83575 1.86755 3.05401C1.86755 3.05401 1.86043 2.42638 2.394 2.1488C2.80748 1.93377 3.48252 2.03004 3.48252 2.03004C3.48252 2.03004 3.22085 1.84707 2.90754 1.85998C2.90754 1.85998 2.8559 1.71874 2.71054 1.69303C2.71054 1.69303 2.74927 1.76359 2.76218 1.85352C2.76218 1.85352 2.57809 1.83104 2.30997 1.89849C2.30997 1.89849 2.20012 1.77973 2.12265 1.77005C2.12265 1.77005 2.1517 1.84061 2.18075 1.91774C2.18075 1.91774 1.71886 2.03004 1.49603 2.17451C1.49603 2.17451 1.8158 1.33676 2.64588 1.42346C3.3149 1.49336 3.57935 1.89526 3.57935 1.89526C3.57935 1.89526 3.4311 1.49302 3.26927 1.4042C3.2725 1.37527 3.29832 1.21477 3.21763 1.13775C3.21763 1.13775 3.19503 1.28222 3.16921 1.31427C3.16921 1.31427 2.94961 1.1185 2.81394 1.08633C2.81394 1.08633 2.81717 0.938635 2.74939 0.893781C2.74939 0.893781 2.7397 1.05428 2.71711 1.06708C2.71711 1.06708 2.51365 0.906581 2.09372 0.945091C2.09372 0.945091 2.46835 0.608074 2.86892 0.710804C3.26938 0.813534 3.57301 1.1441 3.72805 1.72508C3.72805 1.72508 3.82822 1.31438 3.699 1.02211C3.699 1.02211 3.7798 0.890554 3.75387 0.81665C3.75387 0.81665 3.69254 0.903353 3.64079 0.896898C3.64079 0.896898 3.54062 0.61119 3.48575 0.537398C3.48575 0.537398 3.54707 0.383359 3.51157 0.312683C3.51157 0.312683 3.45993 0.441123 3.42431 0.441123C3.42431 0.441123 3.37589 0.242119 3.111 0.00783182C3.111 0.00783182 3.66706 -0.0925609 3.91525 0.454034C4.19952 1.07999 4.00574 1.51005 3.95399 1.75725C3.95399 1.75725 4.43736 1.16502 5.09737 1.36569C5.64642 1.53264 5.66267 2.24519 5.66267 2.24519C5.66267 2.24519 5.52699 2.04941 5.30417 1.94345C5.30417 1.94345 5.27835 1.72519 5.16527 1.64495C5.16527 1.64495 5.21691 1.7509 5.16204 1.85998C5.16204 1.85998 4.98763 1.71874 4.79709 1.73477C4.79709 1.73477 4.74544 1.65129 4.60977 1.58707C4.60977 1.58707 4.65028 1.65418 4.6554 1.72887C4.6554 1.72887 4.19662 1.73376 3.95043 1.96816C3.95043 1.96816 4.81901 1.96015 5.09415 2.28359C5.35904 2.59489 5.31051 3.09563 5.25564 3.36209C5.25564 3.36209 5.14579 3.11812 5.01334 2.97365C5.01334 2.97365 5.02948 2.74893 4.96493 2.66234C4.96493 2.66234 4.9617 2.83564 4.9036 2.86457C4.9036 2.86457 4.85752 2.6432 4.68078 2.50507C4.68078 2.50507 4.7066 2.41837 4.65818 2.29327C4.65818 2.29327 4.62613 2.40056 4.59062 2.4423C4.59062 2.4423 4.25884 2.17674 3.89344 2.15103C3.89344 2.15103 4.37815 2.49895 4.45473 2.855C4.52841 3.19736 4.59686 3.6863 4.19629 4.17102C4.19629 4.17102 4.1866 3.79549 4.12205 3.67028C4.12205 3.67028 4.22545 3.53549 4.23513 3.38134C4.23513 3.38134 4.16412 3.45513 4.10268 3.49053C4.10268 3.49053 4.08009 3.1278 4.05104 3.07326C4.05104 3.07326 4.17703 2.93848 4.13507 2.83252C4.13507 2.83252 4.11248 2.90954 4.02845 2.94805C4.02845 2.94805 3.98003 2.56607 3.72482 2.26433C3.72482 2.26433 1.94402 4.3708 2.57709 7.36911C2.95741 7.7314 2.89229 7.24635 3.3484 7.79161Z",
+pefd30f0: "M28.1 55.2C43.0669 55.2 55.2 43.0669 55.2 28.1C55.2 13.1331 43.0669 1 28.1 1C13.1331 1 1 13.1331 1 28.1C1 43.0669 13.1331 55.2 28.1 55.2Z",
+}
diff --git a/src/imports/svg-k72gxajo7j.ts b/src/imports/svg-k72gxajo7j.ts
new file mode 100644
index 0000000..aae1ed4
--- /dev/null
+++ b/src/imports/svg-k72gxajo7j.ts
@@ -0,0 +1,9 @@
+export default {
+p1a0ff300: "M0.700391 1.62325L1.6575 0.667047L6.87063 5.87837C6.95466 5.96188 7.02135 6.06118 7.06686 6.17055C7.11237 6.27993 7.1358 6.39723 7.1358 6.51569C7.1358 6.63416 7.11237 6.75146 7.06686 6.86084C7.02135 6.97021 6.95466 7.06951 6.87063 7.15302L1.6575 12.367L0.701293 11.4108L5.59418 6.51705L0.700391 1.62325Z",
+p268fe000: "M18.999 7H15.999V6C15.999 4.93913 15.5776 3.92172 14.8275 3.17157C14.0773 2.42143 13.0599 2 11.999 2C10.9382 2 9.92074 2.42143 9.1706 3.17157C8.42045 3.92172 7.99902 4.93913 7.99902 6V7H4.99902C4.73381 7 4.47945 7.10536 4.29192 7.29289C4.10438 7.48043 3.99902 7.73478 3.99902 8V19C3.99902 19.7956 4.31509 20.5587 4.8777 21.1213C5.44031 21.6839 6.20337 22 6.99902 22H16.999C17.7947 22 18.5577 21.6839 19.1203 21.1213C19.683 20.5587 19.999 19.7956 19.999 19V8C19.999 7.73478 19.8937 7.48043 19.7061 7.29289C19.5186 7.10536 19.2642 7 18.999 7ZM9.99902 6C9.99902 5.46957 10.2097 4.96086 10.5848 4.58579C10.9599 4.21071 11.4686 4 11.999 4C12.5295 4 13.0382 4.21071 13.4132 4.58579C13.7883 4.96086 13.999 5.46957 13.999 6V7H9.99902V6ZM17.999 19C17.999 19.2652 17.8937 19.5196 17.7061 19.7071C17.5186 19.8946 17.2642 20 16.999 20H6.99902C6.73381 20 6.47945 19.8946 6.29192 19.7071C6.10438 19.5196 5.99902 19.2652 5.99902 19V9H7.99902V10C7.99902 10.2652 8.10438 10.5196 8.29192 10.7071C8.47945 10.8946 8.73381 11 8.99902 11C9.26424 11 9.51859 10.8946 9.70613 10.7071C9.89367 10.5196 9.99902 10.2652 9.99902 10V9H13.999V10C13.999 10.2652 14.1044 10.5196 14.2919 10.7071C14.4795 10.8946 14.7338 11 14.999 11C15.2642 11 15.5186 10.8946 15.7061 10.7071C15.8937 10.5196 15.999 10.2652 15.999 10V9H17.999V19Z",
+p2d96d520: "M0.539921 1.24922L1.27616 0.513672L5.28626 4.52238C5.3509 4.58662 5.4022 4.663 5.43721 4.74714C5.47221 4.83127 5.49023 4.9215 5.49023 5.01263C5.49023 5.10376 5.47221 5.19399 5.43721 5.27812C5.4022 5.36226 5.3509 5.43864 5.28626 5.50288L1.27616 9.51367L0.540615 8.77813L4.30438 5.01367L0.539921 1.24922Z",
+p2e6ec460: "M0.726562 2.42193C1.98427 2.42193 2.92743 0.902344 2.92743 0.902344C2.92743 0.902344 3.87058 2.42193 5.12829 2.42193C6.386 2.42193 7.64321 0.902344 7.64321 0.902344C7.64321 0.902344 8.90092 2.42193 9.84407 2.42193M0.726562 5.96763C1.98427 5.96763 2.92743 4.44804 2.92743 4.44804C2.92743 4.44804 3.87058 5.96763 5.12829 5.96763C6.386 5.96763 7.64321 4.44804 7.64321 4.44804C7.64321 4.44804 8.90092 5.96763 9.84407 5.96763",
+p5f6c800: "M-7.29869 1.62339L-6.34158 0.667187L-1.12845 5.87851C-1.04442 5.96202 -0.977726 6.06131 -0.932218 6.17069C-0.886709 6.28007 -0.863281 6.39737 -0.863281 6.51583C-0.863281 6.6343 -0.886709 6.7516 -0.932218 6.86098C-0.977726 6.97035 -1.04442 7.06965 -1.12845 7.15315L-6.34158 12.3672L-7.29779 11.411L-2.40489 6.51719L-7.29869 1.62339Z",
+pa2b3d80: "M8.83436 2.94479H0V0.981595L8.83436 0V2.94479Z",
+pd3b5ac0: "M10.9688 25.5215H4.7263C4.7263 25.5215 4.8838 24.5666 6.01295 24.5666C6.36332 24.5666 6.62291 24.2738 6.77458 24.039C5.15762 14.9199 11.6623 7.12088 11.6623 7.12088C11.6269 7.14312 10.636 7.1526 9.92721 7.78335C9.89111 7.74178 9.26073 7.43626 9.00661 7.46797C9.00661 7.46797 9.4299 7.75199 9.51449 7.95179C9.51449 7.95179 8.72077 8.17273 8.06487 8.62482C8.06487 8.62482 7.54642 8.32003 7.23943 8.40388C7.23943 8.40388 7.65215 8.67733 7.71559 8.80347C7.71559 8.80347 6.69984 9.28729 6.11795 10.0023C6.11795 10.0023 6.09462 7.94632 7.84247 7.03703C9.19693 6.33263 11.4082 6.64801 11.4082 6.64801C11.4082 6.64801 10.551 6.04862 9.5247 6.09091C9.5247 6.09091 9.35553 5.62824 8.87937 5.54402C8.87937 5.54402 9.00625 5.77517 9.04854 6.06976C9.04854 6.06976 8.4455 5.99612 7.5672 6.21706C7.5672 6.21706 7.20735 5.82804 6.95359 5.79632C6.95359 5.79632 7.04875 6.02747 7.14391 6.28013C7.14391 6.28013 5.63085 6.64801 4.90094 7.12125C4.90094 7.12125 5.94841 4.37696 8.66754 4.66098C10.8591 4.88994 11.7254 6.20649 11.7254 6.20649C11.7254 6.20649 11.2397 4.88885 10.7096 4.59791C10.7202 4.50311 10.8048 3.97737 10.5404 3.72507C10.5404 3.72507 10.4664 4.19831 10.3819 4.30332C10.3819 4.30332 9.66251 3.662 9.21807 3.55663C9.21807 3.55663 9.22865 3.07282 9.00661 2.92589C9.00661 2.92589 8.97489 3.45163 8.90088 3.49356C8.90088 3.49356 8.2344 2.96782 6.8588 3.09396C6.8588 3.09396 8.08602 1.98998 9.39818 2.3265C10.71 2.66302 11.7046 3.74585 12.2125 5.64902C12.2125 5.64902 12.5406 4.30368 12.1173 3.34626C12.1173 3.34626 12.382 2.91531 12.2971 2.67323C12.2971 2.67323 12.0962 2.95724 11.9266 2.9361C11.9266 2.9361 11.5985 2.00019 11.4188 1.75846C11.4188 1.75846 11.6196 1.25387 11.5033 1.02235C11.5033 1.02235 11.3342 1.44309 11.2175 1.44309C11.2175 1.44309 11.0589 0.791201 10.1912 0.0237353C10.1912 0.0237353 12.0127 -0.305127 12.8257 1.48538C13.7569 3.53585 13.1221 4.94463 12.9526 5.75439C12.9526 5.75439 14.536 3.8144 16.698 4.47176C18.4966 5.01864 18.5498 7.35276 18.5498 7.35276C18.5498 7.35276 18.1054 6.71145 17.3755 6.36435C17.3755 6.36435 17.2909 5.64939 16.9204 5.38652C16.9204 5.38652 17.0896 5.73361 16.9099 6.09091C16.9099 6.09091 16.3386 5.62824 15.7144 5.68074C15.7144 5.68074 15.5452 5.4073 15.1008 5.19693C15.1008 5.19693 15.2335 5.41678 15.2502 5.66142C15.2502 5.66142 13.7474 5.67746 12.9409 6.44529C12.9409 6.44529 15.7862 6.41904 16.6875 7.47855C17.5552 8.49831 17.3962 10.1386 17.2165 11.0114C17.2165 11.0114 16.8566 10.2123 16.4228 9.73902C16.4228 9.73902 16.4756 9.00291 16.2642 8.71925C16.2642 8.71925 16.2536 9.28692 16.0633 9.38172C16.0633 9.38172 15.9123 8.65654 15.3334 8.20408C15.3334 8.20408 15.418 7.92007 15.2594 7.51027C15.2594 7.51027 15.1544 7.86173 15.0381 7.99846C15.0381 7.99846 13.9512 7.12854 12.7543 7.04432C12.7543 7.04432 14.342 8.18403 14.5929 9.35036C14.8342 10.4718 15.0585 12.0735 13.7463 13.6613C13.7463 13.6613 13.7146 12.4312 13.5031 12.021C13.5031 12.021 13.8418 11.5795 13.8735 11.0745C13.8735 11.0745 13.6409 11.3162 13.4397 11.4322C13.4397 11.4322 13.3657 10.244 13.2705 10.0653C13.2705 10.0653 13.6832 9.62381 13.5458 9.27671C13.5458 9.27671 13.4718 9.52901 13.1965 9.65516C13.1965 9.65516 13.0379 8.40388 12.2019 7.41547C12.2019 7.41547 6.36842 14.3157 8.44222 24.1375C9.68803 25.3242 9.47475 23.7353 10.9688 25.5215Z",
+}
diff --git a/src/imports/svg-lkr1u58vid.ts b/src/imports/svg-lkr1u58vid.ts
new file mode 100644
index 0000000..fcd7286
--- /dev/null
+++ b/src/imports/svg-lkr1u58vid.ts
@@ -0,0 +1,25 @@
+export default {
+p101cc600: "M26.2389 25.7194C30.8781 20.7933 30.6455 13.0391 25.7194 8.39996C20.7933 3.76078 13.0392 3.99336 8.39998 8.91944C3.7608 13.8455 3.99336 21.5997 8.91944 26.2389C13.8455 30.878 21.5997 30.6455 26.2389 25.7194Z",
+p12274f80: "M13.2234 32.6693C13.8274 32.6693 21.4395 32.6693 21.4395 32.6693L17.3315 36.8983L13.2234 32.6693Z",
+p1588bc00: "M23.6157 17.3257C23.6157 20.7957 20.8027 23.6087 17.3327 23.6087C13.8627 23.6087 11.0497 20.7957 11.0497 17.3257C11.0497 13.8557 13.8627 11.0427 17.3327 11.0427C20.8027 11.0437 23.6157 13.8567 23.6157 17.3257Z",
+p173a1880: "M25.9902 25.9902C30.7748 21.2055 30.7748 13.448 25.9902 8.66338C21.2055 3.87872 13.4481 3.87872 8.6634 8.66338C3.87874 13.448 3.87872 21.2055 8.66338 25.9902C13.448 30.7748 21.2055 30.7748 25.9902 25.9902Z",
+p19123700: "M26.6726 17.5816C28.2357 10.9977 24.1655 4.39329 17.5816 2.83021C10.9977 1.26712 4.3933 5.33731 2.83022 11.9212C1.26713 18.5051 5.33729 25.1095 11.9212 26.6726C18.5051 28.2357 25.1095 24.1655 26.6726 17.5816Z",
+p1d740f00: "M26.5464 17.1749C27.983 10.5626 23.7872 4.03765 17.1749 2.6011C10.5625 1.16455 4.03765 5.36035 2.6011 11.9727C1.16455 18.585 5.36034 25.1099 11.9727 26.5464C18.585 27.983 25.1099 23.7872 26.5464 17.1749Z",
+p1d788c80: "M10.6129 30.1035C11.2169 30.1035 18.8289 30.1035 18.8289 30.1035L14.7209 34.3325L10.6129 30.1035Z",
+p233d5780: "M21.0072 14.7084C21.0072 18.1784 18.1942 20.9914 14.7242 20.9914C11.2542 20.9914 8.44116 18.1784 8.44116 14.7084C8.44116 11.2384 11.2542 8.4254 14.7242 8.4254C18.1942 8.4254 21.0072 11.2384 21.0072 14.7084Z",
+p248aac00: "M23.6135 17.3253C23.6135 20.7953 20.8004 23.6083 17.3304 23.6083C13.8604 23.6083 11.0475 20.7953 11.0475 17.3253C11.0475 13.8553 13.8604 11.0423 17.3304 11.0423C20.8004 11.0423 23.6135 13.8553 23.6135 17.3253Z",
+p2652ee80: "M23.5939 17.3169C23.5939 20.7869 20.7809 23.5999 17.3109 23.5999C13.8409 23.5999 11.0279 20.7869 11.0279 17.3169C11.0279 13.8469 13.8409 11.0339 17.3109 11.0339C20.7809 11.0339 23.5939 13.8469 23.5939 17.3169Z",
+p2721ce40: "M10.4736 29.9224C11.0776 29.9224 18.6896 29.9224 18.6896 29.9224L14.5816 34.1514L10.4736 29.9224Z",
+p28e1e680: "M249.213 61.9424V159.243H157.654",
+p2c6e5280: "M13.2247 32.6707C13.8287 32.6707 21.4407 32.6707 21.4407 32.6707L17.3327 36.8997L13.2247 32.6707Z",
+p2c99d260: "M361.481 299.804L346.814 291.632L349.831 287.274H346.814L344.802 280.233L320.329 275.54L314.294 278.892L304.907 267.494H301.554V260.118L295.855 257.101L293.508 258.442L288.815 252.743H284.792H279.251",
+p309f35c0: "M25.9902 25.9902C30.7748 21.2055 30.7748 13.448 25.9902 8.66339C21.2055 3.87873 13.448 3.87874 8.66338 8.6634C3.87872 13.4481 3.87873 21.2055 8.66339 25.9902C13.448 30.7748 21.2055 30.7748 25.9902 25.9902Z",
+p39dfe300: "M2.67661 144.624C2.84461 143.953 -1.17839 141.942 2.67661 138.087C6.53161 134.232 3.1796 128.7 3.5146 126.018C3.8496 123.336 5.86161 119.305 7.36961 119.058C8.87861 118.811 9.21361 124.175 12.2306 123.169C15.2476 122.163 11.3926 118.475 14.2426 116.296C17.0926 114.117 23.2946 113.614 27.8206 108.25C32.3466 102.886 33.0166 103.557 39.8896 103.724C46.7626 103.892 50.4496 99.0314 53.9706 99.5334C57.4906 100.036 57.3236 95.8454 63.5256 95.5104C69.7276 95.1754 74.0866 93.6664 79.2826 89.1404C84.4786 84.6144 82.9706 82.4354 85.8196 84.1114C88.6696 85.7874 92.5666 75.1434 90.4296 75.0174C88.2926 74.8914 86.1546 71.3714 88.2926 70.2404C90.4296 69.1084 89.2986 65.4634 92.4416 63.8284C95.5846 62.1944 98.9786 59.5534 99.2306 61.5654C99.4816 63.5774 99.2306 66.9714 101.871 69.4854C104.511 71.9994 105.768 71.7484 106.523 70.2394C107.277 68.7304 105.894 66.3424 106.523 65.0854C107.152 63.8284 103.003 58.1704 106.02 58.0454C109.037 57.9194 112.683 59.5544 115.449 58.0454C118.215 56.5364 114.946 54.6504 115.449 52.5134C115.952 50.3764 114.317 47.4844 118.341 47.3594C122.364 47.2334 121.484 49.2454 122.49 44.0904C123.496 38.9364 123.496 37.9304 126.262 37.9304C129.028 37.9304 129.908 31.3934 133.428 31.7704C136.948 32.1474 136.948 34.1594 142.103 34.6614C147.258 35.1644 148.892 40.8214 148.012 40.6964C147.132 40.5704 148.338 43.8394 148.238 45.2224C148.138 46.6054 149.898 46.8564 150.904 45.5994C151.91 44.3424 152.915 43.5874 154.927 43.9654C156.939 44.3424 159.579 46.7314 162.722 45.7254C165.865 44.7194 164.734 43.0854 164.734 41.5764C164.734 40.0674 164.105 37.6794 162.597 36.7994C161.088 35.9194 161.591 33.4514 164.231 32.4854C166.871 31.5194 164.985 25.6104 167.877 25.8614C170.769 26.1124 169.511 23.3474 170.14 21.3354C170.769 19.3234 172.277 19.8264 177.935 18.8214C183.592 17.8154 185.227 15.4274 189.753 15.8044C194.279 16.1814 195.159 16.9364 195.033 12.7874C194.907 8.6384 195.787 9.1414 193.399 8.0104C191.01 6.8784 188.496 4.9934 189.25 3.7364C190.004 2.4794 190.507 5.8734 193.525 6.5024C196.543 7.1314 198.051 7.2564 199.308 8.6394C200.565 10.0224 201.445 11.0284 205.594 10.7764C209.743 10.5254 208.36 12.7874 211.377 13.7934C214.394 14.7994 217.914 17.6904 222.315 16.1824C226.715 14.6734 228.475 13.4164 229.858 15.4284C231.241 17.4394 231.995 15.5544 234.258 16.0574C236.521 16.5604 236.395 18.9494 234.258 20.3314C232.121 21.7144 233.378 24.3544 231.995 25.3604C230.612 26.3664 229.983 23.7264 227.972 23.9774C225.96 24.2284 222.44 25.7374 225.206 28.5034C227.972 31.2694 228.098 31.8974 226.212 33.0294C224.326 34.1614 218.417 40.4464 221.56 42.3324C224.703 44.2184 231.995 48.3674 233 51.1324C234.006 53.8984 235.012 52.7664 239.537 54.7784C244.063 56.7904 246.452 60.9384 249.217 61.9444C251.983 62.9504 256.886 62.1954 259.777 66.9734C262.669 71.7504 273.229 72.2534 275.995 68.6074C278.761 64.9614 279.767 60.3094 281.904 59.1784C284.041 58.0474 280.27 50.3784 283.161 46.8584C286.052 43.3384 284.67 40.6984 284.795 36.8004C284.921 32.9034 281.275 30.7654 283.286 28.3774C285.298 25.9884 283.479 23.8514 285.017 21.8404C286.555 19.8294 287.812 20.3314 288.189 19.9544C288.566 19.5774 284.166 17.4404 285.8 15.4284C287.434 13.4164 287.103 13.7944 288.212 9.5194C289.32 5.2454 293.469 -1.1666 294.475 1.7244C295.481 4.6164 294.852 6.5014 296.487 9.3934C298.121 12.2854 300.887 14.2964 299.756 17.3134C298.624 20.3304 303.025 20.3304 302.647 24.6054C302.27 28.8794 302.898 38.5604 306.293 38.8114C309.687 39.0624 311.196 34.6624 313.333 37.9314C315.47 41.2004 322.133 41.4514 321.63 45.7264C321.127 50.0004 318.361 58.9274 323.139 61.5674C327.916 64.2074 325.653 64.8364 328.042 68.9844C330.431 73.1334 326.911 70.7444 328.042 75.6474C329.174 80.5504 333.322 78.4134 330.934 82.1844C328.545 85.9564 333.951 87.2134 336.088 88.0934C338.225 88.9734 343.128 88.9734 343.38 91.7394C343.632 94.5054 344.763 96.2104 349.792 97.1804C354.821 98.1504 355.324 99.0304 354.569 101.67C353.815 104.31 364.124 115.625 365.129 120.277C366.134 124.929 373.049 122.163 373.929 128.323C374.809 134.483 380.969 138.632 387.13 143.912C393.29 149.192 391.53 147.181 392.662 151.204C393.793 155.227 399.325 157.616 398.445 161.639C397.565 165.662 398.948 175.091 401.337 180.371C403.726 185.651 405.36 191.309 403.223 192.44C401.086 193.571 404.48 197.846 401.337 202.498C398.194 207.15 398.194 215.573 397.943 218.716C397.691 221.859 394.8 220.099 393.543 225.253C392.286 230.407 389.771 233.676 387.257 236.945C384.743 240.214 384.743 244.991 381.977 245.368C379.211 245.745 379.588 245.871 379.84 249.768C380.091 253.665 373.931 258.443 374.56 262.591C375.189 266.74 374.434 272.397 371.417 276.169C368.4 279.941 366.137 287.861 366.514 291.758C366.891 295.655 364 298.924 361.485 299.804C358.971 300.684 355.702 301.941 349.919 301.941C344.136 301.941 342.753 306.718 339.107 308.981C335.461 311.244 331.312 308.855 328.798 312.501C326.284 316.147 322.26 309.484 323.895 307.975C325.529 306.466 320.752 305.586 318.615 306.341C316.478 307.096 317.232 303.575 318.992 302.192C320.752 300.809 315.472 299.803 313.963 302.318C312.454 304.832 314.592 306.844 311.323 308.73C308.054 310.616 306.043 313.145 304.283 313.578C302.523 314.01 301.014 312.502 295.86 310.616C290.705 308.73 288.568 305.21 282.911 306.09C277.254 306.97 276.122 304.707 271.345 302.067C266.568 299.427 262.545 291.632 265.185 289.495C267.825 287.358 264.934 279.312 261.916 277.3C258.899 275.288 253.996 272.397 251.984 272.271C249.973 272.145 250.098 268.248 252.738 265.859C255.378 263.47 252.109 263.847 251.984 259.322C251.858 254.796 250.853 256.179 248.338 257.059C245.824 257.939 247.709 261.459 245.949 263.974C244.189 266.488 243.183 266.614 240.669 266.866C238.155 267.117 237.275 270.512 235.892 270.261C234.509 270.01 233.88 266.364 237.778 265.609C241.675 264.855 242.43 263.723 243.058 259.826C243.686 255.929 241.549 255.3 244.441 252.408C247.333 249.516 247.835 248.008 247.584 246.374C247.333 244.74 244.315 240.717 242.052 243.86C239.789 247.003 241.298 247.757 238.28 249.392C235.263 251.026 234.257 246.878 231.743 253.038C229.229 259.198 229.731 261.964 225.583 261.461C221.434 260.958 221.811 254.672 219.423 251.152C217.034 247.632 211.754 246.375 213.137 242.1C214.52 237.825 208.863 231.162 203.205 230.785C197.548 230.408 195.285 231.288 191.513 228.773C187.741 226.259 183.467 223.87 179.193 224.373C174.918 224.876 158.826 224.624 153.923 226.636C149.02 228.648 145.5 232.293 139.214 232.419C132.928 232.545 126.349 230.91 123.227 233.802C120.105 236.694 119.099 240.465 112.185 240.591C105.27 240.717 110.425 251.403 101.122 252.031C91.8186 252.66 94.0816 257.06 85.5326 254.168C76.9836 251.276 69.9436 252.911 65.9206 253.539C61.8976 254.168 64.5376 261.711 60.1376 260.328C55.7376 258.945 53.9776 259.951 50.3316 262.339C46.6856 264.728 36.8796 266.865 30.4676 263.219C24.0556 259.573 25.0616 260.453 20.9126 258.945C16.7636 257.436 13.8726 249.265 18.0206 248.51C22.1696 247.756 22.6726 249.013 22.9236 246.121C23.1756 243.229 21.5406 239.332 25.3126 236.818C29.0846 234.304 24.6836 229.778 24.1806 226.886C23.6776 223.994 17.3916 218.337 17.8946 209.034C18.3976 199.731 18.9006 198.096 16.2606 195.079C13.6206 192.062 14.5006 189.547 13.6206 186.279C12.7406 183.01 8.96861 185.525 7.96361 179.364C6.95761 173.204 -0.711394 165.786 1.55161 165.409C3.81461 165.032 4.5686 168.552 5.8266 165.158C7.0836 161.763 5.1976 158.998 7.7126 161.009C10.2266 163.021 8.96961 165.284 10.2266 163.021C11.4836 160.758 8.2146 157.238 8.0896 154.598C7.9576 151.957 2.67661 144.624 2.67661 144.624Z",
+p3aafe380: "M279.251 306.183V159.243H249.213",
+p3b0a6800: "M13.2029 32.6609C13.8069 32.6609 21.4189 32.6609 21.4189 32.6609L17.3109 36.8899L13.2029 32.6609Z",
+p3bb5a800: "M21.0039 14.7595C21.0039 18.2295 18.1909 21.0425 14.7209 21.0425C11.2509 21.0425 8.43784 18.2295 8.43784 14.7595C8.43784 11.2895 11.2509 8.47651 14.7209 8.47651C18.1909 8.47651 21.0039 11.2895 21.0039 14.7595Z",
+p3bded280: "M10.6162 30.0524C11.2202 30.0524 18.8322 30.0524 18.8322 30.0524L14.7242 34.2814L10.6162 30.0524Z",
+p5b98f00: "M20.8646 14.5774C20.8646 18.0474 18.0516 20.8604 14.5816 20.8604C11.1116 20.8604 8.29865 18.0474 8.29865 14.5774C8.29865 11.1074 11.1116 8.2944 14.5816 8.2944C18.0516 8.2954 20.8646 11.1084 20.8646 14.5774Z",
+pcf0600: "M403.22 192.439H393.414H388.05L386.708 197.761H383.356V200.443H378.663V194.744L372.963 194.073L367.599 192.439L360.224 189.715L357.206 195.079H279.251",
+pe3d3f00: "M26.6554 17.5289C28.2023 10.9417 24.1162 4.34765 17.5289 2.80081C10.9417 1.25396 4.34765 5.34004 2.80081 11.9273C1.25396 18.5146 5.34004 25.1086 11.9273 26.6554C18.5146 28.2023 25.1086 24.1162 26.6554 17.5289Z",
+}
diff --git a/src/imports/svg-ol708ba89o.ts b/src/imports/svg-ol708ba89o.ts
new file mode 100644
index 0000000..0444dcc
--- /dev/null
+++ b/src/imports/svg-ol708ba89o.ts
@@ -0,0 +1,61 @@
+export default {
+p1165c400: "M877 481.6C877 483.1 880.9 485 884.1 485C886.2 485 888 485.4 888 485.9C888 486.3 889.2 486.5 890.6 486.2C892.4 485.9 893.6 486.2 894.1 487.2C894.7 488.2 896.1 488.7 898.2 488.5C900 488.3 902 488.6 902.6 489.1C903.4 489.7 904 489.5 904.4 488.5C904.8 487.3 904.2 487 901.5 487C899.6 487 898 486.6 898 486C898 485.5 897.3 485.3 896.5 485.6C895.7 486 895 485.8 895 485.2C895 484.6 894 484.4 892.8 484.8C891.5 485.1 890.9 484.9 891.3 484.3C891.7 483.7 891 483.5 889.5 483.8C888.1 484 887 483.8 887 483.2C887 482.5 885.6 482.3 883.5 482.7C881.5 483 880 482.8 880 482.3C880 481.8 879.3 481.3 878.5 481.3C877.7 481.3 877 481.5 877 481.6Z",
+p12642100: "M477.7 108.3C478 108.9 476.7 109.1 474.7 108.8C472.7 108.6 471.4 108.8 471.6 109.2C472.2 110.1 468.5 110.4 463.2 110.1C460.1 109.8 460 109.9 461.1 112.4C462.2 114.8 462.4 114.8 465.1 113.4C466.9 112.5 468 112.4 468 113C468 113.7 468.6 113.7 470.1 113C471.2 112.3 472.8 112.1 473.6 112.4C474.4 112.7 475 112.5 475 112.1C475 111.6 476.8 110.9 479 110.5C484.2 109.6 484.9 108.3 480.6 107.8C478.6 107.6 477.4 107.8 477.7 108.3Z",
+p12c91a00: "M873.5 346C873.9 346.6 874.6 346.7 875.2 346.4C875.8 346 876.9 346.5 877.7 347.5C878.4 348.6 879 348.9 879 348.4C879 346.8 876.7 345 874.7 345C873.7 345 873.2 345.5 873.5 346Z",
+p13059e00: "M271.901 208.1C270.701 208.8 270.701 209 272.001 209.1C272.801 209.1 272.501 209.5 271.201 209.8C269.901 210.2 268.901 210.9 268.901 211.5C268.801 213.3 270.501 213 273.301 210.6C275.301 208.9 275.701 208.1 274.701 207.7C273.901 207.4 272.701 207.6 271.901 208.1Z",
+p1492ad00: "M870.401 327.1C870.101 327.7 868.901 328 867.901 327.7C866.901 327.4 866.001 327.6 865.801 328C865.601 328.4 862.601 329.1 859.101 329.4C855.601 329.7 851.701 330.3 850.501 330.6C849.101 330.9 847.101 330.4 845.401 329.3C843.801 328.3 842.901 328.1 843.301 328.7C843.801 329.4 843.701 330 843.301 330C841.801 330 842.101 334.1 843.601 334.7C844.501 335 844.801 336 844.501 337C844.201 338 844.601 339.5 845.401 340.3C846.201 341.1 846.601 342.1 846.201 342.5C845.801 342.9 846.501 342.9 847.801 342.6C849.101 342.1 850.001 342.3 850.001 342.9C850.001 343.5 850.701 344 851.501 344C852.301 344 852.901 344.3 852.901 344.7C852.501 346.9 853.201 348 854.801 347.7C857.501 347.2 861.101 345 860.501 344.1C860.301 343.6 861.401 343 863.101 342.6C864.801 342.3 865.901 341.6 865.501 341C865.201 340.5 865.601 340 866.501 340C867.401 340 867.801 340.4 867.501 341C867.201 341.5 867.401 342 867.901 342C868.801 342 869.601 336.6 869.101 333.7C869.001 333.1 872.101 332.6 874.501 332.9C875.101 333 874.601 332.2 873.501 331.3C872.401 330.3 871.601 328.7 871.801 327.7C872.201 325.8 871.501 325.4 870.401 327.1Z",
+p16952200: "M890.9 328L888.5 330L891.3 328.9C892.8 328.2 894 327.3 894 326.8C894 325.6 893.5 325.8 890.9 328Z",
+p17b09c0: "M823.4 309C823.5 311.7 823.7 314 824 314C824.3 314 825.2 315.5 826 317.2C827.3 320.2 827.5 320.3 827.8 318.2C828 317 828.4 316 828.8 316C829.2 316 829.5 314.7 829.5 313.1C829.5 311.5 829.2 310.4 828.9 310.6C828.5 310.8 827.9 310.3 827.6 309.4C827.2 308.4 827.4 308.1 828.3 308.5C828.9 308.9 828.6 308.4 827.6 307.6C826.5 306.7 826 306 826.6 306C827.5 306 824.9 304 823.9 304C823.6 304 823.3 306.2 823.4 309Z",
+p18c2ce00: "M894 334.6C894 334.7 893.3 336.4 892.5 338.4C891 341.9 891 342 893.2 342C894.9 342 895.1 341.7 894.1 341.1C893 340.4 893.2 340.1 894.8 339.6C897.5 338.7 898.4 334.1 895.8 334.3C894.8 334.4 894 334.5 894 334.6Z",
+p198bb300: "M947 243.6C947 245.9 950.5 250 952.5 250C953.1 249.9 952.7 249.5 951.7 248.9C950.8 248.3 950.1 247.6 950.3 247.2C950.5 246.8 949.9 245.7 948.8 244.7C947.8 243.8 947 243.3 947 243.6Z",
+p1ab02900: "M907.401 380.2C907.001 380.9 907.001 381.2 907.401 380.8C908.401 380 912.101 383.1 911.401 384.2C911.101 384.6 911.401 385 911.901 385C912.501 385 913.001 386.4 913.001 388.1C913.001 389.7 912.601 390.9 912.101 390.6C911.701 390.3 910.401 390.8 909.401 391.6C908.401 392.5 908.001 392.9 908.701 392.5C910.001 391.9 914.001 394.8 914.001 396.5C914.101 399.3 920.501 404 921.201 401.8C921.501 401.1 922.701 400.9 924.301 401.4C925.801 401.7 926.801 402.4 926.501 402.9C926.301 403.4 926.701 404 927.501 404.4C928.401 404.7 929.001 406.2 929.001 408.3C929.001 410.6 929.801 412.4 931.401 413.9C933.401 415.8 933.801 415.9 933.601 414.5C933.501 413.6 932.901 412.5 932.301 412.2C931.801 411.8 931.001 409.8 930.601 407.6C929.901 403.8 929.901 403.8 932.501 404.4L935.101 405.1L932.901 402.9C931.401 401.4 931.101 400.5 931.901 399.7C932.601 399 932.001 397.7 929.901 395.3C928.301 393.4 927.201 391.5 927.501 391.1C927.701 390.6 927.101 390 926.001 389.7C924.901 389.4 923.601 388.1 923.101 386.8C922.601 385.5 921.401 383.8 920.401 383C918.601 381.6 918.701 381.7 920.401 384C921.501 385.4 920.701 384.8 918.701 382.7C915.901 379.8 914.301 379 911.601 379C909.701 379 907.801 379.6 907.401 380.2Z",
+p1afaf800: "M233 145.5C230.3 147 230.1 148.2 232.5 148.6C233.3 148.7 233.7 148.4 233.4 147.8C233.1 147.3 233.6 146.2 234.6 145.5C237 143.7 236.2 143.7 233 145.5Z",
+p1cd08500: "M574.9 76.4C574.6 76.7 572.5 77 570.2 77.1C567.8 77.3 565.6 77.8 565.4 78.2C565.1 78.6 564.4 79 563.9 79C563.3 79 563.2 78.5 563.6 77.9C564.1 77.1 563.7 77.1 562.3 77.9C561.2 78.5 560.1 78.8 559.9 78.7C559.7 78.6 559.6 78.7 559.8 79C560.1 79.5 560.7 79.6 564.8 79.8C566.1 79.9 566.8 80.5 566.5 81C566.1 81.6 566.8 81.8 568.2 81.6C569.5 81.3 570.7 81.1 571 81.1C571.3 81 570.8 80.5 570 79.9C568.8 79.1 569.1 78.9 571.2 79.3C572.7 79.5 573.7 79.4 573.5 79C573.2 78.5 573.7 78 574.4 77.7C575.2 77.4 576.1 77.6 576.4 78.3C576.6 79 576.9 78.7 576.9 77.7C577 76.1 575.9 75.4 574.9 76.4Z",
+p1cd69d00: "M822.701 386.5C821.801 387.2 821.001 388.2 821.001 388.9C821.001 389.5 820.601 390 820.001 390C819.501 390 819.001 391 819.001 392.2C819.001 394.3 819.001 394.3 817.601 392.5C816.301 390.7 816.201 390.7 816.701 393.3C817.001 395 816.801 396 816.001 396C815.301 396 815.101 396.8 815.501 398C815.901 399.2 815.701 400 815.001 400C814.401 400 814.201 400.4 814.501 401C814.801 401.5 814.601 402 813.901 402C813.201 402 812.901 402.3 813.301 402.6C814.001 403.3 808.701 408 807.201 408C805.101 408 806.801 411.3 809.101 411.7C810.401 411.9 811.701 412.5 811.801 413C812.001 413.6 812.901 414 813.801 414C815.301 414 815.301 413.8 814.001 413C812.701 412.2 812.801 412 814.301 412C815.201 412 816.001 412.4 816.001 413C816.001 413.5 816.601 413.7 817.401 413.4C818.101 413.1 819.501 413.6 820.401 414.5C821.301 415.4 822.001 415.8 822.001 415.3C822.001 414.9 822.401 415.1 822.901 415.9C823.401 416.7 825.901 417.3 829.101 417.4C835.601 417.6 843.001 419.8 844.801 421.9C845.401 422.7 846.001 423.1 846.001 422.7C846.001 421.3 851.701 428.5 852.401 430.7C853.001 432.4 853.901 433 856.101 433C858.301 433 859.001 433.5 859.001 434.9C859.001 436.3 858.501 436.7 857.001 436.3C855.401 435.9 855.101 436.1 855.601 437.4C856.401 439.6 855.201 444.2 854.001 443.5C853.401 443.2 853.001 443.6 853.001 444.5C853.001 445.4 853.501 445.8 854.001 445.5C854.601 445.2 855.001 445.8 855.001 447C855.001 448.2 855.501 448.8 856.001 448.5C856.601 448.2 857.001 448.4 857.001 449.1C857.001 449.8 857.301 450 857.701 449.7C858.001 449.3 858.901 449.9 859.701 451C860.701 452.4 862.301 453 864.601 453C867.001 453 867.901 453.4 867.401 454.2C866.901 455 867.201 455.1 868.301 454.7C869.301 454.3 870.001 454.6 870.001 455.2C870.001 455.8 870.301 456.1 870.601 455.7C870.901 455.4 872.301 455.5 873.701 456.1C875.501 456.7 875.901 456.7 875.401 455.8C874.901 455 875.201 454.9 876.301 455.3C877.301 455.7 878.001 455.5 878.001 454.8C878.001 454.1 879.401 453.9 882.001 454.3C884.501 454.6 885.801 454.4 885.401 453.8C885.001 453.2 887.201 452.9 891.401 453.2C895.001 453.3 898.001 453.2 898.001 452.8C898.001 452.4 898.701 452.4 899.701 452.7C900.901 453.2 901.101 453 900.501 452C899.901 451 900.201 450.8 901.801 451.2C903.101 451.6 904.101 451.2 904.501 450.2C904.801 449.4 905.301 449 905.601 449.3C906.901 450.6 909.401 446.6 909.101 443.8C909.001 442.2 909.401 440.2 910.101 439.3C911.201 438.1 911.201 437.6 909.901 436.6C908.301 435.4 908.501 433 910.401 431.7C911.201 431.2 911.001 430.7 910.001 430.1C909.201 429.5 908.901 428.8 909.201 428.4C909.601 428 909.401 426.8 908.901 425.7C908.001 424.1 908.101 423.5 909.301 422.8C910.201 422.3 910.701 421.3 910.401 420.6C910.101 419.8 910.801 418.3 912.001 417.2C913.901 415.4 914.001 415.1 912.501 413.6C911.001 412.1 911.001 411.9 912.401 410.4C914.701 408.1 914.301 406.5 911.501 406.5C910.101 406.5 909.001 406.9 909.001 407.3C909.001 407.8 908.601 407.8 908.001 407.5C907.401 407.2 907.301 407.6 907.601 408.5C908.001 409.5 907.801 410 906.901 409.8C906.101 409.6 905.601 410.1 905.801 410.8C905.901 411.6 905.601 411.9 905.101 411.6C903.901 410.8 900.901 412 901.501 413C901.801 413.4 900.401 413.4 898.501 413C896.601 412.6 894.901 412.4 894.701 412.7C894.401 412.9 894.001 412.4 893.601 411.5C893.301 410.6 893.401 410.2 894.001 410.5C894.601 410.8 894.701 410.4 894.401 409.6C894.101 408.7 893.301 408.3 892.701 408.7C892.001 409.1 891.901 408.7 892.301 407.6C893.001 405.7 890.801 401.6 889.701 402.7C889.301 403 889.001 402.9 889.001 402.4C889.001 401.9 889.801 400.7 890.801 399.9C892.501 398.4 892.801 398.4 893.801 399.9C894.701 401.2 894.901 401.2 894.701 400C894.601 399.2 895.101 398.6 895.901 398.5C896.701 398.5 897.501 397.9 897.801 397.2C898.001 396.5 897.601 396.2 896.601 396.6C895.701 396.9 895.001 396.7 895.001 396C895.001 395.4 894.601 395.2 894.001 395.5C893.501 395.8 893.001 395.8 893.001 395.3C893.001 394.9 891.901 393.2 890.501 391.6C889.101 390 888.001 389.2 888.001 389.9C888.001 390.8 887.501 390.8 886.001 390C884.901 389.4 883.401 389.2 882.801 389.6C882.101 390 882.001 389.9 882.401 389.2C883.301 387.7 883.001 387.7 878.701 389.5C875.101 391 872.001 390.7 872.001 388.8C872.001 388.3 871.601 388.2 871.001 388.5C870.401 388.9 870.301 388.4 870.701 387.4C871.101 386.2 871.001 385.9 870.201 386.4C869.501 386.8 869.001 386.7 869.001 386.2C869.001 384.9 861.801 384.9 860.001 386.2C858.801 387 858.801 387.1 860.301 386.6C861.301 386.3 861.801 386.4 861.501 387C861.201 387.5 858.701 387.6 855.801 387.3C852.101 386.9 850.901 387 851.401 387.8C851.801 388.5 851.601 388.8 850.701 388.4C850.001 388.2 848.101 388.4 846.601 389C845.101 389.5 844.101 389.6 844.501 389.1C845.301 387.7 841.801 387.2 839.701 388.4C838.301 389.3 837.601 389.1 836.601 387.8C835.901 386.9 834.501 386.3 833.401 386.5C827.601 387.7 824.601 387.9 825.801 387.1C826.901 386.4 826.901 386.2 825.801 385.8C825.001 385.5 823.601 385.8 822.701 386.5Z",
+p1d49a200: "M262 272.1L258.5 275.1L262.3 272.5C265.6 270.1 266.6 269 265.7 269C265.6 269 263.9 270.4 262 272.1Z",
+p1ee76e10: "M766.101 277.2C765.601 278.5 765.601 280.5 766.101 281.6C766.501 282.8 766.701 284 766.501 284.2C766.301 284.4 766.901 284.6 767.901 284.6C769.901 284.6 770.201 281.2 768.201 279.1C767.501 278.4 767.101 277.1 767.401 276.4C767.701 275.6 767.701 275 767.401 275C767.201 275 766.601 276 766.101 277.2Z",
+p1ff45600: "M328.301 278.1C327.101 278.5 325.601 279.8 325.001 280.9C323.901 283.1 321.001 283.8 321.001 281.9C321.001 281.1 320.601 281 319.701 281.9C318.901 282.5 318.001 282.7 317.701 282.3C317.301 282 317.001 282.1 317.001 282.7C317.001 284.4 313.901 285.2 312.301 283.9C311.601 283.2 310.701 283 310.301 283.3C310.001 283.7 309.101 283.5 308.301 282.8C307.501 282.2 307.001 282.1 307.101 282.6C307.401 284.6 306.901 286.1 306.101 285.5C305.601 285.2 304.901 285.4 304.501 285.9C304.201 286.5 303.301 286.7 302.601 286.4C301.801 286.1 300.901 286.4 300.501 286.9C300.201 287.5 299.401 287.7 298.801 287.4C298.201 287 298.001 287.2 298.301 287.7C298.901 288.7 296.801 290.2 294.501 290.4C294.001 290.5 293.601 291.5 293.801 292.8C294.001 294 293.601 295 293.001 295C292.401 295 292.201 295.4 292.501 296C292.801 296.5 292.601 297 292.001 297C291.401 297 291.101 297.4 291.501 297.9C291.801 298.4 290.801 299 289.301 299.2C287.901 299.4 286.401 300.2 286.201 301C285.901 301.8 286.001 302.2 286.401 301.9C287.501 300.9 293.301 306.7 292.601 307.9C292.201 308.5 292.401 309 293.001 309C293.601 309 293.801 309.4 293.501 310C293.201 310.5 293.401 311 294.101 311C294.801 311 294.501 311.7 293.401 312.6C292.401 313.4 292.101 313.9 292.701 313.5C293.601 313.1 293.801 313.4 293.401 314.4C293.101 315.3 292.401 316 291.901 316C291.501 316 291.401 316.7 291.701 317.7C292.101 318.7 291.901 319.1 291.301 318.7C289.601 317.6 288.101 320.3 288.301 324.2C288.501 327.4 288.901 327.9 291.401 328.4C294.101 329 294.201 329.1 292.701 330.8C291.701 331.9 291.401 333.5 291.701 335.2C292.201 337.9 293.801 338.5 299.801 338.3C300.501 338.2 300.901 338.5 300.601 338.8C299.901 339.4 303.901 342.4 306.001 342.7C306.801 342.8 308.001 343.6 308.601 344.4C309.201 345.3 310.001 345.7 310.301 345.3C310.701 345 311.901 345.9 313.001 347.3C314.201 348.8 315.701 349.7 316.501 349.3C317.301 349 318.001 349.2 318.001 349.6C318.001 350.1 321.501 350.5 325.701 350.5C330.901 350.5 333.501 350.9 333.801 351.8C334.001 352.4 334.601 352.8 335.101 352.4C335.601 352.1 336.001 352.4 336.001 353C336.001 353.6 336.501 353.8 337.001 353.5C337.601 353.2 338.001 353.3 338.001 353.9C338.001 354.4 339.201 356.1 340.601 357.7C342.301 359.5 343.001 361.2 342.701 362.7C342.501 364 342.901 365.5 343.601 366.1C344.401 366.7 345.001 368.2 345.101 369.4C345.101 371.5 345.201 371.5 346.101 369.5C346.801 367.9 346.901 368.2 346.501 370.7C346.001 374.1 346.701 377.3 347.901 376.6C348.201 376.4 348.601 377.3 348.701 378.7C348.701 380.1 350.101 382.4 351.601 383.9L354.401 386.5L352.001 383.5L349.501 380.5L352.301 383C353.801 384.3 354.801 386 354.601 386.6C354.301 387.3 354.501 388 355.001 388.2C355.501 388.4 356.101 390.2 356.301 392.3C356.501 394.5 357.501 396.6 358.601 397.4C359.601 398.2 360.501 399.2 360.501 399.7C360.601 401.6 363.601 405 365.201 405C366.101 405 367.201 405.9 367.501 407C367.901 408.1 368.501 408.8 369.001 408.5C369.501 408.2 370.201 408.5 370.601 409.1C371.001 409.8 370.901 410 370.301 409.7C369.701 409.3 369.001 409.7 368.601 410.5C368.301 411.3 368.501 412.2 369.001 412.5C369.501 412.8 369.601 413.8 369.301 414.6C368.901 415.7 369.301 416.1 370.601 415.8C371.701 415.6 372.501 416.1 372.601 417C372.801 419.5 374.201 422 375.101 421.4C375.601 421.1 376.301 421.6 376.601 422.4C377.001 423.4 378.501 424 380.901 424.1C384.101 424.2 384.301 424.3 382.001 425C379.501 425.8 379.501 425.8 381.801 425.9C383.101 426 385.001 426.5 386.101 427C387.601 427.9 388.001 427.7 388.001 426.5C388.001 425.6 388.601 424.7 389.401 424.4C390.201 424.1 391.101 423.1 391.501 422.2C391.801 421.3 391.801 420.9 391.401 421.2C391.101 421.6 390.101 421.3 389.301 420.5C388.201 419.4 388.101 418.6 389.101 416.9C389.801 415.4 389.901 415 389.101 415.4C388.501 415.8 388.001 415.7 388.001 415.2C388.001 414.6 388.701 414 389.501 413.6C390.301 413.3 391.001 412.5 391.001 411.8C391.001 410.9 390.701 411 390.001 412C389.301 413.1 389.001 413.1 389.001 412.2C389.001 411.4 388.101 411 386.901 411.2C385.301 411.4 384.601 410.9 384.401 409.3C384.201 408.1 384.401 406.9 384.901 406.5C385.401 406.2 385.601 405.1 385.301 404C385.001 402.9 385.301 401.4 385.901 400.7C386.701 399.7 386.601 399.3 385.501 399.3C384.701 399.3 384.301 399.7 384.601 400.2C385.501 401.7 384.001 401 381.901 399.1C379.301 396.7 380.301 394.6 383.701 395.3C385.901 395.7 386.001 395.5 385.501 392.9C385.101 391 385.201 390 386.001 390C386.601 390 386.801 389.5 386.501 389C385.901 388.1 386.401 387.9 389.801 387.6C390.501 387.5 391.701 386.2 392.501 384.7C393.301 383.2 393.501 382.2 393.001 382.5C391.901 383.2 388.801 380.6 389.501 379.6C389.801 379.3 389.701 379.2 389.301 379.5C388.501 380.1 386.001 378.1 386.001 376.8C386.001 376.2 388.001 376 390.501 376.2C393.001 376.4 395.001 376.1 395.001 375.7C395.001 375.2 395.401 375.2 396.001 375.5C396.601 375.8 396.701 375.4 396.401 374.6C396.101 373.7 396.201 373 396.801 373C397.301 373 397.501 372 397.301 370.7C397.101 369.5 397.601 367.6 398.701 366.5C399.701 365.4 400.401 363.4 400.201 362.1C399.901 360.6 400.501 359.1 401.601 358.3C402.701 357.5 402.901 357 402.101 357C401.301 357 401.001 356.4 401.401 355.5C401.701 354.7 401.501 354 401.101 354C399.001 354 399.001 350.4 401.001 348.8C402.201 347.8 402.901 347 402.501 347C402.101 347 402.301 346.3 403.001 345.5C403.701 344.6 404.901 344.1 405.701 344.4C406.401 344.7 407.001 344.3 407.001 343.5C407.001 342.7 407.301 342.1 407.801 342.1C409.901 342.5 411.001 341.9 410.401 340.8C409.901 340 410.201 339.9 411.301 340.3C412.301 340.6 413.001 340.5 413.001 340C413.001 339.4 413.501 339.1 414.201 339.3C415.001 339.4 415.301 338.4 415.101 336.1C415.001 334.3 415.201 333 415.701 333.3C416.101 333.6 416.501 330.5 416.501 326.5C416.501 322.3 416.101 319.4 415.601 319.8C415.101 320.1 414.901 319.6 415.301 318.7C415.601 317.7 415.501 317 415.001 317C413.501 317 413.801 315.6 415.801 313.4C416.801 312.3 417.501 310.9 417.201 310.2C417.001 309.6 417.301 309 417.901 309C418.501 309 418.901 308.7 418.801 308.2C418.501 307.3 421.501 302.9 422.101 303.4C422.301 303.6 422.501 302.6 422.501 301C422.501 299.5 422.101 298.4 421.601 298.8C421.101 299.1 420.901 298.6 421.301 297.7C421.601 296.7 421.501 296 420.901 296C420.301 296 420.101 295.6 420.501 295.1C420.801 294.5 419.201 294.3 416.501 294.5C413.501 294.7 412.201 294.5 412.601 293.8C413.001 293.2 412.501 293 411.001 293.5C409.801 293.9 409.001 293.8 409.301 293.4C409.601 292.9 406.501 292.4 402.401 292.3C398.301 292.2 395.001 292.5 395.001 293.1C395.001 294.5 393.001 294.2 391.201 292.4C390.201 291.3 389.501 291.1 389.201 291.9C389.001 292.5 388.401 293 387.901 293C387.301 293 387.201 292.5 387.501 292C388.501 290.4 383.001 290.8 381.401 292.4C380.201 293.7 379.501 293.7 376.801 292.5C375.001 291.8 373.401 290.6 373.101 289.8C372.901 289.1 371.601 287.6 370.301 286.5C369.101 285.4 368.001 283.9 368.001 283.3C368.001 282.7 367.101 282.4 366.001 282.7C364.901 283 364.001 282.8 364.001 282.4C364.001 281.1 356.701 280.9 355.901 282.2C355.001 283.6 346.001 284.3 346.001 282.9C346.001 282.3 345.601 282.2 345.001 282.5C344.501 282.8 344.001 282.6 344.001 282.1C344.001 281.5 342.401 281 340.501 281C338.601 281 337.001 280.5 337.001 279.9C337.001 279.3 336.101 279 335.001 279.3C333.901 279.6 332.401 279.3 331.701 278.6C330.901 277.8 329.701 277.6 328.301 278.1ZM306.001 289.4C306.001 290.2 305.201 290.8 304.101 290.7C303.001 290.7 302.401 290.1 302.701 289.3C303.401 287.5 306.001 287.6 306.001 289.4ZM336.301 345.5C337.001 347.3 335.701 348.2 333.601 347.4C332.401 346.9 332.301 346.5 333.301 345.4C334.901 343.7 335.701 343.7 336.301 345.5Z",
+p2377de00: "M662 309C661.2 309.5 660.1 309.6 659.5 309.3C659 308.9 658.8 309 659.1 309.4C659.5 309.8 658.7 311.3 657.4 312.7C655.7 314.5 654.3 315.1 652.5 314.8C651.1 314.5 650 314.7 650 315.2C650 315.8 649.4 316 648.7 315.7C647.8 315.4 647.5 316.1 647.8 318.5C648.1 321 647.6 322.3 645.6 324.3C643.7 326.3 643 327.9 643 331C643 334.5 643.3 335 645.3 335.1C647.4 335.1 647.4 335.2 645.5 336C643.7 336.8 643.7 336.9 646.1 336.9C647.5 337 649.5 336.3 650.6 335.4C651.6 334.6 651.9 334.2 651.2 334.5C649.3 335.5 651.5 331.4 653.4 330.3C654.8 329.5 655 329.1 655 327.1C655 326.6 656.5 324.7 658.3 322.9C660 321.1 660.9 319.9 660.3 320.4C659.4 320.9 659.2 320.6 659.6 319.6C659.9 318.7 660.5 318.2 661 318.5C661.4 318.7 661.5 317.8 661.2 316.3C660.9 314.5 661.1 313.9 661.9 314.4C663.2 315.3 664.3 313 663.8 310.1C663.6 308.6 663.1 308.3 662 309Z",
+p257393c0: "M275 135.9C275 136.6 274.6 136.8 274 136.5C273.5 136.2 273 136.4 273 137C273 137.6 272.6 137.8 272 137.5C271.5 137.2 271 137.4 271 138C271 138.6 270.6 138.8 270 138.5C269.5 138.2 269 138.4 269 138.9C269 139.5 268.3 140 267.4 140C266 140 266 140.3 267 141.5C268.1 142.8 268.4 142.8 269.7 141.3C270.6 140.2 270.9 140.1 270.4 141C270.1 141.8 271.2 141.1 273.1 139.3C274.9 137.5 276.1 135.7 275.7 135.4C275.3 135 275 135.2 275 135.9Z",
+p25f81000: "M931.2 279.4C931.9 280.2 932.8 280.6 933.3 280.3C933.7 280.1 934 280.3 934 280.9C934 281.5 934.7 281.7 935.5 281.3C936.7 280.9 936.5 280.4 934.4 279.4C931 277.6 929.6 277.6 931.2 279.4Z",
+p26986180: "M923.501 280.4C924.701 281.2 925.101 282.4 924.701 283.9C924.101 286.2 925.401 286.7 927.401 284.8C928.501 283.7 928.501 283.3 927.101 282.2C925.901 281.2 925.901 281.1 927.001 281.6C928.301 282.3 928.301 282.1 927.101 280.7C926.401 279.8 924.801 279 923.701 279C921.701 279 921.701 279.1 923.501 280.4Z",
+p276b4c32: "M836.3 350C836.9 351 837.7 351.7 838 351.5C838.4 351.2 839.6 352 840.8 353C843.6 355.7 844.2 355.5 842.8 352.5C841.8 350.3 839.8 349 836.3 348.4C835.4 348.2 835.4 348.6 836.3 350Z",
+p27a94080: "M921.4 486.9C921.7 487.3 920.8 488.2 919.4 488.9C916.1 490.3 914.7 490.3 915.5 488.7C915.9 488.1 915.6 488.2 914.8 489C914.1 489.8 912.4 490.7 911 490.8C906 491.5 907.7 492.2 913.7 491.8C917 491.7 919.6 491.8 919.4 492.1C918.8 493.1 922 494.1 923.2 493.4C923.9 492.9 923.6 492.2 922.5 491.3C920.9 490.2 920.9 490 922.2 490C923.3 490 923.7 489.4 923.3 488C923 486.9 922.3 486 921.8 486C921.3 486 921.1 486.4 921.4 486.9Z",
+p27d46c00: "M299.6 265.1C299.9 265.6 299.4 266 298.6 266C297.7 266 297.3 266.6 297.6 267.3C298.3 269.1 301 269 301 267.2C301 266.4 301.6 266 302.5 266.4C303.3 266.7 304 266.6 304 266.1C304 265.6 302.9 265 301.5 264.8C300.2 264.5 299.3 264.7 299.6 265.1Z",
+p2829f080: "M901 366.6C901.1 368 903.4 370.5 904.8 370.7C905.4 370.9 906 370.1 906 369C906 367.9 905.6 367 905.1 367C904.6 367 903.5 366.7 902.6 366.4C901.7 366.1 901 366.2 901 366.6Z",
+p28324000: "M272 268.3C272 268.8 271.1 269 270 268.7C268.9 268.4 268.2 268.6 268.5 269C268.8 269.5 268.4 270.1 267.8 270.4C267.1 270.7 267.9 270.7 269.5 270.3C271.2 270 272.9 269.3 273.5 268.9C274.8 267.6 277.8 267.8 278.2 269.2C278.5 270 279.1 270 280.5 269.3C282.3 268.3 282.2 268.2 280.3 267.6C277.5 266.7 272 267.2 272 268.3Z",
+p28edb500: "M393 423.9C393.1 426.9 399.5 428.8 402.4 426.7C404 425.5 403.8 425.4 400.5 425.8C397.9 426.1 396.9 425.9 397.4 425.1C397.9 424.4 397.5 424.2 396.4 424.7C395.4 425.1 394.9 424.9 395.3 424.3C395.6 423.8 395.3 423.3 394.5 423.3C393.7 423.3 393 423.6 393 423.9Z",
+p2a04f000: "M367.4 93.6C368.1 95.3 366.8 95.4 365.2 93.8C364.3 92.9 364 92.9 364 93.9C364 94.7 363.3 95 362 94.7C360.9 94.4 360 94.7 360 95.2C360 95.8 358.8 96 357 95.6C355.1 95.3 354 95.5 354 96.1C354 96.7 353.3 97 352.5 96.6C351.7 96.3 351 96.5 351 97C351 97.5 350.4 97.7 349.6 97.4C348.9 97.1 347.6 97.6 346.7 98.4C345.8 99.4 344.4 99.7 343.4 99.3C342.2 98.8 341.9 99 342.5 99.9C343.1 100.9 342.7 101 341 100.5C339.4 100 339 100.1 339.5 100.9C340 101.7 339.4 101.9 337.4 101.4C335.5 100.9 334.9 101 335.4 101.9C335.8 102.6 335.4 102.9 334.3 102.8C330.8 102.5 328.9 103 329.5 104C329.8 104.6 329.4 104.7 328.5 104.4C327.7 104 326.4 104.3 325.6 104.9C324.9 105.5 324 105.7 323.7 105.3C323.3 105 323 105.2 323 105.9C323 106.5 322.2 107 321.3 106.8C319.9 106.6 319.6 107.1 319.8 108.7C320.1 110.5 319.6 111 318 111C316.8 111 315 110.5 313.9 110C312.9 109.4 312 109.3 312 109.8C312 111.1 307 113.1 305.8 112.4C305.1 111.9 305 112.2 305.5 113C306.1 114 305.9 114.2 304.6 113.7C303.5 113.2 303.1 113.4 303.6 114.2C304.1 114.9 303.8 115.1 302.7 114.7C301.6 114.3 301.3 114.5 301.7 115.6C302.1 116.7 303 117 304.4 116.5C305.5 116.2 307 115.8 307.5 115.7C308.1 115.5 309.5 114.9 310.7 114.2C311.9 113.5 313.6 113.3 314.4 113.6C315.3 113.9 316 113.7 316 113.1C316 112.5 316.5 112 317 112C318.4 112 318.2 114.8 316.8 115.3C316.1 115.5 315.8 116.1 316.2 116.4C316.5 116.8 318.9 116.3 321.3 115.2C324.2 113.9 326.1 113.5 326.8 114.2C327.4 114.8 328.3 114.6 329.2 113.6C330.1 112.8 331.1 112.4 331.5 112.8C332 113.2 332.1 113 331.7 112.5C331.4 111.9 331.4 111 331.8 110.5C332.9 109 340 105.9 341 106.5C341.5 106.8 342.3 106.3 342.8 105.5C343.3 104.6 344.4 103.8 345.4 103.6C346.4 103.5 347.5 102.8 348 102.1C348.4 101.3 349.3 101.1 350 101.5C350.9 102.1 351.1 101.9 350.5 101C350 100.1 350.3 100 351.9 100.5C353.2 100.9 354 100.7 354 100C354 99.3 354.8 99.1 356.1 99.5C357.7 100 358 99.9 357.5 98.9C356.9 98 357.2 97.8 358.3 98.3C359.3 98.6 360 98.5 360 98C360 97.5 360.7 97.4 361.7 97.7C362.9 98.2 363.1 98 362.5 97C361.9 96.1 362.1 95.8 363.2 96.2C364 96.6 366.4 96 368.6 95.1L372.5 93.3L369.7 92.8C367.6 92.4 367 92.6 367.4 93.6Z",
+p2b41fc80: "M86.9004 273.6C84.6004 276.1 84.6004 276.2 86.7004 275.1C89.0004 273.9 90.5004 272.2 89.8004 271.4C89.5004 271.2 88.3004 272.2 86.9004 273.6Z",
+p2b9cb700: "M826.1 341.9C825.1 342.5 825.2 342.9 826.5 343.4C827.4 343.7 827.9 344.3 827.7 344.7C827.4 345.2 828.5 345.5 830 345.5C832.2 345.5 832.6 345.2 831.7 344.2C830 342.1 827.5 341.1 826.1 341.9Z",
+p2e7355f0: "M323.9 121.7C326.4 122.7 317.5 126.1 314.8 125.1C313.3 124.6 311.4 124.8 309.5 125.5C307.9 126.2 305.9 126.5 305.1 126.2C304.2 125.9 303.9 126.1 304.3 126.7C304.7 127.3 304.3 128.6 303.4 129.4C302.6 130.3 302.1 131 302.5 131C302.9 131 302.4 131.7 301.5 132.6C299.4 134.8 298.4 133.6 299.8 130.5C300.5 129 300.6 128 300 128C299.4 128 299 128.5 299 129.1C299 129.6 298.5 129.8 297.8 129.4C297 128.9 296.9 129.2 297.3 130.4C297.7 131.4 297.6 131.9 297 131.5C296.5 131.2 294.9 132 293.5 133.4C292.1 134.8 291 135.5 291 134.9C291 134.3 290.6 134.2 290 134.5C288.4 135.5 291.3 137.8 293.7 137.4C294.9 137.2 296.1 137.4 296.4 137.9C297.1 138.9 291.2 145 289.6 145C289 145 289.2 144.5 290 143.9C291 143.2 291.1 143 290.2 143.2C289.4 143.4 288.9 143.9 288.9 144.3C289 144.7 289 145.8 289 146.7C289 148.2 289.2 148.3 290 147C290.6 146 291 145.9 291 146.7C291 147.4 291.5 148 292.1 148C292.6 148 292.9 147.6 292.6 147.2C292.4 146.8 292.4 146 292.8 145.5C293.9 144 300 140.8 300 141.7C300.1 142.1 300.8 141.1 301.8 139.5C303.4 136.5 303.6 135.9 303.9 133.9C303.9 133.2 305.1 133 306.5 133.2C307.9 133.5 309 133.3 309 132.8C309 132.4 310.1 132.2 311.4 132.4C313.2 132.7 313.7 132.5 313.4 131.5C313.1 130.7 313.8 129.9 315.1 129.5C316.9 128.9 317.9 129.4 319.6 131.4C321.8 133.9 323.7 135 322.5 133C322.2 132.4 322.4 132 323 132C323.6 132 323.8 131.6 323.5 131C323.2 130.4 323.6 130.3 324.5 130.6C326.8 131.5 326 135.2 323.1 137.2C321.7 138.1 320.3 138.7 319.9 138.4C318.9 137.8 317.9 141 318.7 142.3C319.1 143 318.6 142.9 317.7 142.1C316.7 141.3 316 141.2 316 141.8C316 142.9 319.1 144.2 322.2 144.5C323.1 144.6 323.7 144.3 323.4 143.8C323.1 143.4 325 143 327.7 142.9C331.3 142.9 332 142.6 330.5 142C329 141.3 329.6 141.1 333.1 141.1C336.4 141 338.2 140.4 339.5 139C341.3 137.1 341.2 137 339.2 137C337.9 137 337 136.4 337 135.5C337 134.7 336.5 134 335.9 134C335.3 134 335.5 133.3 336.4 132.5C338.1 130.7 340 130.5 340 132.2C340 132.8 340.3 133 340.6 132.7C341 132.4 342.1 132.5 343.1 133.1C344.4 133.8 345 133.7 345 133C345 132.4 345.5 132.2 346 132.5C346.6 132.8 347.3 132.4 347.6 131.6C347.9 130.7 348.8 130 349.6 130C350.4 130 351 129.6 351 129.1C351 128.5 348.9 128 346.3 127.8C342.5 127.6 341.5 127.1 341.6 125.8C341.7 124.7 341.2 124.4 340.2 124.7C339.3 125.1 338.9 124.9 339.3 124.3C339.8 123.6 339.2 123.4 337.8 123.7C335.9 124.1 335.8 124 337 123.1C338.2 122.2 338 122 335.7 122C334.1 122 333.1 122.4 333.5 123C334.3 124.2 332.7 124.3 331.5 123.1C330.9 122.6 328.7 122 326.5 121.7C324.3 121.3 323.1 121.3 323.9 121.7ZM331.2 133.2C332 135.3 331 137 328.9 137C327.9 137 327 136.3 327 135.5C327 134.7 327.7 134 328.6 134C329.4 134 329.8 133.5 329.5 133C329.2 132.4 329.3 132 329.8 132C330.4 132 331 132.6 331.2 133.2Z",
+p2fb199f0: "M874.401 147.1C874.501 147.8 875.801 148.4 877.301 148.6C879.001 148.8 879.801 148.5 879.401 147.8C879.101 147.3 877.901 147 876.901 147.3C875.901 147.6 874.901 147.4 874.601 146.9C874.401 146.4 874.301 146.5 874.401 147.1Z",
+p30248b40: "M286.3 151.5C284.7 152.6 282.5 154.3 281.5 155.3C279.8 157.1 279.8 157.1 281.5 156.8C282.5 156.6 284.5 155.5 285.8 154.3C287.1 153 288.6 152.3 289 152.5C289.5 152.8 290.1 152.4 290.3 151.8C290.7 150.8 291.1 150.9 291.9 152C292.5 152.9 293 153 293 152.3C293 151.7 293.8 151 294.8 150.8C295.7 150.5 294.9 150.2 292.9 149.9C290.3 149.6 288.4 150 286.3 151.5Z",
+p32aed480: "M295 123C293.1 123.4 292.1 123.8 292.8 123.9C293.4 123.9 294.2 123.9 294.3 123.7C294.5 123.6 295.4 124.1 296.3 124.9C297.8 126.1 298 126 298 124.6C298 123.2 298.4 123.1 300 124C301.6 124.9 302 124.8 302 123.5C302 121.9 300.7 121.8 295 123Z",
+p33c9b880: "M410.201 414.7C409.001 414.9 408.201 415.6 408.501 416.1C408.901 416.6 409.801 416.6 410.901 416C411.901 415.5 413.001 415.4 413.401 415.7C413.701 416 414.001 415.8 414.001 415.2C414.001 414.5 413.701 414.1 413.301 414.1C412.801 414.2 411.501 414.5 410.201 414.7Z",
+p342268f2: "M548.901 162.4C549.801 163.4 549.701 163.9 548.501 164.4C546.501 165.1 546.601 166.7 548.801 167.2C550.501 167.7 550.701 167 550.101 161.7C550.001 161.3 549.501 161 548.901 161C548.101 161 548.101 161.4 548.901 162.4Z",
+p34e60000: "M276 131C274.8 131.8 275 131.9 276.7 131.7C277.9 131.5 279.3 131.1 279.6 130.7C280.7 129.6 277.7 129.9 276 131Z",
+p381e6500: "M809 303.3C809 303.8 809.9 305.5 811.1 307.1C812.2 308.7 812.9 310 812.5 310C812.2 310 812.7 311.1 813.6 312.5C814.4 313.8 814.9 315.3 814.6 315.9C814.3 316.4 814.4 317 814.9 317.2C815.4 317.3 816 318.2 816.2 319C816.4 319.8 817 320.9 817.7 321.5C818.4 322 819 324.6 819.1 327.2C819.3 330.1 819.9 332.1 820.7 332.5C821.5 332.7 821.9 333.4 821.6 333.9C821.3 334.4 821.7 335 822.5 335.4C823.3 335.7 824 336.6 824 337.5C824 339.7 825.8 339.4 828.6 336.7C831.5 334 831.8 331.6 829.1 332.5C827.6 333 827.3 332.6 827.6 330.3C828 328 827.9 327.8 827.1 329.5L826.3 331.5L825.8 329.5C825.6 328.4 825.7 326.5 826.2 325.2C826.6 323.9 826.6 323.1 826.1 323.4C825.6 323.7 824.9 323.3 824.6 322.4C824.2 321.4 824.4 321.1 825.3 321.6C825.9 322 824.9 320.8 823 319.1C821.1 317.3 820.2 316.2 821 316.5C821.8 316.9 821.4 316.2 820.2 315.1C818.9 314 817.7 312.4 817.6 311.6C817.4 310 812 304.2 812 305.6C812 306 811.3 305.5 810.5 304.4C809.7 303.4 809 302.9 809 303.3Z",
+p38ed0800: "M950.601 274.7C950.201 275.6 950.501 276.7 951.201 277.2C952.201 277.8 952.101 278 950.801 278C949.901 278 948.801 278.5 948.401 279.2C947.901 279.9 948.201 280.1 949.101 279.6C949.901 279.2 949.401 279.7 948.001 280.9L945.501 282.9L943.801 280.7C942.301 278.8 942.001 278.8 942.001 280.2C942.001 281.4 941.201 282 939.501 282C936.601 282 936.601 282 938.401 285.4C939.601 287.8 939.901 287.9 941.301 286.5C943.201 284.6 944.001 284.6 944.001 286.4C944.001 287.2 944.501 288.2 945.201 288.6C945.901 289.1 946.001 288.9 945.501 287.9C944.901 286.9 945.201 287 946.601 288.1C947.601 289 949.001 289.5 949.701 289.3C950.301 289.1 951.101 289.4 951.501 289.9C951.801 290.5 952.601 291 953.101 291C954.101 291 953.701 286 952.601 284.1C952.201 283.6 952.801 282.9 953.901 282.5C955.001 282.2 955.701 281.2 955.501 280.2C955.301 279.3 955.101 278.1 955.101 277.7C955.001 277.2 954.601 277.2 954.001 277.5C953.101 278 952.501 276 952.901 273.7C953.101 272.3 951.201 273 950.601 274.7Z",
+p39749580: "M506.1 124.9C505.5 125.8 505.2 125.9 505.6 125.1C506.1 124.2 505.9 123.9 505.2 124.4C504.5 124.8 504 125.9 504 127C504 128.4 504.5 128.7 506.2 128.2C507.8 127.8 508.1 128 507.5 129C506.9 130 507.4 130.2 510.1 129.7C512 129.4 512.9 129.4 512.3 129.6C511.4 130 511.3 130.7 512 132.1C512.8 133.4 512.7 134 512 134C511.4 134 511.2 134.4 511.5 135C511.8 135.5 511.4 136 510.5 136C509.5 136 509 136.7 509.2 137.7C509.4 138.7 508.9 140.1 508 140.8C506.7 142 506.7 142.1 508.3 141.6C509.3 141.3 511.6 140.9 513.3 140.9L516.5 140.8L513.5 139.9C511.2 139.3 511.9 139.2 516 139.5C520.1 139.8 521.1 139.7 520 138.9C518.8 138 518.9 137.9 520.7 138.3C521.9 138.6 523.4 138.2 524.1 137.4C525 136.3 524.9 136 523.6 136C522.7 136 522 135.3 522 134.4C522 133.6 521.6 133.2 521 133.5C520.5 133.8 520 133.7 520 133.1C520 132.6 518.6 132.2 517 132.2C515.3 132.3 513.6 131.9 513.2 131.5C512.8 131.1 513.5 131 514.8 131.3C517.3 131.9 517.5 131.5 515.8 129.4C511.1 123.8 508 122.3 506.1 124.9Z",
+p3c3d9a00: "M1081 363C1081 526.476 847.069 659 558.5 659C269.931 659 36 526.476 36 363C36 199.524 269.931 67 558.5 67C847.069 67 1064 197 1081 363Z",
+p3cb03700: "M463.5 77.1C465.4 77.6 463.4 77.8 458.3 77.5C453.3 77.2 449.8 77.5 449.4 78.1C449.1 78.7 447.5 78.8 445.8 78.5C443.7 78 443 78.1 443.4 78.9C443.9 79.6 443.1 79.8 440.9 79.3C438.7 78.9 437.9 79 438.4 79.8C438.8 80.5 437.9 80.7 435.5 80.3C433.2 79.9 432 80.1 432 80.9C432 81.5 431.5 82 430.9 82C430.4 82 430.1 81.6 430.4 81.1C430.7 80.6 429.1 80.7 426.7 81.2C424.4 81.8 421.7 82.2 420.8 82.2C419.9 82.2 418.9 82.8 418.6 83.7C418.2 84.6 417.3 85 416.4 84.6C415.5 84.3 413.3 84.7 411.5 85.6C409.6 86.5 405.6 87.2 402.6 87.3C399.5 87.4 397 87.9 397 88.4C397 88.8 396.1 89 395 88.7C393.9 88.4 393 88.6 393 89.2C393 89.8 392.1 90 391 89.7C389.9 89.4 389.2 89.6 389.6 90.1C389.9 90.6 389.6 91 389.1 91C388.5 91 388 90.4 388 89.7C387.9 89.1 387.1 89.6 386 90.9C384.9 92.2 382.9 93.3 381.6 93.4C380.3 93.4 379.4 93.9 379.7 94.4C380.1 94.9 379.1 95 377.6 94.6C376 94.2 375 94.4 375 95.1C375 95.7 374.3 96 373.5 95.6C372.2 95.1 371.6 96.1 371.9 98.2C371.9 98.6 371.2 98.6 370.3 98.3C369.2 97.9 368.9 98 369.4 98.8C370.2 100.1 365.7 101.6 364.1 100.5C363.5 100.2 361.2 100.5 359 101.1C356.1 102 355.3 102.6 356.2 103.2C357.1 103.9 356.6 104 354.7 103.7C353 103.4 352.1 103.7 352.3 104.3C352.8 105.8 358 107.1 358 105.8C358 105.2 358.7 105 359.5 105.4C360.3 105.7 361 105.5 361 104.9C361 104.2 362 104 363.6 104.4C365.4 104.9 366 104.7 365.4 103.9C364.9 103.1 365.5 102.9 367.3 103.2C368.9 103.5 369.7 103.3 369.3 102.7C368.9 102.1 370.2 101.9 373.1 102.3C377.8 102.9 380 105 380 108.7C380 110.4 380.6 111 382.1 111C383.2 111 383.8 110.5 383.5 110C383.2 109.4 383.6 109 384.6 109C385.8 109 386.1 109.6 385.7 111.1C385.4 112.3 385.7 113.3 386.5 113.6C387.5 114 387.4 114.6 385.9 116.1C384.8 117.2 383.4 118 382.7 117.7C382.1 117.5 380.9 117.8 380.2 118.4C374.9 122.7 373.6 125 376.6 125C377.5 125 378 125.5 377.8 126.2C377.6 126.8 378.4 128.4 379.5 129.6C382 132.2 387 134.5 387 133C387 132.4 387.7 132 388.6 132C389.4 132 389.9 132.3 389.7 132.7C389.4 133.2 390.6 133.5 392.3 133.5C395.2 133.5 400.4 129.8 401.2 127.2C401.3 126.8 402.3 125.6 403.3 124.5C404.4 123.4 404.9 123.2 404.5 124C403.6 125.5 406.3 123.5 410.6 119.2C411.9 118 413.6 117 414.5 117C415.3 117 416 116.6 416 116.1C416 115.6 416.9 115.4 417.9 115.7C418.9 116 420.9 115.5 422.2 114.6C423.6 113.7 425 113.3 425.5 113.7C425.9 114.2 426 114 425.7 113.4C425 112.2 436.6 106.3 437.6 107.3C438 107.7 438.9 107.5 439.6 106.9C440.4 106.3 441.7 106 442.5 106.4C443.4 106.7 443.8 106.6 443.5 106C442.9 105.1 443.9 104.8 448.8 104.6C449.7 104.5 450.8 104.1 451.1 103.6C451.5 103.1 453.2 102.7 454.9 102.6C457.3 102.5 457.9 102.1 457.4 100.7C457 99.5 457.4 99 458.7 98.9C459.7 98.8 461.6 98.7 463 98.7C464.4 98.6 465.5 98 465.5 97.3C465.5 96.6 466.1 95.5 466.8 94.8C467.4 94.2 468 93 468 92.3C468 91.6 468.5 91 469 91C469.6 91 470 91.5 470 92.2C470 92.8 470.9 92.5 472 91.5C473.1 90.5 474 90.1 474 90.6C474 91.1 474.4 90.9 474.9 90.1C475.5 89.3 475.5 87.7 474.9 86.3C474.2 84.3 474.4 84 476.3 84C477.5 84 478.1 83.6 477.5 83.2C475.3 81.6 475.9 79.7 478.5 80.2C480.3 80.6 481.4 80.2 482 79C483 77.1 481.7 76.8 479.2 78.3C478.5 78.8 477.8 78.6 477.5 77.8C477.1 76.9 474.5 76.5 468.7 76.4C462.9 76.4 461.4 76.6 463.5 77.1Z",
+p3d523500: "M580.6 77.2C580.9 77.6 582.1 78 583.2 78C584.4 78 585 77.7 584.6 77.3C583.6 76.3 580 76.2 580.6 77.2Z",
+p3e02a100: "M587.8 95.6C587.4 95.9 583.9 96.4 579.9 96.6C573 97 569.4 97.9 573.6 98.1C574.8 98.1 574.4 98.5 572.5 99.1C570.5 99.7 569.3 99.6 568.8 98.7C568.2 97.8 568 97.9 568 99C568 100.3 567.9 100.3 567 99C566.2 97.7 566 97.8 566 99.2C566 100.2 565.5 101 564.9 101C564.4 101 564.2 101.5 564.6 102.2C565 102.8 564.9 103 564.3 102.7C563.7 102.3 562.7 102.7 562 103.5C561.3 104.3 560.1 105 559.3 105C558.6 105 557.7 105.6 557.4 106.3C557.2 107 555.8 107.7 554.3 107.8C552.9 107.9 551.2 108.7 550.5 109.6C549.9 110.5 548.5 111 547.4 110.8C546.4 110.6 545 111 544.5 111.7C543.9 112.5 542 113.1 540.3 113.3C537.1 113.5 535.9 114.5 538 115.2C538.5 115.3 539.1 116.7 539.2 118.1C539.4 120 539.9 120.6 540.9 120.2C541.8 119.9 542.1 120.1 541.6 120.8C541.1 121.6 541.8 122 543.7 122C545.9 122 546.2 121.8 545 120.9C543.8 120.1 544.3 120 546.8 120.3C548.5 120.5 550 120.3 550 119.8C550 119.4 551.1 119 552.5 119C553.9 119 555 119.5 555 120.1C555 120.6 555.5 120.8 556 120.5C556.6 120.2 557 120.7 557 121.6C557 122.6 557.3 123 557.6 122.7C558.4 121.9 562.1 126 561.6 126.9C561.3 127.3 562 127.6 563 127.6C564 127.6 564.7 127.3 564.4 126.9C563.9 126 568.8 124.8 570 125.5C570.9 126 571.5 124 571.1 121.7C571.1 121.3 571.7 121 572.6 121C573.4 121 573.8 120.5 573.5 120C573.1 119.3 573.8 119.2 575.6 119.6C578.1 120.2 578.2 120.1 576.9 118.8C576.2 117.9 575 117.4 574.4 117.7C573 118.2 571.8 114.2 573.1 113.4C573.6 113.1 573.7 112.4 573.4 111.8C573 111.1 573.2 111 573.8 111.4C574.5 111.8 575 111.7 575 111.1C575 110.6 576.7 109.6 578.8 108.9C580.8 108.3 583.3 106.9 584.3 105.9C585.4 104.7 587.5 104 590 104C593.6 104 594 104.3 594 106.4C594 108.8 591.7 110.5 589.9 109.4C589.4 109.1 589 109.3 589 109.9C589 110.4 588.2 111.1 587.2 111.4C585.1 112.1 584.7 114.9 586.4 116.5C587 117.1 589.8 117.7 592.5 117.8C596.1 118 597.1 117.8 596 117C594.9 116.3 595.9 116.1 599.5 116.1C604.2 116.3 604.3 116.3 601 117C597.6 117.7 597.6 117.7 602.3 117.9C604.9 117.9 607 118.4 607 119C607 119.5 606.4 120 605.8 120C604.9 120 605 120.4 606 121C607.1 121.7 606.4 122 603.5 122C600.6 122 599.9 121.7 601 121C602.1 120.3 601.4 120 598.3 120C595.1 120 594 120.4 594 121.5C594 122.3 594.5 123 595.2 123C596 123 595.8 123.6 594.7 124.7C593.3 126.2 592.7 126.2 590.5 125C588.6 124 587.7 123.9 586.8 124.8C586 125.6 586.3 125.8 588.1 125.4C590.2 125 590.2 125.1 587.8 126.1C586.3 126.7 585.3 127.7 585.6 128.4C586.4 130.4 581.8 131.9 577.2 131C574.6 130.6 573 130.6 573 131.3C573 131.8 571.9 132 570.5 131.8C569.1 131.5 568 131.7 568 132.3C568 132.8 566.8 133 565.3 132.6C560.6 131.5 557.1 131.4 557.6 132.2C557.9 132.6 557.6 133 557.1 133C556.5 133 556 132.1 556 130.9C556 129.6 556.4 129.1 557.2 129.6C557.9 130 558 129.9 557.6 129.1C557.2 128.5 556.4 128.2 555.9 128.5C555.4 128.9 555 128.6 555 128.1C555 127.5 554.2 127 553.3 127C551.6 126.9 551.6 126.9 553.3 125.9C555.1 124.8 555.6 123 554.1 123C553.6 123 552.5 123.7 551.7 124.5C550.9 125.3 550 125.6 549.7 125.3C548.5 124.2 546 125.9 546.6 127.5C546.9 128.3 547.7 128.7 548.3 128.3C549 127.9 549.1 128.3 548.7 129.4C548.3 130.4 548 131.6 548 132.2C548 132.8 547.3 133 546.5 132.6C545.7 132.3 545 132.5 545 133C545 133.6 543.6 134 542 134C538.2 134 533.5 136.3 532.6 138.6C532.2 139.6 531.3 140 530 139.7C528.7 139.4 528.2 139.6 528.7 140.3C529.1 141 528.7 141.1 527.6 140.7C526.3 140.2 525.9 140.4 526.3 141.4C527 143.1 524.7 144.2 522.3 143.3C521.3 142.9 520.9 143.1 521.3 143.7C521.7 144.3 521.3 145.1 520.4 145.4C518 146.3 517.3 146.1 519 145C519.9 144.4 520 144 519.3 144C518.7 144 517.8 144.4 517.5 145C517.2 145.5 515.4 146 513.7 146.1C511 146.1 510.8 146.3 512.5 147C513.6 147.5 514.1 147.9 513.7 147.9C513.3 148 514.3 149.3 516 151C518.9 153.9 520 155.7 518 154.5C517.4 154.2 517.3 154.6 517.6 155.5C518.5 157.7 515.2 161 512.3 161C510.9 161 510.2 160.6 510.5 160C510.9 159.4 509.6 159 507.3 159C504.4 159 503.9 159.3 505 160.1C506.1 160.8 504.7 161 500 160.8C493.9 160.5 493.5 160.6 493.5 162.7C493.5 163.8 493.8 164.6 494.3 164.3C495.5 163.5 495.1 166.8 493.7 168.2C491.5 170.4 491.2 172.5 492.7 174.5C493.8 175.9 494.4 176.1 494.7 175.2C495.2 173.9 497.8 173.6 500.4 174.6C501.3 174.9 501.8 175.5 501.5 175.9C501.3 176.3 501.7 176.7 502.5 176.7C503.3 176.7 503.6 176.2 503.3 175.7C502.9 175.1 503.6 174.9 504.8 175.2C506 175.6 507 175.4 507 174.9C507 174.4 508.1 174 509.5 174C510.9 174 512.8 173.6 513.8 173.1C514.7 172.6 516.3 171.9 517.3 171.6C518.2 171.3 519 170.1 519 169C519 167.9 519.5 167 520.1 167C520.6 167 520.8 166.5 520.4 165.8C520 165.2 520.1 165 520.7 165.3C521.9 166.1 524.3 163.7 523.4 162.7C523 162.4 524 162.2 525.6 162.3C527.9 162.5 528.6 162 528.8 160.2C529 159 529.6 158.2 530.1 158.5C530.6 158.9 531 158.6 531 158C531 157.3 532.9 157 535.8 157C541.1 157.2 542.5 156.9 545.7 155.2C549.1 153.3 550.2 153.7 555 158C557.5 160.3 560.2 161.9 561 161.7C561.9 161.5 563.1 161.9 563.8 162.7C564.5 163.4 566.2 164 567.6 164C569 164 569.9 164.4 569.6 164.9C569.3 165.4 569.7 166 570.5 166.4C571.9 166.9 572.1 166.3 572 163.2C571.9 162.8 570.8 162.7 569.3 162.8C567.7 163.1 567 162.8 567.4 162.1C567.8 161.5 567.5 161.2 566.7 161.6C565.9 161.9 564.9 161.6 564.4 160.9C563.9 160.1 564.1 159.9 565 160.5C565.9 161 566.1 160.9 565.6 160.1C565.2 159.5 564.4 159.3 563.8 159.6C563 160.1 562.9 159.7 563.3 158.6C563.7 157.6 563.6 157.1 563 157.5C560.3 159.1 557.7 152.5 560.4 150.8C562.3 149.5 564 149.9 564 151.6C564 152.5 564.9 153.4 566 153.7C567.1 154 568 154.6 568 155.1C568 155.6 568.5 156 569 156C569.6 156 571.9 156.9 574.1 157.9C576.2 159 577.8 159.5 577.5 159C577.2 158.6 577.9 158.4 579 158.7C580.1 159 580.8 159.6 580.5 160C580.2 160.4 580.7 161.1 581.6 161.4C582.4 161.7 582.8 162.4 582.5 163C582.2 163.5 582.4 164 583 164C583.6 164 583.9 164.4 583.6 164.9C583.3 165.4 583.7 166 584.5 166.4C585.3 166.7 586 168 586 169.2C586 170.9 586.3 171.1 586.9 170.1C587.9 168.6 590 169.4 590 171.3C590 172 589.6 171.9 589 171C588.5 170.2 588 169.9 588 170.5C588 173.6 591.5 174.8 594.1 172.4C595.1 171.5 596.5 171.1 597.2 171.5C597.9 171.8 597.6 171.5 596.6 170.6C595.6 169.8 594.4 169.3 593.9 169.5C593.5 169.8 592.8 169.5 592.4 168.9C591.9 168.1 592.2 167.9 593.1 168.4C593.9 168.8 593.7 168.5 592.8 167.7C590.3 165.7 590.6 164.9 593.4 166C595.2 166.6 596.2 166.5 597 165.4C598 164.3 598 164 597 164C596.2 164 596 163.7 596.3 163.4C596.7 163 597.6 163.2 598.3 163.9C599.1 164.5 600.9 165.1 602.4 165.2C604.3 165.4 605 166 605 167.6C605 170.6 607 176 608.2 176C608.7 176 608.9 175.6 608.6 175.1C608.3 174.7 609.2 174.5 610.5 174.8C611.9 175 612.7 175.6 612.4 176.1C612.1 176.6 612.6 176.7 613.4 176.4C614.4 176 615 176.3 615 177.1C615 177.9 615.6 177.6 616.4 176.5C617.6 174.8 618.2 174.7 620.4 175.8C621.8 176.4 623 177.4 623 178C623 178.6 623.4 178.9 623.9 178.5C624.5 178.2 627.3 177.7 630.3 177.4C635.4 176.9 635.8 177 636.4 179.2C636.7 180.5 636.9 182.4 636.9 183.5C636.8 184.8 636.5 184.5 636 182.5C635.3 179.6 635.2 179.7 635.1 183.5C635 187.5 632.5 191 629.7 191C628.9 191 629 191.4 630 192.1C631.1 192.9 630.7 193 628.5 192.4C626.9 192 624 191.6 622.2 191.6C620.2 191.6 619.4 191.3 620.2 190.8C621.2 190.2 621.1 190 619.8 190C618.9 190 617.5 190.7 616.6 191.5C615.8 192.3 614.3 193 613.3 192.9C611.7 192.9 611.7 192.8 613.5 192.1C615.1 191.4 614.8 191.2 611.5 190.6C609.3 190.2 605.7 189.8 603.6 189.7C601.4 189.5 599.5 188.9 599.2 188.2C599 187.5 597.1 187 594.9 187C592.5 187 591.1 186.6 591.5 186C592.5 184.4 590.3 184.8 588.6 186.6C587.4 187.8 587 187.8 586.9 186.8C586.9 186.1 586.5 186.5 586 187.7C585.5 189 584.5 190 583.8 190.1C583.1 190.1 581.3 190.3 579.8 190.4C578.4 190.5 577.4 190.1 577.7 189.6C578.1 189.1 576.7 189 574.4 189.4C572 189.8 571 189.7 571.8 189.2C572.9 188.5 572.5 188.1 570.6 187.6C569.2 187.3 568 186.6 568 186.2C568 185.7 566.6 185.6 564.9 185.8C562.5 186.1 561.9 185.9 562.5 185C563.1 184.1 562.5 184 560.3 184.4C558.1 184.9 557.1 184.7 556.7 183.6C556.3 182.7 555.3 182.4 554.2 182.7C551.7 183.3 550.2 181.1 552.2 179.6C553.8 178.4 555.4 173.6 553.9 174.6C553.4 174.9 553 174.8 553 174.3C553 173.9 551.9 173.5 550.5 173.5C549.1 173.5 548 173.9 548 174.3C548 174.8 545.7 175 543 174.8C540.2 174.7 537.8 174.9 537.6 175.5C537.3 176.2 536.9 176.2 536.3 175.5C535.1 174.1 533 173.8 533 175.1C533 175.8 532 176 530.3 175.6C528.9 175.2 527.4 175.3 527.1 175.8C526.8 176.3 523.3 177.7 519.3 178.8C511.6 181.2 504 181.7 504 179.9C504 179.1 503.4 179.2 502.3 180.1C500.9 181.3 500.7 181.3 501.4 180C501.8 179.2 501.5 179.4 500.6 180.4C499.8 181.4 499.3 182.7 499.7 183.3C500 183.9 499.8 184 499.2 183.6C498.5 183.2 498 183.4 498 184C498 184.7 497.3 184.9 496.4 184.6C495.4 184.2 495.1 184.4 495.6 185.2C496.1 186 495.8 186.1 494.6 185.7C493.7 185.3 493.2 185.4 493.5 185.9C493.8 186.4 493.1 187.1 492 187.5C490.9 187.8 490.1 188.4 490.1 188.8C490.5 191.3 489.8 194 489 193.5C488.5 193.2 488.3 193.5 488.6 194.3C489.2 196 484 200.3 480 201.5C476.7 202.5 473 205.9 473 208.1C473 210.8 471.9 213 470.9 212.4C470.4 212.1 470.1 212.2 470.2 212.7C470.3 213.1 469.8 214.6 469.1 215.9C467.9 218 468 218.5 469.2 219.4C470 220 470.7 221.2 470.8 222C470.9 222.8 471.2 224.8 471.6 226.4C472.1 228.6 472 229.1 471 228.5C470.1 228 469.9 228.1 470.4 228.9C471.2 230.2 470.2 234.1 469.2 233.7C468.8 233.6 468.5 233.9 468.5 234.5C468.5 235 468.9 235.4 469.3 235.2C469.8 235.1 469.9 235.7 469.6 236.7C469.1 238.6 471.2 242.2 472.6 241.9C474.7 241.5 476.1 242.1 475.5 243C475 243.9 476.2 244.4 478.1 244.2C478.5 244.1 479.3 245.4 480 247.1C480.7 248.7 481.7 250.3 482.3 250.7C482.9 251.1 483 250.8 482.6 249.9C482.1 249.1 482.4 249.1 483.2 250.1C483.9 251 485.1 251.5 485.9 251.2C486.7 251 487 251.2 486.7 251.8C486.3 252.3 487.2 253 488.7 253.3C491.3 253.8 491.3 253.7 489.5 252.4C488.5 251.6 488.1 251 488.8 251C489.4 251 490.6 252 491.5 253.2C492.3 254.5 493.3 255.4 493.5 255.2C494.6 254.7 496.1 255 495.7 255.7C495.4 256.2 496.9 256.5 499 256.5C501.1 256.5 502.6 256.2 502.4 255.9C501.8 254.8 504.6 254.1 507.2 254.7C509 255.1 509.2 255 508 254.1C506.8 253.3 507.2 253 509.8 253C511.6 253 512.9 253.4 512.6 253.8C512.3 254.3 513.6 254.6 515.5 254.6C517.3 254.5 518.5 254.1 518.2 253.6C517.9 253.1 518.4 253 519.4 253.3C520.3 253.7 520.9 253.6 520.6 253.1C520.3 252.6 520.7 251.9 521.6 251.6C524 250.7 524.7 250.9 523 252.1C521.8 253 521.8 253.1 523.3 252.6C524.3 252.3 525.6 252 526.1 252C526.7 252 526.9 251.6 526.6 251.2C526.3 250.7 528.7 250.4 532 250.4C535.3 250.5 537.8 250.9 537.7 251.5C537.6 252 538.1 252.4 538.8 252.3C539.4 252.1 540 252.6 540 253.3C540 254.1 541.4 254.4 544.6 254.2C547.9 253.9 549.6 254.3 551 255.5C552.1 256.5 552.7 257.6 552.5 258C552.2 258.5 552.6 259 553.2 259.3C554.2 259.6 553.9 260.9 552.3 264.2C550.3 268.3 550.3 269 551.6 270.6C552.5 271.7 552.8 271.9 552.4 271.1C551.9 270.2 552.1 269.9 552.8 270.4C553.5 270.8 554 271.7 554 272.5C554 273.3 554.5 274.2 555.2 274.6C555.9 275.1 556.1 274.8 555.6 273.9C555.2 273.1 556 273.8 557.4 275.3C558.9 276.9 559.8 278.6 559.5 279.1C559.1 279.6 559.4 280 560 280C561.4 280 563 284.4 563.2 289.1C563.3 291.2 563.7 292.7 564.2 292.4C564.6 292.1 565 293.1 565 294.6C565 296.1 564.7 297.1 564.4 296.7C563.4 295.7 561.2 298.4 561.8 299.9C562.1 300.8 561.9 301.1 561.3 300.7C560.6 300.2 560.4 300.8 560.8 302.2C561.1 303.6 560.9 304.1 560.2 303.6C559.4 303.1 559.2 303.4 559.6 304.4C559.9 305.3 559.8 306 559.4 306C558.9 306 558.5 307.3 558.5 308.9C558.5 310.5 558.7 311.7 558.9 311.4C559.3 311.1 564 316.9 564 317.8C564 318 563.4 317.8 562.8 317.5C562.1 317.1 562.3 317.5 563.4 318.4C564.4 319.2 564.9 320.4 564.4 321.1C564 321.9 564.1 322.1 564.8 321.6C566.1 320.8 566.3 321.7 566.2 327.5C566.1 331.1 566.2 331.2 567 329C567.8 326.9 567.9 327.1 567.5 330.3C567.3 332.4 567.5 333.8 568 333.5C568.6 333.2 568.7 333.5 568.5 334.2C568.2 335 568.8 336.5 569.9 337.7C571 338.8 571.6 340.1 571.3 340.4C570.9 340.7 571.2 341 571.9 341C572.6 341 572.9 341.4 572.6 341.9C572.2 342.4 572.4 343 572.9 343.2C574.2 343.7 575.3 348 574.1 348C573.6 348 573.9 349.3 574.8 350.9C575.8 352.7 576.9 353.5 577.5 353C578.9 351.9 587.4 350.6 586.7 351.6C586.1 352.6 591.3 352.9 592 351.9C592.3 351.5 593.6 351 594.9 350.9C596.3 350.7 598.7 349.3 600.4 347.8C602 346.3 603.8 345.2 604.4 345.3C605 345.4 605.4 344.7 605.2 343.7C605 342.8 605.3 342 605.7 342.1C607.7 342.4 609.1 341.9 608.5 341C608.2 340.4 608.6 340 609.5 340C610.4 340 610.9 339.6 610.6 339.2C609.7 337.8 613.2 331.9 614.6 332.4C615.4 332.7 616 332.5 616 331.9C616 331.3 616.7 331 617.5 331.4C618.3 331.7 619 331.5 619 330.9C619 330.3 619.4 330.1 620 330.5C620.5 330.8 620.8 329.8 620.7 328C620.6 326.4 620.2 325 619.8 325C618.5 325 618.9 322 620.6 319.5C621.5 318.1 622.6 317.3 623.1 317.6C624.1 318.2 628.9 315.4 630.8 313.1C631.8 311.8 632.2 311.8 632.9 312.8C633.6 313.9 633.8 313.8 634.3 312.6C634.7 311.7 635.5 311.1 636.1 311.2C636.9 311.4 637.5 309.8 637.8 307C638 304.5 638.6 302.3 639.1 302C639.5 301.7 639.3 300.2 638.6 298.8C637.8 297.3 637.4 295.9 637.8 295.6C638.1 295.3 637.8 295 637.2 295C635.6 295 635.7 292.3 637.3 291.7C638.2 291.4 638.1 290.9 637 289.5C636 288.2 635.9 287.9 636.8 288.4C637.9 289.1 637.9 288.8 636.9 287.2C635.8 285.4 635.9 284.8 637.4 283.1C638.5 281.9 639.9 281 640.7 281C641.5 281 641.9 280.7 641.7 280.2C641.4 279.8 641.8 278.9 642.6 278.2C643.4 277.5 644 277.2 644 277.7C644 278.1 644.7 277.5 645.6 276.4C646.4 275.4 646.9 275.2 646.5 276C646.1 276.8 647.1 276.1 648.7 274.5C650.3 272.8 652.5 271.3 653.6 271.2C654.6 271 655.8 270.4 656.1 269.8C656.4 269.3 657.1 269 657.6 269.1C659.7 269.5 661.1 268.8 664.5 265.9C666.4 264.2 668 263.1 668 263.4C668 263.8 669.2 262.7 670.8 261.1C675.3 256.3 677.9 253 677.2 253C676.9 253 677.5 252.4 678.5 251.6C680.3 250.3 680.3 250.2 678.1 249C676.6 248.2 676 248.2 676.4 248.9C676.8 249.5 676.4 250 675.5 250C674.6 250 674.1 249.6 674.5 249.1C675.3 247.8 666.7 248.2 665.8 249.5C665.3 250.1 665 250.1 665 249.4C665 248.8 663.4 248.4 661.3 248.5C656.8 248.7 654 246.7 654 243.2C654 240.1 646.5 232.6 644.3 233.4C643.3 233.8 643 233.4 643.2 231.7C643.4 230.5 642.8 228.9 642 228.2C640.9 227.2 640.9 227.1 641.9 227.6C642.8 228.1 643.1 227.9 642.6 227.1C642.2 226.5 641.5 226.2 641 226.5C640 227.1 637.8 224.5 638.7 223.7C639 223.3 638.9 223 638.3 223C637.7 223 637 221.1 636.7 218.8C636.4 216.4 635.8 214.4 635.3 214.3C633 213.4 632 212.1 631.8 209.6C631.7 208.1 630.7 206.4 629.7 205.9C628.8 205.3 628.2 204.5 628.5 204C629.4 202.5 627.1 198.9 625.7 199.6C625 200 624.8 200 625.2 199.5C625.6 199.1 625.5 198.1 624.8 197.3C624.2 196.6 624 195.6 624.4 195.3C624.8 194.9 625.5 195.2 626 196C626.6 196.8 627 197 627 196.5C627 195.9 627.5 196.3 628.1 197.2C628.6 198.2 630.2 199 631.5 199C633 199 634.1 199.7 634.5 201C634.9 202.1 635.6 202.7 636.2 202.4C636.9 202 637 202.2 636.6 202.8C636.2 203.5 637.6 205.6 639.7 207.6C641.8 209.7 643.4 211.7 643.3 212.2C643.1 212.6 643.5 213 644.1 213C644.7 213 645 214 644.8 215.2C644.6 216.5 645.2 218.1 646 218.8C647.1 219.8 647.1 219.9 646.1 219.4C645.2 218.9 644.9 219.1 645.4 219.9C645.8 220.5 646.5 220.8 646.9 220.6C647.9 219.9 652.4 225 651.6 225.8C651.2 226.1 652 227.5 653.2 228.8C654.8 230.5 655.1 231.4 654.3 231.7C653.3 232.1 653.3 232.4 654.3 233.5C655 234.2 655.7 234.6 656 234.5C656.3 234.3 656.5 235.8 656.3 237.8C656.1 241 656.2 241.2 656.9 239C657.7 236.8 657.8 236.8 657.9 238.5C658 240.4 658.6 240.6 666.4 240.5C671 240.5 674.6 240.2 674.4 239.8C673.8 238.9 680.6 237.6 682.4 238.3C683.2 238.6 684.1 238.2 684.4 237.3C684.8 236.5 685.7 236 686.5 236.4C687.3 236.7 688 236.5 688 236C688 235.4 688.7 235 689.5 235C690.3 235 691 235.4 691 236C691 237.6 693.7 237.2 694.4 235.5C694.7 234.6 696.2 234 698 234C699.8 234 700.9 233.6 700.5 233C700.2 232.5 701.1 231.8 702.5 231.4C703.9 231.1 705 230.4 705 229.9C705 229.4 705.9 229 706.9 229C709.8 229 710.4 227.3 708 226C706.9 225.4 706.2 224.5 706.5 224C706.8 223.4 706.5 223.3 705.7 223.5C704.2 224.1 698.7 220.3 699.4 219.1C699.7 218.7 699 217.9 698 217.2C696.6 216.3 696.1 216.4 695.6 217.5C695.3 218.5 693.6 218.8 690 218.7C684.5 218.4 682.7 216.9 683.6 213.5C684.1 211.6 684 211.6 682.6 213.4C681.2 215.1 678.4 214.8 679.5 213C680.3 211.6 678.1 207.8 676.9 208.5C676.4 208.9 676.1 208.6 676.2 207.8C676.4 207.1 676 206.6 675.4 206.7C674.7 206.8 674.4 206.1 674.7 204.7C675.1 202.9 675 202.7 674 204C673 205.3 672.9 205.2 673.4 203.7C673.7 202.7 674 201.5 674 201C674 198.9 679.9 200.8 683 203.9C684.9 205.8 685.6 206.7 684.5 205.9C682.7 204.6 682.6 204.6 683.8 206.2C684.6 207.1 685.8 207.6 686.5 207.4C687.2 207.1 688.6 208 689.5 209.4C690.5 210.9 691.7 211.7 692.7 211.3C693.5 211 694.6 211.3 695.1 212.1C695.7 213.2 696.2 213.2 697.2 212.2C698.6 210.8 702.4 210.5 701.5 211.9C701.2 212.4 701.4 213.1 702 213.5C702.6 213.9 702.8 214.6 702.4 215.1C702.1 215.6 702.2 216 702.7 215.8C704.2 215.5 712 218.1 712 218.9C712 219.4 712.6 219.8 713.3 219.7C717.1 219.6 720.1 220.1 719.6 220.8C719.3 221.3 720.4 221.4 722.1 221.2C723.7 221 725 221.2 725 221.8C725 222.4 725.9 222.6 727 222.3C728.1 222 729 222.2 729 222.8C729 223.3 729.6 223.7 730.4 223.6C731.2 223.6 731.9 223.9 731.9 224.4C731.8 224.9 732.5 225.7 733.4 226.2C734.3 226.7 734.7 227.7 734.4 228.3C734 229 734 229.2 734.5 228.8C734.9 228.4 735.9 228.8 736.7 229.8C737.6 230.8 737.8 230.9 737.4 230C736.7 228.7 736.8 228.7 738.6 230C742.3 232.9 743.1 234 742.4 235.1C742 235.9 741.5 235.8 740.8 234.9C740 233.8 739.9 233.8 740.3 235C740.5 235.8 741.9 236.9 743.4 237.5C745.7 238.3 746.4 238.1 747.6 236.5C748.9 234.8 749.2 234.7 750 236C751.2 237.8 751.3 244.3 750.2 243.6C749.8 243.4 749.4 244 749.4 245C749.4 246 749.8 246.6 750.3 246.3C750.8 246 751.1 247.5 750.8 249.8C750.6 252.1 750.9 253.6 751.4 253.3C751.9 252.9 752.1 253.4 751.7 254.3C751.4 255.3 751.5 256 752.1 256C752.7 256 752.8 256.4 752.5 257C752.2 257.5 752.4 258 753.1 258C753.8 258 754.1 259.3 753.8 261.4C753.6 263.3 753.7 264.7 754.1 264.5C755 263.9 757.3 271.6 756.6 272.9C756.2 273.5 756.4 274 757 274C757.6 274 757.9 274.4 757.5 274.9C757.2 275.5 757.9 275.7 759.2 275.5C760.5 275.2 761.6 274.6 761.8 274C762 273.4 762.6 273.2 763.1 273.6C763.6 273.9 764.4 273 765 271.6C765.5 270.2 766.2 269 766.5 269C766.9 269 766.8 269.6 766.4 270.2C765.9 271.2 766 271.2 767.1 270.2C767.9 269.5 768.3 267.4 768.1 265.2C767.8 260.4 769.7 258.6 774.5 259.2C776.8 259.5 778.1 259.1 778.5 258.2C778.8 257.3 779.8 257 781 257.3C782.3 257.6 782.8 257.4 782.3 256.7C781.9 256.1 782.5 255.9 783.8 256.2C785.2 256.6 785.8 256.4 785.4 255.8C784.9 255.1 785.6 254.9 787.3 255.2C788.9 255.5 789.7 255.3 789.3 254.7C788.9 254.1 789.5 253.9 790.8 254.2C792 254.6 792.8 254.5 792.5 254C792.2 253.6 794.7 253.2 798 253.2C801.3 253.2 803.8 253.6 803.5 254C803.2 254.5 803.8 254.7 804.7 254.5C807.2 254.1 809 255.8 809 258.7C809 260 809.4 260.8 810 260.5C810.6 260.2 810.7 260.6 810.4 261.4C810 262.4 810.5 263.2 811.5 263.6C812.4 264 812.9 264.8 812.6 265.5C812.3 266.3 812.8 267.1 813.6 267.4C815.3 268.1 815.5 272.6 813.8 273.3C812.8 273.7 812.8 273.9 813.8 273.9C814.5 274 814.9 274.4 814.6 274.8C814.3 275.3 815.4 275.7 817.1 275.7C819.1 275.7 819.7 275.4 818.8 274.8C817.9 274.2 818.1 274 819.5 274.2C820.7 274.4 821.6 275.4 821.8 276.8C822 278 822.6 279 823.2 279C823.8 279 824 280.5 823.8 282.5C823.6 284.4 823.9 286.1 824.5 286.3C825.1 286.6 824.7 287.6 823.7 288.8C822.3 290.3 822.2 290.9 823.2 291.3C824 291.6 823.8 291.9 822.7 291.9C821.4 292 821 292.5 821.4 293.7C821.7 294.7 821.6 296.1 821.1 296.9C820.5 297.8 820.7 298.8 821.6 299.7C822.4 300.5 822.7 301.6 822.4 302.2C822 302.9 822.2 303 822.8 302.6C823.5 302.2 823.9 300.8 823.8 299.5C823.7 298.2 823.2 297.4 822.8 297.6C821.3 298.6 822 296.7 824.3 293.6C827.8 288.9 828.5 287.5 827 288.5C826.1 289 825.9 288.9 826.4 288.2C827.4 286.5 831 286.7 831 288.5C831 289.3 830.9 290.3 830.8 290.6C830.6 290.9 831.8 291.9 833.3 292.7C835.2 293.6 836 294.8 835.8 295.8C835.5 296.7 836.2 298.4 837.3 299.5C838.4 300.6 838.9 300.8 838.5 300C837.7 298.7 837.8 298.7 839.4 299.9C840.3 300.7 840.8 302 840.5 302.8C840.1 304 841 304.1 846.7 303.5C850.5 303.1 854 302.3 854.5 301.8C855.2 301 855.1 300.9 854.3 301.4C853.4 301.9 853 301.4 853 300.1C853 298.9 853.5 298 854 298C854.6 298 855 297.3 855 296.4C855 295.6 854.5 295.2 853.9 295.6C853.2 296 853 295.4 853.2 294.2C853.4 293 852.6 291.4 851.5 290.5C850.4 289.6 850.2 289.1 851 289.5C851.8 289.9 851.6 289.4 850.5 288.3C847.8 285.9 847.6 278.4 850.2 278.6C851.2 278.7 851.7 278.4 851.4 277.9C850.7 276.7 856.7 276.8 859 278C860 278.5 861.1 280.2 861.5 281.7C862.1 284.4 862.2 284.4 863.6 282.5C864.5 281.3 865.3 280.9 865.8 281.5C866.2 282.1 867.8 282.7 869.3 282.8C870.9 282.9 872.6 283.3 873.2 283.6C873.8 284 877 284.5 880.3 284.7C883.7 284.9 886.6 285.2 886.9 285.2C889.3 285.4 892 284.9 891.7 284.2C891.4 283.8 892.2 282.6 893.3 281.5C894.4 280.4 894.9 280.2 894.5 281C893.9 282.1 894.2 282 895.7 280.7C896.8 279.8 897.9 279.2 898.1 279.5C898.4 279.7 899.1 279 899.8 278C900.5 276.9 900.7 276 900.3 276.1C898.3 276.4 897.3 275.9 897.3 274.5C897.3 273.7 898 273 898.7 273C899.5 273 899.8 272.5 899.5 272C899.1 271.4 898.3 271.3 897.7 271.7C897 272.1 897.1 271.7 897.9 270.7C899 269.3 899 268.9 897.7 268.4C896.8 268.1 896.4 267.2 896.7 266.3C897.2 265.1 897 264.9 896 265.5C895.2 266 894.9 265.8 895.2 264.9C895.5 264.1 894.7 262.7 893.4 261.8C890.4 259.4 891.3 256 894.9 256C896.4 256 898 255.7 898.3 255.3C899.5 254.1 896.8 252 894 252C892 252 891.1 251.4 890.7 249.9C890.4 248.7 889.7 248.1 889.2 248.4C888 249.1 884.4 245.2 885.4 244.2C885.8 243.8 888.8 243.5 892.1 243.5C898 243.4 900.4 245 898 247.4C896 249.4 897 250.2 900.9 249.8C903.2 249.6 904.8 249.9 904.7 250.5C904.6 251 905.3 251.4 906.2 251.4C907.2 251.3 907.7 251.6 907.5 252.1C907.2 252.5 907.7 253.3 908.7 253.8C910.1 254.6 910.2 255.1 909.2 256.3C908.2 257.5 908.3 257.9 910.1 258.3C911.2 258.6 912.4 259.8 912.7 260.9C913 262 913.5 262.8 913.9 262.6C914.2 262.4 914.6 263.5 914.7 265.1C914.8 266.7 914.5 268 914 268C913.4 268 913 268.7 913 269.6C913 270.7 913.6 271.1 915 270.7C916.1 270.4 916.8 270.5 916.5 271C915.8 272.2 920.3 273.1 921.5 271.9C922.2 271.2 922 271.1 920.9 271.5C919.7 271.9 919.4 271.4 919.6 269.1C919.7 267.2 919.2 265.9 918.3 265.6C917.4 265.2 917 264.3 917.4 263.4C917.8 262.4 917.6 262.1 916.8 262.6C916.1 263.1 915.9 262.8 916.3 261.8C916.6 260.9 916.4 259.8 915.8 259.2C914.1 257.5 915.7 254.7 917.9 255.3C919.3 255.6 919.7 255.4 919.3 254.4C919 253.4 919.5 253 921.1 253C923 253 923.2 252.8 922 252C920.9 251.3 921.3 251.1 923.7 251.3C925.4 251.4 926.6 251.8 926.3 252.2C926.1 252.7 926.6 253 927.5 253C928.4 253 928.8 253.4 928.5 254C928.1 254.6 928.6 254.7 929.6 254.3C930.9 253.8 931.1 254 930.5 255C929.9 256 930.1 256.2 931.6 255.6C932.6 255.2 934.2 254.7 935 254.6C935.8 254.4 937.3 253 938.5 251.4C939.6 249.8 941.1 248.1 941.8 247.7C942.4 247.3 943 246.4 943 245.9C943 245.3 942.5 245.2 941.8 245.6C941.1 246.1 940.9 245.8 941.3 244.8C941.6 243.9 941.3 242.7 940.7 242C940 241.3 940 241 940.6 241.3C941.3 241.7 941.5 240.8 941.2 238.9C940.9 237.2 940.2 235.6 939.4 235.3C938.7 235.1 938.4 234.2 938.7 233.4C939.4 231.6 937.1 228.8 935.7 229.7C935.2 230 935 229.8 935.3 229.3C935.7 228.7 935.3 227.7 934.5 227C933.7 226.3 933 226.1 933 226.6C933 227.1 932.5 226.8 932 226C931.1 224.7 930.9 224.7 930 226C929.3 227.1 929 227.1 929 226.2C929 225.5 928.6 225.2 928 225.5C927.4 225.9 927.3 225.4 927.7 224.4C928.1 223.2 928 222.9 927.2 223.4C926.5 223.8 925.2 223.6 924.3 223.1C923.3 222.5 922.8 222 923.3 222C923.7 222 923.1 221.1 922 220C919.1 217.1 919.4 214.8 922.6 215.4C924.2 215.7 925.3 215.4 925.7 214.4C926 213.6 926.9 213 927.7 213C928.5 213 928.9 212.6 928.6 212.1C928.3 211.6 929.9 211.3 932.1 211.4C935 211.6 936.8 212.3 938.1 213.9C939.1 215.1 940.2 216 940.5 215.9C941.9 215.6 946.9 218.3 946.4 219.1C946.1 219.6 946.6 219.7 947.5 219.4C948.4 219 949.7 219.5 950.6 220.6C951.5 221.7 951.9 221.8 951.5 221C951.1 220 951.3 220.1 952.3 221.2C953.1 222.2 954 222.7 954.3 222.3C955 221.7 955.4 223.6 955 225.5C954.9 226 955.2 226.2 955.6 225.8C956 225.4 956.9 225.5 957.7 226.1C958.7 227 959 226.9 959 225.9C959 224.8 959.2 224.8 959.8 225.8C960.4 226.7 961 226.3 962 224.5C963.4 221.9 965 221.2 965 223.2C965 223.8 965.3 224.1 965.6 223.7C965.9 223.4 967 224 968.1 225.1C969.1 226.1 970.7 227 971.5 227C972.5 227 973 227.7 972.8 228.7C972.6 230 973.1 230.4 974.4 230.2C975.4 230 976.7 230.4 977.2 231.2C977.9 232.2 978 232.1 977.6 230.8C977.2 229.4 977.6 229.1 979.4 229.2C981.2 229.4 981.6 229.9 981.2 231.9C980.9 233.4 981.1 234.1 981.8 233.6C982.4 233.3 983.2 233.5 983.6 234.1C984 234.8 983.9 235 983.3 234.7C982.7 234.3 981.9 234.7 981.6 235.6C981.2 236.5 980.7 237.1 980.4 236.8C979.8 236.1 974.5 241.4 973.7 243.5C973.3 244.3 973.6 245 974.2 245C974.8 245 975.1 245.3 974.8 245.6C974.4 245.9 975 247 976.1 248.1C977.2 249.2 977.8 250.5 977.5 251C977.2 251.5 978.1 252.7 979.5 253.6C981.2 254.7 981.9 255.8 981.5 257.1C981.1 258.2 981.7 259.7 982.9 260.9C983.9 261.9 984.6 263 984.4 263.3C984.1 263.5 984.6 264 985.4 264.3C986.3 264.7 986.9 264.6 986.9 264.2C986.5 261.6 987.2 259 988.3 259C989.1 259 989.7 258.3 989.7 257.5C989.7 256.7 989.3 256.3 988.8 256.6C988.4 256.9 988 256.6 988 256.1C988 255 989.3 254.6 991.5 254.9C992.1 255 991.5 254.2 990.3 253.1C989.1 252.1 988.4 251 988.7 250.6C989.1 250.3 988.8 250 988.2 250C987.5 250 987 249.4 987 248.6C987 247.9 986.2 246.6 985.3 245.9C983.6 244.6 983.6 244.7 984.9 246.5C986.3 248.4 986.3 248.4 984.5 246.8C983 245.4 982.9 244.8 984 243.6C985 242.3 985 242 983.9 241.9C983.1 241.9 983.4 241.5 984.5 241C987.3 239.8 988.2 239.8 987.4 241.2C987 241.9 987.1 242 987.9 241.6C989.1 240.8 992.3 243.4 991.3 244.4C990.9 244.7 991.2 245 991.7 245C992.3 245 993 244.4 993.3 243.7C993.5 243 995.1 243.9 997.5 246.3C1000.6 249.4 1001.9 250.1 1004.1 249.6C1005.6 249.3 1008.3 249.5 1010 250C1013.2 250.9 1013.2 250.9 1011.4 248.9C1010.4 247.8 1009.6 245.7 1009.6 244.2C1009.6 242.7 1009.2 241.2 1008.7 240.9C1008.2 240.6 1008.5 240 1009.3 239.7C1010.2 239.4 1013.1 241.5 1017.1 245.5C1020.6 249.1 1024.1 251.9 1024.8 252C1025.5 252 1025.8 252.5 1025.5 253C1025.1 253.6 1025.4 253.9 1026.1 253.8C1026.8 253.6 1027.4 254.1 1027.5 254.7C1027.5 256.6 1029.4 256.8 1029.8 255C1029.9 254.1 1028.2 251.7 1025.9 249.5C1023.6 247.3 1022 246.2 1022.4 247C1022.8 247.8 1021.7 246.9 1019.9 245C1018.1 243.1 1016.2 241.6 1015.8 241.7C1015.4 241.9 1013.2 239.7 1010.9 237C1008.6 234.3 1006.4 232.2 1006 232.3C1005.6 232.4 1004.3 231.4 1003.1 230C1001.8 228.6 1001.1 228.2 1001.5 229C1001.9 229.8 1000.6 228.9 998.7 226.8C996.7 224.8 994.9 223.4 994.7 223.6C994.5 223.9 993.1 222.7 991.6 221C990.2 219.3 989 218.2 989 218.6C989 219.1 987.3 217.7 985.2 215.7C983.1 213.6 981.1 212.3 980.7 212.6C980.3 213 979.8 212.6 979.4 211.7C979.1 210.8 978.2 210.4 977.3 210.7C976.3 211.1 975.9 210.9 976.4 210.2C976.7 209.6 976.6 208.8 976 208.5C975.4 208.1 975.1 208.4 975.2 209.1C975.6 210.8 973.4 211.3 971.9 209.7C971.1 209 969.9 208.5 969.1 208.8C968.3 209.1 968 208.8 968.4 208.1C968.8 207.5 968.6 207 968.1 207C967.5 207 967 206.5 967 205.9C967 205.4 967.5 205.2 968.2 205.6C968.8 206 969 205.9 968.7 205.3C968.4 204.8 966.7 204.5 964.9 204.8C962.5 205.2 961.9 205 962.5 204C963 203.2 962.9 202.9 962.2 203.3C960.7 204.3 957.9 203 958.7 201.6C959 201 959 200.8 958.5 201.2C958.1 201.6 956.8 201.4 955.6 200.8C954.5 200.1 953.1 199.7 952.7 199.8C952.2 199.9 952.1 199.6 952.5 199C952.8 198.5 952 197.5 950.6 196.8C949.2 196.2 948 195.3 948 194.8C948 194.3 947.6 194.2 947 194.5C946.5 194.8 946 194.7 946 194.1C946 192.3 940 187.1 938.5 187.6C937.7 188 936.7 187.5 936.4 186.6C936.1 185.7 935.4 185.3 934.9 185.6C934.4 185.9 934 185.6 934 185.1C934 184.5 933.7 184.1 933.3 184.1C931.5 184.4 930.2 183.9 928.2 182C927 180.9 925.9 180 925.8 180.1C924.8 180.7 921.1 178.6 921.6 177.8C922 177.1 921.8 177 921.2 177.4C920.6 177.8 919.2 177.2 918.1 176.1C917 175 915.9 174.4 915.6 174.7C915.3 175.1 915 174.8 915 174.2C915 173.5 914.7 173.1 914.3 173.1C912.3 173.4 910.9 172.9 911.5 172C911.8 171.4 911.2 171 910 171C908.8 171 908.1 170.6 908.4 170.1C908.7 169.7 907.8 168.8 906.4 168.1C904.4 167.2 904 167.2 904.6 168.2C905 168.9 904.2 168.3 902.7 166.7C900 163.9 898.4 163.1 899.5 165.2C899.9 165.9 899.5 165.7 898.7 164.8C897.9 163.8 897 163.3 896.7 163.7C896.3 164 896 163.7 896 163C896 162.3 895.7 162 895.4 162.3C895 162.6 893.8 162.4 892.7 161.9C889.9 160.3 885.9 160 886.6 161.4C886.9 162 886.6 161.8 885.8 160.9C885.1 160 883.9 159.5 883.3 159.7C882.6 160 882 159.7 882 159C882 158.4 881.5 158.2 881 158.5C879.7 159.3 871.9 155 872.6 153.8C873.4 152.5 872 152.9 870.4 154.5C868.7 156.1 868.9 156.2 859.9 147.7C857 144.9 854.2 143.1 853.4 143.4C851.7 144.1 848.8 143.1 849.5 142.1C849.7 141.7 849.4 141.3 848.7 141.2C848 141.1 846.2 140.8 844.6 140.4C842.6 139.9 841.9 140 842.4 140.8C842.9 141.6 842.6 141.8 841.6 141.4C840.7 141.1 840 140.4 840 139.8C840 139.3 839.6 139.2 839 139.5C838.5 139.8 838 139.7 838 139.1C838 138.5 837.3 138.3 836.5 138.6C835.7 139 835 138.7 835 138C835 137.4 834.6 137.1 834.1 137.4C833.6 137.7 832.7 137.4 832.1 136.6C831.5 135.9 828.9 134.7 826.5 134C824 133.3 822 132.3 822 131.8C822 131.3 821.6 131.1 821.1 131.4C820.6 131.7 818.7 131 816.9 129.7C814.5 128.1 812.2 127.5 808.8 127.6C804.7 127.8 804.2 127.5 804.3 125.8C804.4 124.4 805 124 806.7 124.3C807.9 124.5 809.5 124.3 810.2 123.9C811.1 123.3 810.8 123 809.2 123C807.9 123 807.2 122.6 807.5 122C807.9 121.4 807.4 121.3 806.4 121.7C805.2 122.1 804.9 122 805.4 121.2C805.9 120.4 805.6 120.2 804.6 120.6C803.7 120.9 803 120.8 803 120.2C803 119.6 802 119.4 800.8 119.8C799.4 120.1 798.9 119.9 799.4 119.2C799.8 118.5 798.9 118.3 796.5 118.7C793.9 119.1 793 118.9 793.2 118C793.4 117.3 792.1 116.3 790.3 115.8C788.5 115.3 787 114.6 787 114.1C787 113.3 786.3 113.1 781 112.6C779.1 112.4 777.2 112.8 776.8 113.4C776.2 114.2 776 114.2 776 113.4C776 112.7 774.9 112.5 773.5 112.8C772.1 113 771 112.8 771 112.1C771 111.5 770.3 111.3 769.3 111.7C768.4 112.1 767.9 111.9 768.3 111.4C768.7 110.7 767.7 110.5 765.8 110.8C764.1 111.1 763 110.9 763.3 110.4C763.6 109.9 761.7 109.5 759.2 109.5C756.6 109.5 752.8 109.2 750.8 108.8C747.8 108.3 747 108.4 747 109.6C747 110.4 746.3 111 745.4 111C744.6 111 744.2 110.6 744.5 110C744.8 109.4 744.4 109.3 743.6 109.6C742.7 109.9 742 111.1 742 112.1C742 114.1 740.1 114.6 738.5 113.1C737.9 112.7 736 111.8 734.3 111.2C731.6 110.3 731 110.4 731 111.6C731 113.3 728.6 113.4 726.8 111.7C724.8 109.9 722.3 109.5 723.8 111.3C724.5 112.1 724.6 113 724.2 113.4C723.8 113.8 724 114.1 724.5 114C725.1 113.9 726.5 113.8 727.8 113.9C729.7 114 730 114.5 729.8 116.7C729.3 121 727.4 122.5 724.3 121.1C721.8 120 721.8 119.9 723.6 118.4C725.2 117.1 725.2 116.9 723.8 117.4C722.6 117.7 722.3 117.5 722.6 116.5C722.9 115.8 722.2 114.6 721 114C719.8 113.3 719.1 112.2 719.4 111.4C719.7 110.7 719.6 110.1 719.2 110.1C717.4 110.4 715.9 109.9 716.4 109.2C717.1 108.1 716 106.8 712.6 104.6C710.5 103.3 709.5 103.1 709.2 103.9C709 104.5 708.5 104.8 708.1 104.6C707.7 104.3 706.8 105 706.2 106.1C705.1 107.9 705.3 108.2 708 109.1C711.5 110.4 713.7 113.5 711.8 114.6C711.2 115 710.4 114.8 710.2 114.2C710 113.5 709.4 113.2 708.9 113.6C708.4 113.9 708 113.7 708 113.2C708 112.6 707.4 112.2 706.8 112.3C703.7 112.4 701.9 111.9 702.4 111.2C702.6 110.8 701.9 110.3 700.7 110.3C699.5 110.2 698.4 109.7 698.2 109.2C698 108.6 697 108.5 695.8 108.7C694.7 109 693.5 108.8 693.1 108.1C692.6 107.3 691.7 107.5 690 109C687.2 111.4 686.1 111.5 685.4 109.5C684.9 108.3 683.5 108.1 678.4 108.6C674.4 109 672 108.8 672 108.2C672 106.6 663.1 105.7 661.5 107C660.7 107.7 659.3 108 658.5 107.6C657.7 107.3 657 107.5 657 108C657 108.6 655.4 109 653.5 109C650.4 109 650 108.7 650 106.5C650 104.9 649.4 104 648.4 104C647.2 104 647 104.4 647.7 105.2C650.2 108.7 646.7 111.5 643.7 108.5C641.8 106.7 641.2 106.8 638.6 109.1C637.6 110.1 635.4 111.2 633.9 111.5C632.3 111.9 631 112.6 631 113.2C631 114.6 624.8 113.3 623.8 111.7C623.4 111.1 623 110.8 623 111.2C623 111.6 621.9 110.8 620.5 109.4C617.7 106.6 617.2 104 619.5 104C620.3 104 621 104.4 621 104.9C621 105.4 621.9 105.6 623 105.3C624.1 105 625 105.2 625 105.6C625 106.1 627.7 106.3 631 106.2C634.3 106 637 105.5 637 105.2C637 103.9 626.5 101.1 624 101.6C622 102.1 621.8 101.9 623 101.1C624.1 100.2 623.4 100.1 620 100.5C616.5 100.9 615.9 100.8 617.5 100C619.2 99.1 619 99 616.3 99.5C614.5 99.7 613 99.6 613 99.1C613 98.7 610.7 98 607.8 97.7C605 97.3 602.4 96.7 602.1 96.3C601.3 95.3 598 95 598 96C598 96.4 596.1 96.4 593.8 95.9C588.4 94.9 588.5 94.9 587.8 95.6ZM654.8 110.7C653.8 110.9 652 110.9 650.8 110.7C649.5 110.5 650.3 110.3 652.5 110.3C654.7 110.2 655.7 110.4 654.8 110.7ZM622.8 152.1C624.3 152.1 624.9 152.4 624.4 153.2C623.9 153.9 624.2 154.1 625.2 153.8C626.3 153.3 626.6 153.7 626.3 155.4C625.9 157.1 626.3 157.6 627.9 157.6C629.4 157.6 630 156.9 630 155.2C630 153.9 630.4 153.2 631 153.5C631.6 153.8 632 153.6 632 153.1C632 152.5 633.5 152 635.4 152C638.1 152 639 152.5 639.5 154.1C639.9 155.3 639.7 156.5 639.1 156.9C638.5 157.3 639.3 158.3 641.2 159.4C642.9 160.5 644 160.8 643.6 160.2C643.1 159.4 643.4 159.2 644.4 159.6C645.3 159.9 645.8 160.5 645.5 160.9C645.3 161.3 646.6 162.4 648.5 163.3C652 164.9 653 167.3 650.9 168.5C649.5 169.4 640.1 169.7 640.6 168.9C640.8 168.5 639.3 167.9 637.2 167.5C635.2 167.1 633.2 166.6 632.7 166.3C631.5 165.5 620.9 165.1 621.4 165.8C621.6 166.2 618.5 166.6 614.4 166.7C610.1 166.8 607 166.5 607 166C607 165.4 607.5 165 608 165C608.6 165 609 164.3 609 163.5C609 162.7 608.6 162 608 162C607.5 162 608.1 160.9 609.3 159.5C610.5 158.2 612.8 155.7 614.3 154C616.3 151.7 617.6 151 618.8 151.5C619.7 151.9 621.5 152.2 622.8 152.1ZM685.1 159C686.3 159.7 686.9 161 686.8 162.5C686.6 164.5 686 165 683.8 165C681.3 165 681.1 165.2 682.2 167C682.9 168 683.6 168.7 683.8 168.5C684.6 167.7 686.7 170.5 686.3 171.7C686 172.4 686.2 173 686.8 173C687.4 173 688 172.5 688.2 171.8C688.8 170.2 693 174.5 693 176.6C693 177.8 692.3 178.1 690.3 177.7C687.7 177.2 687.6 177.3 689.5 178.7C690.6 179.5 691.4 180.8 691.2 181.6C691 182.4 691.4 183 692 183C692.5 183 693 183.6 693 184.4C693 185.4 691.5 185.9 688 186.2C682.3 186.5 680.7 186.2 681.5 184.9C681.9 184.4 681.5 184.3 680.7 184.6C679.9 184.9 678 184 676.4 182.6L673.5 180.1L675.8 178C678.6 175.4 678.6 174.7 675.8 173.5C674.6 172.9 672.9 171.2 672 169.5C671.2 167.9 669.6 165.7 668.5 164.7C666.9 163.2 666.8 162.7 668 162C668.8 161.4 669.9 161 670.3 161C670.8 161 670.9 160.6 670.5 160.1C670.2 159.6 671.2 159.3 672.8 159.5C674.3 159.7 676.3 159.4 677.1 158.9C679 157.7 682.7 157.8 685.1 159ZM709.5 167.8C709.8 168.5 710.4 168.8 711 168.5C711.5 168.2 712 168.2 712 168.6C712 169.3 708 173 707.3 173C706.3 173 704.2 170.3 703.6 168.2C702.9 166.2 703.2 166 705.9 166.2C707.6 166.3 709.2 167 709.5 167.8ZM755.6 175.8C755.7 177.7 755.5 177.8 754.2 176.8C753.2 176 752.9 176 753.3 176.6C753.7 177.3 753.1 178 752 178.3C750.9 178.6 750.2 178.4 750.6 177.9C750.9 177.4 750.4 177 749.6 177C748.7 177 748 176.5 748 176C748 175.4 748.7 175 749.5 175C750.3 175 751 174.5 751 173.9C751 173.3 752 173 753.3 173.2C754.8 173.4 755.5 174.2 755.6 175.8ZM763.6 178C763.6 179.1 763.1 180 762.5 180C761.9 180 761.4 179.1 761.3 178C761.2 176.9 761.7 176 762.3 176C763 176 763.6 176.9 763.6 178ZM848.6 183.6C848.3 184.5 848 186 848 187C848 188.4 846.9 188.9 842.9 189.4C836.8 190.2 834.3 188.8 839 187.2C841.3 186.3 841.9 186.4 841.5 187.3C841.1 188 841.5 187.7 842.3 186.8C843.1 185.8 844 185.3 844.3 185.7C844.7 186 845 185.4 845 184.2C845 182.6 845.6 182 847.1 182C848.6 182 849 182.4 848.6 183.6ZM689.8 187.7C688.8 187.9 687.2 187.9 686.3 187.7C685.3 187.4 686.1 187.2 688 187.2C689.9 187.2 690.7 187.4 689.8 187.7ZM534.8 249.7C533.8 249.9 532.2 249.9 531.3 249.7C530.3 249.4 531.1 249.2 533 249.2C534.9 249.2 535.7 249.4 534.8 249.7ZM624.8 269.8C626.5 270.1 626.3 272.9 624.5 273.6C623.7 274 623.3 274.7 623.6 275.2C624 275.8 623.6 276.6 622.9 277.1C621 278.3 619.7 278.2 620.5 277C620.8 276.4 620.2 276 619.1 276C616.7 276 615.4 272.6 617.1 270.7C618.2 269.6 620.5 269.3 624.8 269.8ZM609 280.5C609.1 278.8 609.4 278.1 609.7 278.9C610.2 280 610.4 280 611.2 278.9C611.9 277.9 612 278.4 611.5 280.3C611.2 282.1 611.3 282.9 611.9 282.6C612.5 282.2 612.7 283 612.4 284.6C612.1 286 612.3 286.9 612.7 286.7C613.1 286.4 613.6 287.3 613.6 288.6C613.7 289.9 613.4 291 612.9 291C612.4 291 612 290.5 612 289.9C612 289.4 611.5 289.2 610.8 289.6C610.1 290.1 609.9 289.8 610.2 288.8C610.6 288 610 286.8 608.9 286.2C607.5 285.3 607 283.9 607.1 281.2C607.2 277.5 607.2 277.5 608 280.5L608.8 283.5L609 280.5ZM624.4 297.1C624.7 298.8 624.5 301.1 623.9 302.2C623.1 303.7 623.1 304.1 623.9 303.6C624.5 303.2 625 303.5 625 304.4C625 306.3 622.7 307.7 622.2 306.2C622 305.5 621.4 305.2 620.9 305.6C620.4 305.9 620 303.5 620 300.1C620 294.8 620.2 294 621.9 294C623.2 294 623.9 295 624.4 297.1Z",
+p3f9a7400: "M346.9 167.8C346.8 168.2 346.8 168.8 346.9 169.2C346.9 169.5 345.4 171.2 343.5 172.8L340.1 175.9L343.5 175.7C345.4 175.6 347 175.1 347 174.6C347 174.2 347.9 174 349 174.3C350.1 174.6 351 174.4 351 173.9C351 173.4 351.7 173 352.6 173C353.4 173 353.9 173.4 353.6 173.8C353.4 174.2 353.9 174.6 354.9 174.6C355.9 174.6 356.7 174 356.7 173.4C356.7 172.7 356.1 172.4 355.3 172.7C354.2 173.1 354.2 172.7 354.9 170.7C355.9 168.2 355.8 168.1 353.5 169C352.1 169.5 351 169.6 351 169.1C351 168.1 347.1 166.9 346.9 167.8Z",
+p5c2d40: "M942 234.8C942 235.3 942.6 236.5 943.4 237.5C944.7 239.3 944.8 239.3 944.3 236.7C943.8 234.3 942 232.8 942 234.8Z",
+p6caa600: "M852.6 456.6C852.3 457.4 851.6 457.8 851 457.5C850.5 457.2 850 457.1 850 457.4C850 457.7 851.2 458.6 852.8 459.4C855 460.5 855.7 460.5 856.7 459.5C857.7 458.4 857.4 457.9 855.6 456.6C853.4 455.2 853.1 455.2 852.6 456.6Z",
+p6f0b0c0: "M256.5 138C256.8 138.4 256.4 139.1 255.8 139.3C255.1 139.6 255 139.9 255.6 139.9C256.1 140 257.4 139.4 258.4 138.7C260 137.5 260 137.4 258 137.3C256.9 137.2 256.2 137.5 256.5 138Z",
+p771dd00: "M262.2 142.5C263.2 143.5 267.1 143.9 266.5 142.9C266.1 142.4 264.9 142 263.8 142C262.6 142 261.9 142.2 262.2 142.5Z",
+p8602c00: "M953.1 264C953 264.8 952.7 266.6 952.3 268C952 269.4 952.1 270.2 952.5 269.8C952.9 269.4 954 270 954.9 271.1C955.8 272.2 958.1 273.3 960 273.5C961.9 273.7 962.9 273.6 962.2 273.3C961.6 273.1 961.3 272.3 961.6 271.8C962 271.1 961.8 271 961.2 271.4C960.5 271.8 960 271.6 960 271C960 270.4 959.5 270.2 958.8 270.6C958.1 271 958 270.9 958.4 270.2C958.8 269.6 958 268.4 956.6 267.5C955.2 266.6 953.9 265.1 953.7 264.2C953.3 262.9 953.2 262.8 953.1 264Z",
+p879600: "M380 114.5C378.3 115.5 378 115.9 379.1 116C380 116 381.3 115.3 382 114.5C383.5 112.7 383.2 112.7 380 114.5Z",
+p8f6c300: "M238 142.8C237.5 143 237 143.6 237 144.1C237 144.5 237.7 144.6 238.7 144.3C239.8 143.9 240.1 144 239.6 144.8C239.1 145.6 239.7 145.9 241.5 145.8C243.1 145.6 243.9 145.1 243.6 144.3C243 142.8 244.6 142.5 245.3 144C245.6 144.6 245.7 144.5 245.6 143.8C245.4 142.6 240.5 142 238 142.8Z",
+p9306800: "M675.7 93.2C675.9 93.7 674.5 94 672.6 94C670.4 94 668.1 94.9 666.3 96.4L663.5 98.8L667.4 99.5C671.3 100.3 673.6 98.9 672.3 96.6C671.9 96.1 672.4 95.9 673.3 96.3C674.3 96.6 675 96.5 675 96C675 95.5 675.8 95.3 676.8 95.6C678.2 96.1 678.3 96 677 95.1C675.8 94.2 676.4 94 679.5 94.4C681.7 94.7 682.7 94.7 681.7 94.4C680.8 94.1 680.2 93.5 680.5 93.1C680.7 92.6 679.6 92.3 678.1 92.4C676.5 92.5 675.4 92.8 675.7 93.2Z",
+p949c280: "M902.7 374.6C903 375.3 903.6 376 904.2 376C904.7 376 904.9 376.4 904.6 376.9C904.3 377.4 904.7 378 905.5 378.4C906.6 378.8 906.9 378.3 906.7 376.8C906.5 375.6 905.4 374.3 904.2 373.9C902.6 373.3 902.2 373.4 902.7 374.6Z",
+pa4d0e00: "M858 284.8C858 285.5 858.7 286.8 859.5 287.6C860.4 288.5 861 288.7 861 288C861 287.4 861.4 287.2 862 287.5C862.6 287.8 862.7 287.4 862.4 286.6C862.1 285.7 861.3 285.3 860.8 285.6C860.2 286 859.4 285.6 858.9 284.9C858.2 283.8 858 283.8 858 284.8Z",
+pd89e980: "M868 350.1C868 350.6 867 351 865.8 351.1C864.5 351.1 864.1 351.4 864.8 351.7C866.2 352.3 866.4 355.6 865 356.5C864.5 356.8 864 357.6 864 358.1C864 359.4 867.5 358.8 867.5 357.5C867.8 353.3 871 350 871 353.9C871 355 871.4 356.1 871.9 356.4C872.4 356.8 872.7 358.1 872.6 359.4C872.4 361.1 872.7 361.7 873.6 361.3C874.4 361 874.7 360.3 874.3 359.6C873.9 359 873.7 357.7 873.9 356.6C874.1 355.4 873.8 355 872.9 355.6C872 356.1 871.9 355.8 872.3 354.7C873.2 352.3 871.8 349.5 869.8 349.4C868.8 349.3 868 349.6 868 350.1Z",
+pe58fe70: "M890.5 305C890.8 305.5 890.7 306 890.1 306C889.5 306 889.1 307.7 889.3 309.9C889.4 312 889.8 313.6 890.3 313.3C890.7 313.1 891 313.6 891 314.4C891 315.4 890.1 316 888.8 316C887.1 316 886.8 316.3 887.9 316.9C889 317.6 888.9 317.9 887.4 318.3C886.1 318.6 886.3 318.8 888.3 318.9C889.8 318.9 891 319.4 891 319.9C891 320.4 891.8 320.7 892.8 320.6C893.8 320.6 894.5 321.2 894.5 322.2C894.5 323.2 895 324 895.5 324C896.1 324 896.5 323.5 896.4 323C896.3 322.4 896.2 321.3 896.2 320.5C896.1 319.7 895.7 319.1 895.3 319.1C892.3 319.6 891.1 318.8 891.5 316.7C892.8 310 893.3 308.8 894 310C894.5 310.8 894.9 310.5 895.3 309.1C895.6 307.9 895.4 307.2 894.9 307.5C894.5 307.8 893.5 307.2 892.8 306C892.1 304.9 891.2 304 890.7 304C890.3 304 890.2 304.4 890.5 305Z",
+pe648700: "M495.8 133.3C495.1 134.1 493.8 134.9 493 135.3C491.7 135.8 491.7 135.9 493 135.9C494.1 136 494.2 136.2 493.3 136.8C492.5 137.3 492.4 138.1 493 139C493.8 140.3 494.2 140.2 495.5 138.5C496.4 137.4 496.9 137.1 496.5 137.7C496.1 138.6 496.4 138.8 497.4 138.4C498.3 138.1 499 137.3 499 136.8C499 136.2 499.7 136.3 500.5 137C501.8 138.1 501.9 138 501.4 136.6C501.1 135.7 501.3 134.3 502 133.5C503.1 132.2 502.8 132 500.2 132C498.5 132 496.5 132.6 495.8 133.3Z",
+pf1a6500: "M71.3004 288.3C67.8004 292.2 67.6004 293.6 71.1004 290.3C72.9004 288.5 74.2004 286.8 73.9004 286.5C73.6004 286.2 72.4004 287 71.3004 288.3Z",
+pfec7180: "M279.001 135.5C278.301 136.3 278.101 137 278.501 137C278.901 137 278.401 137.8 277.301 138.7C276.301 139.7 276.101 140 277.001 139.5C278.301 138.6 278.301 138.7 277.101 140.2C276.401 141.2 275.401 141.7 274.901 141.5C273.901 140.8 271.701 144.7 271.401 148C271.201 149.4 270.601 150.6 270.001 150.8C269.401 151 267.601 152.3 265.901 153.7C263.501 155.8 262.601 156 261.701 155C260.801 154 260.801 153.9 261.801 154.4C263.501 155.4 263.301 153.5 261.501 152C260.301 151 260.001 151.1 260.001 152.8C260.001 155 255.501 158.4 254.001 157.5C253.401 157.2 253.001 157.4 253.001 158C253.001 158.6 252.601 158.8 252.001 158.5C251.501 158.2 251.001 158.4 251.001 159C251.001 159.7 250.301 159.9 249.401 159.6C248.401 159.2 248.101 159.4 248.601 160.2C249.101 160.9 248.601 161.1 247.201 160.8C246.001 160.4 245.001 160.5 245.001 161C245.001 161.9 238.001 163 236.701 162.3C235.501 161.6 237.901 158.1 239.801 158.1C244.301 157.9 246.001 157.5 246.001 156.8C246.001 156.4 246.901 156 248.001 156C249.101 156 250.001 155.6 250.001 155C250.001 154.5 251.201 153.7 252.701 153.4L255.401 152.7L253.101 151.8C251.201 151.2 250.901 150.5 251.401 148.5C252.101 145.7 251.801 145.5 248.901 147C247.901 147.6 247.001 149 247.001 150.1C247.001 151.2 246.601 151.8 246.001 151.5C245.501 151.2 245.001 151.4 245.001 152.1C245.001 152.8 244.401 152.5 243.601 151.4C242.301 149.7 242.101 149.6 241.501 151.2C240.501 153.7 235.101 155.2 231.201 154.1C229.401 153.5 228.201 153.5 228.401 153.9C229.101 154.9 222.001 157.1 220.701 156.3C220.101 156 220.001 156.2 220.401 156.8C221.101 157.9 219.701 158.4 216.301 158.3C215.601 158.2 215.301 158.7 215.701 159.3C216.101 160 215.701 160.1 214.401 159.6C213.401 159.2 212.901 159.2 213.201 159.6C213.901 160.2 209.301 164.5 208.001 164.5C206.901 164.6 199.601 170 200.701 170C201.401 170 202.101 169.6 202.501 169.1C202.801 168.5 203.901 168.3 205.001 168.5C206.301 168.7 206.701 168.4 206.401 167.5C206.001 166.6 206.501 166.3 207.701 166.4C208.701 166.6 209.801 166.2 210.201 165.6C210.601 165 211.301 164.5 211.701 164.5C213.001 164.5 217.001 161.4 216.501 160.8C216.201 160.5 216.701 159.9 217.701 159.6C218.601 159.2 219.101 159.2 218.801 159.6C218.401 160 218.601 161.2 219.201 162.3C220.101 164 220.001 164.2 218.401 163.6C217.001 163.1 216.801 163.2 217.601 164C218.801 165.2 222.301 164.3 221.401 162.9C221.101 162.4 221.701 162.3 222.601 162.7C223.801 163.1 224.101 163 223.601 162.2C223.101 161.4 223.501 161.2 224.601 161.7C225.801 162.1 226.101 162 225.601 161.2C225.101 160.4 225.401 160.2 226.401 160.6C228.301 161.3 228.501 162.7 226.801 163.2C226.101 163.5 226.301 163.9 227.401 164.3C228.401 164.7 228.901 164.6 228.501 164C228.201 163.4 228.201 163 228.701 162.9C233.801 162.4 234.801 162.5 233.901 163.6C233.401 164.2 233.401 165.1 233.801 165.5C234.201 166 234.001 166 233.401 165.7C232.701 165.3 231.901 165.7 231.601 166.6C231.201 167.6 230.301 167.9 228.901 167.5C227.301 167 227.001 167.1 227.501 168C228.001 168.8 227.901 169.1 227.201 168.7C225.701 167.7 222.901 169 223.701 170.3C224.101 170.9 223.701 171.1 222.701 170.7C221.701 170.4 221.001 170.5 221.001 171C221.001 171.6 220.701 171.9 220.301 171.9C218.301 171.6 216.901 172.1 217.501 173C217.801 173.5 217.701 174 217.201 174C215.601 174 215.001 172.7 216.101 171.4C216.601 170.7 215.401 171 213.301 172.1C211.201 173.2 209.001 173.8 208.301 173.5C207.601 173.3 207.001 173.6 207.001 174.1C207.001 174.7 206.101 175 205.001 174.7C204.001 174.4 203.001 174.5 202.801 174.9C202.601 175.3 200.101 177 197.101 178.8C192.101 181.9 191.701 182 190.301 180.3C189.501 179.3 189.101 179 189.401 179.6C189.701 180.3 189.201 181.4 188.301 182.1C186.901 183.3 186.701 183.3 187.501 182.1C188.401 180.5 186.701 181.3 183.801 183.8C182.801 184.6 182.001 184.9 182.001 184.5C182.001 184 181.301 184.5 180.401 185.6C179.601 186.6 179.101 186.8 179.501 186C179.901 185.2 179.201 185.6 178.001 187C176.801 188.4 176.101 188.8 176.501 188C176.901 187 176.601 187.1 175.701 188.2C174.901 189.2 173.501 190 172.601 190C171.601 190 171.101 190.4 171.501 190.9C171.801 191.4 171.001 192.2 169.801 192.6C168.501 193 166.901 194.2 166.101 195.2C165.401 196.3 164.201 196.9 163.401 196.6C162.601 196.3 162.001 196.5 162.001 197.1C162.001 197.7 161.301 198 160.501 197.6C159.701 197.3 159.001 197.4 159.001 197.9C159.001 198.7 154.901 200.3 152.501 200.4C152.001 200.5 150.901 201.1 150.101 201.8C149.401 202.5 148.101 202.9 147.401 202.6C146.601 202.3 146.001 202.4 146.001 202.9C146.001 203.8 140.401 206.4 139.601 205.9C139.301 205.7 138.401 206.4 137.501 207.5C136.601 208.6 136.101 208.8 136.501 208C136.901 207 136.701 207.1 135.701 208.2C134.901 209.2 134.001 209.7 133.701 209.3C133.301 209 133.001 209.2 133.001 209.9C133.001 210.6 132.401 211 131.801 210.7C129.701 210.1 124.701 212.6 120.501 216.4C118.401 218.4 116.501 219.8 116.301 219.6C116.101 219.5 114.201 221.1 111.901 223.2C109.701 225.3 107.501 226.8 107.101 226.6C106.701 226.3 104.801 227.7 102.901 229.8L99.5009 233.5L103.001 230.5L106.501 227.5L103.601 230.7C102.001 232.5 100.301 233.7 99.9009 233.4C98.9009 232.8 91.0009 241 91.0009 242.6C91.0009 243.2 91.7009 244 92.5009 244.4C93.8009 244.9 93.8009 245.2 92.4009 246.9C91.5009 248 90.1009 248.6 89.4009 248.3C88.8009 248.1 86.0009 249.9 83.4009 252.4C80.8009 254.9 78.3009 257 77.8009 257C77.4009 257 77.0009 257.7 77.0009 258.5C77.0009 260.4 78.9009 260.4 79.6009 258.5C80.0009 257.7 80.6009 257.3 81.1009 257.6C81.6009 257.9 82.3009 257.4 82.6009 256.6C82.9009 255.7 83.6009 255.3 84.1009 255.6C84.6009 255.9 84.9009 255.8 84.8009 255.3C84.6009 254.9 84.9009 254.4 85.4009 254.3C85.9009 254.2 86.6009 253.6 87.0009 253C87.5009 252.2 87.9009 252.5 88.2009 253.8C88.6009 255.2 88.0009 256.2 86.4009 257.1C85.1009 257.8 84.0009 258.9 84.0009 259.6C84.0009 260.3 82.1009 262.3 79.7009 264.1C74.5009 268.2 73.0009 269.5 75.0009 268.6C75.8009 268.2 74.9009 269.3 73.1009 271.1C69.7009 274.2 68.4009 277.5 70.2009 278.6C70.7009 278.9 70.9009 278.8 70.8009 278.3C70.5009 277.6 71.5009 276.8 72.3009 277.1C74.8009 277.9 76.8009 277.6 78.3009 276.3C79.6009 275.1 80.3009 274.9 81.2009 275.8C82.0009 276.6 81.9009 277.1 80.7009 277.6C79.8009 277.9 79.0009 278.7 79.0009 279.3C79.0009 280.8 83.8009 276.1 84.5009 273.8C84.9009 272.8 87.2009 269.9 89.8009 267.4C92.4009 264.8 93.8009 263 93.0009 263.5C92.2009 263.9 93.2009 262.6 95.2009 260.6C99.4009 256.5 100.501 256.1 99.0009 259.2C98.4009 260.5 100.501 258.8 103.601 255.5C106.801 252.2 109.101 250.1 108.701 250.7C108.101 251.6 108.401 251.8 109.401 251.4C110.301 251.1 111.001 250.2 111.001 249.4C111.001 247.8 114.701 245.2 117.601 244.7C118.701 244.6 120.601 243.4 121.901 242.1C123.101 240.9 124.801 240.1 125.601 240.4C126.401 240.7 126.901 240.6 126.601 240.1C126.301 239.6 126.701 239 127.501 238.6C128.301 238.3 129.001 238.5 129.001 239.1C129.001 239.6 130.101 239.8 131.501 239.4C133.501 238.9 134.001 239.2 134.601 241.4C134.901 242.8 135.801 244 136.501 244C137.401 244 137.601 244.8 137.301 246.2L136.701 248.5L138.801 246.2C139.901 244.9 141.201 243.9 141.601 243.8C142.901 243.8 143.901 246.4 142.901 247.6C142.301 248.4 142.501 249.2 143.701 250.1C145.201 251.3 145.301 251.3 144.501 250C144.001 249 144.001 248.8 144.701 249.5C146.201 250.9 147.301 255 146.201 255C145.701 255 145.301 255.7 145.301 256.4C145.301 257.2 145.601 257.9 145.901 257.8C147.801 257.6 151.301 258.2 150.401 258.6C149.801 258.9 149.401 261 149.601 263.6C149.801 266.3 149.501 267.8 149.001 267.5C148.401 267.2 148.001 267.3 148.001 267.9C148.001 268.4 147.701 269.7 147.401 270.7C146.901 272.2 147.001 272.3 148.001 271C149.001 269.7 149.101 269.8 148.501 271.5C148.101 272.6 147.501 274.3 147.301 275.2C147.001 276.2 146.501 276.8 146.101 276.6C145.701 276.3 145.601 277.7 145.801 279.6C146.101 281.6 145.801 283 145.101 283C144.401 283 144.301 283.8 145.001 285.5C145.501 286.9 145.901 288.4 145.701 288.8C145.301 290.1 151.201 297 152.701 297C153.501 297 153.901 296.6 153.601 296.2C153.401 295.8 154.801 295.5 156.801 295.7C160.001 295.9 160.201 295.8 158.001 295.1C156.101 294.4 155.901 294.2 157.401 294.1C159.301 294 164.001 298.3 164.001 300.1C164.001 300.6 165.301 301.3 166.901 301.6C169.901 302.2 172.101 305.1 170.101 305.8C169.501 306 169.001 306.6 169.001 307.1C169.001 307.7 169.801 307.7 170.901 307C173.601 305.6 175.901 305.7 177.501 307.4C178.601 308.4 178.601 309 177.701 310C176.801 310.9 177.101 310.9 178.701 309.9C180.801 308.7 180.801 308.4 179.301 306.8C178.401 305.8 177.101 305 176.301 305C175.601 305 175.001 304.6 175.001 304.1C175.001 303.6 173.401 302.5 171.501 301.6C168.601 300.2 168.001 299.4 168.201 297.1C168.401 294.8 168.801 294.4 170.501 294.8C171.601 295.1 173.101 296.2 173.801 297.2C174.701 298.4 175.801 298.8 177.501 298.4C178.801 298.1 180.701 298.3 181.701 298.9C183.201 299.8 183.001 299.9 180.501 299.5C178.201 299.1 178.001 299.2 179.501 299.9C180.601 300.3 183.901 301.1 186.801 301.5C189.701 301.9 192.601 302.8 193.301 303.5C193.901 304.1 195.301 304.5 196.401 304.2C197.601 303.9 198.101 304.1 197.601 304.8C197.301 305.4 197.901 306.4 199.001 307C200.201 307.6 200.901 308.8 200.601 309.5C200.301 310.4 201.401 310.9 204.601 311.2C207.001 311.4 209.001 311.1 209.001 310.6C209.001 310.2 210.601 310 212.501 310.2C214.401 310.4 216.001 310.2 216.001 309.7C216.001 309.2 216.901 309 218.001 309.3C219.101 309.6 219.801 309.4 219.401 308.9C218.901 308.1 221.901 307.6 227.201 307.7C228.201 307.7 228.801 307.5 228.601 307.2C227.601 306.2 234.001 302 236.501 302C237.901 302 238.901 302.4 238.601 302.9C238.201 303.4 238.901 303.6 240.001 303.3C241.301 303 242.001 303.3 242.001 304.1C242.001 305.3 242.201 305.3 242.901 304.1C243.401 303.3 244.501 303 245.401 303.3C246.301 303.7 247.001 303.4 247.001 302.9C247.001 302.3 247.901 302 249.001 302.3C250.301 302.6 250.801 302.4 250.301 301.7C249.901 301.1 250.501 300.9 251.801 301.2C253.001 301.6 254.001 301.4 254.001 300.8C254.001 300.3 254.601 300.2 255.301 300.7C255.901 301.1 257.301 301.3 258.401 301.1C259.501 301 260.001 301.3 259.601 301.9C259.201 302.5 259.601 303 260.501 303C261.401 303 261.801 302.5 261.501 302C261.101 301.4 262.001 301 263.401 301C266.401 301 266.701 301.8 264.401 303.5C262.801 304.6 262.801 304.7 264.401 305.3C265.301 305.7 266.001 305.5 266.001 305C266.001 304.4 266.501 304 267.101 304C267.601 304 267.801 304.4 267.501 305C267.201 305.5 267.401 306 267.901 306C268.501 306 269.001 305.5 269.001 304.9C269.001 304.1 269.401 304.1 270.301 304.8C271.001 305.4 272.901 305.8 274.501 305.6C276.201 305.4 278.401 305.2 279.401 305.1C280.501 305.1 281.001 304.7 280.701 304.3C280.301 304 280.601 303 281.201 302.1C282.001 301.1 281.601 301.2 280.201 302.4C279.001 303.5 278.001 303.9 278.001 303.4C278.001 302.9 277.501 303.2 277.001 304C276.301 305.1 275.801 305.2 274.901 304.3C274.301 303.7 273.101 303.4 272.401 303.7C271.601 304 271.001 303.7 271.001 303.1C271.001 302.5 270.701 302.1 270.301 302.1C267.601 302.5 266.901 301.8 267.401 299C267.601 297.3 267.401 296.2 266.901 296.6C266.401 296.9 266.001 296 266.001 294.7C266.001 292.7 265.401 292.1 263.101 291.8C261.301 291.5 260.301 291.8 260.701 292.4C261.101 292.9 260.601 293.1 259.701 292.7C258.601 292.3 257.701 292.7 257.001 293.9C256.001 295.9 252.801 297.1 251.401 296.1C250.301 295.3 249.701 289 250.801 289C251.201 289 251.301 286.9 251.101 284.4C250.901 281.8 250.501 280.1 250.101 280.6C249.801 281.1 247.801 282.8 245.701 284.4C242.301 286.9 242.001 287.5 242.501 290.2C243.001 292.1 242.801 293 242.201 292.6C241.701 292.3 240.401 293 239.401 294.3C238.101 295.7 238.001 296.1 239.001 295.5C239.901 294.9 239.501 295.5 238.101 296.7C236.801 297.8 235.001 298.6 234.201 298.2C233.301 297.9 232.901 298.1 233.301 298.6C233.601 299.2 232.401 299.4 230.301 299.2C227.701 298.9 226.901 299.1 227.501 300C228.601 301.7 224.201 299.3 221.301 296.6C219.501 294.8 219.201 293.8 219.701 290.1C220.101 286.9 220.001 285.9 219.201 286.4C218.501 286.8 218.001 286.5 218.001 285.5C218.001 284.6 218.401 284.1 218.801 284.4C219.301 284.7 219.701 284.3 219.701 283.5C219.701 282.7 219.301 282 218.801 282C218.401 282 218.001 281.1 218.001 280C218.001 277.5 229.601 265.6 231.001 266.5C231.601 266.8 232.001 266.6 232.001 266C232.001 265.3 232.701 265.1 233.601 265.4C234.601 265.8 234.901 265.6 234.401 264.8C233.901 264.1 234.501 263.9 236.401 264.2C237.901 264.5 238.801 264.5 238.601 264.2C238.301 263.9 239.301 262.6 240.801 261.2C242.301 259.9 242.801 259.1 242.001 259.5C241.201 259.8 241.401 259.4 242.501 258.6C243.601 257.7 245.001 257.2 245.801 257.5C246.601 257.8 246.801 257.5 246.401 256.8C245.901 256.1 246.401 255.9 247.801 256.2C249.001 256.6 250.001 256.4 250.001 255.9C250.001 255.5 250.701 255.3 251.601 255.7C253.401 256.4 258.201 254.1 257.401 252.8C257.101 252.4 257.601 252 258.501 252C259.401 252 259.801 252.4 259.501 253C259.201 253.5 259.501 254 260.301 254C261.101 254 262.101 255.1 262.401 256.5C262.801 257.9 263.501 259 264.101 259C264.701 259 264.901 259.4 264.601 259.8C263.901 261 268.401 260.8 269.201 259.6C269.601 259.1 269.401 257.8 268.901 256.8C268.401 255.8 268.201 255 268.601 255C268.901 255 268.401 254.2 267.301 253.2C266.301 252.3 265.901 251.7 266.501 252C267.101 252.3 266.701 251.7 265.701 250.8C263.001 248.3 264.101 245.1 269.001 240.6C271.201 238.6 273.001 236.7 273.001 236.2C273.001 235.8 274.601 234.6 276.501 233.6C280.101 231.6 283.001 227.4 282.201 225.2C282.001 224.5 281.501 224.2 281.101 224.5C280.601 224.7 280.501 223.8 280.801 222.4C281.101 220.6 281.701 220.1 283.101 220.5C284.601 221 284.801 220.7 284.401 218.5C284.101 216.9 284.401 216 285.201 216C285.901 216 287.601 214.6 289.001 212.9C291.501 209.9 296.001 206.6 294.601 208.9C294.201 209.5 295.401 209 297.301 207.7C300.201 205.8 300.601 205.2 299.901 203.2C299.401 201.9 299.401 201.1 299.901 201.4C300.401 201.7 301.001 201 301.301 199.9C301.601 198.7 302.301 198.1 302.901 198.5C303.501 198.8 304.001 198.7 304.001 198.2C304.001 197.3 311.601 192 313.001 192C313.501 192 314.001 191.6 314.201 191.1C314.401 190.6 315.201 190 316.001 189.8C316.801 189.6 317.901 189 318.301 188.5C318.701 187.9 318.901 189.1 318.601 191L318.101 194.4L321.101 191.2C322.801 189.4 324.601 188 325.301 188C326.001 188 325.901 187.6 325.001 187C323.701 186.2 323.701 186 325.201 186C326.101 186 327.101 186.5 327.301 187C327.601 187.6 327.701 187.5 327.601 186.8C327.401 186 326.001 185.6 324.001 185.7C320.901 185.8 320.801 185.7 321.301 182.4C321.801 179.3 321.701 179.1 320.301 180.5C319.401 181.4 318.101 181.9 317.301 181.6C316.501 181.3 316.201 181.5 316.501 182C317.001 182.9 316.401 183.2 314.401 182.9C314.101 182.9 313.201 183.7 312.301 184.7C311.501 185.8 311.101 185.9 311.501 185C311.901 184.2 311.301 184.5 310.301 185.8L308.401 188.1V185.6C308.401 184.3 308.801 183.4 309.201 183.6C309.601 183.9 310.001 183.7 310.001 183.2C310.001 182.7 310.901 182 312.001 181.7C313.101 181.4 314.001 180.4 314.001 179.5C314.001 178.4 314.501 178 315.501 178.4C316.301 178.7 317.001 178.5 317.001 177.9C317.001 176.6 323.801 173.7 325.001 174.5C325.601 174.9 326.001 174.6 326.001 174C326.001 173.3 326.601 173 327.401 173.3C328.201 173.6 329.001 173.4 329.201 172.8C329.401 172.2 331.001 171.7 332.701 171.6C334.401 171.6 335.601 171.3 335.401 171.1C334.901 170.5 341.201 167.6 342.301 167.9C342.701 167.9 343.301 167.4 343.601 166.6C343.901 165.7 344.801 165.4 345.701 165.7C346.801 166.1 347.101 165.9 346.601 165.2C346.201 164.5 346.401 164 346.901 164C347.501 164 348.001 164.7 348.001 165.6C348.001 168.8 350.401 166.2 350.601 162.7C351.001 158.8 350.301 158.4 344.301 158.9C342.801 159 342.001 158.5 342.001 157.5C342.001 156.6 341.501 156.2 340.901 156.6C340.201 157 340.001 156.4 340.201 154.9C340.401 153.3 339.701 151.9 338.201 150.7C337.001 149.7 336.301 148.3 336.601 147.7C337.001 147 335.501 148.1 333.401 150.1C328.801 154.4 326.001 156 323.001 156C321.101 156 320.801 155.5 321.201 153.2C321.601 150.6 321.401 150.4 319.201 150.8C317.301 151.2 316.901 151 317.501 150C318.001 149.1 317.901 148.9 317.201 149.4C316.601 149.8 315.101 149.6 314.001 149C312.401 148.1 312.201 148.2 312.601 149.5C313.201 151 312.801 151.1 306.301 151.4C304.201 151.5 302.601 152.8 301.701 155.2C301.401 156.2 300.601 157 300.101 157C299.601 157 299.301 157.9 299.501 159C299.701 160.1 299.401 161.3 298.801 161.6C298.101 162.1 298.001 161.8 298.501 160.9C299.201 159.7 299.101 159.7 297.801 160.8C296.901 161.5 296.301 162.9 296.501 163.8C296.701 164.7 296.901 165.9 296.901 166.3C297.001 166.8 297.501 166.8 298.001 166.5C300.101 165.2 296.801 170.6 294.601 172C293.301 172.8 290.701 174.6 288.601 175.9C286.301 177.3 285.101 178.8 285.401 179.6C286.001 181.3 284.101 186 282.801 186C282.301 186 282.201 186.4 282.501 187C282.901 187.6 281.701 188 279.601 188C276.601 188 276.201 187.7 276.501 186C277.001 183.6 273.101 179.1 272.101 180.8C271.801 181.4 269.101 181.7 266.301 181.6C263.101 181.4 261.301 181.7 261.701 182.3C262.001 182.9 261.001 183.1 259.201 182.8C257.201 182.5 255.901 182.8 255.601 183.7C254.601 186.2 252.101 185.2 252.601 182.5C252.801 181.1 252.601 180 252.001 180C251.401 180 251.201 180.4 251.501 181C251.801 181.5 251.501 182 250.701 182C246.901 182 248.401 178.7 255.301 171.8C259.301 167.8 262.801 164.7 263.301 164.8C263.701 164.9 264.001 164.5 264.001 163.9C264.001 163.3 264.601 163 265.401 163.3C267.101 164 269.301 161.7 268.201 160.5C267.801 160 268.101 160 268.801 160.4C269.501 160.8 270.001 160.6 270.001 159.9C270.001 159.2 270.301 158.9 270.601 159.3C270.901 159.6 272.101 159 273.301 158C274.401 156.9 275.701 156.3 276.201 156.6C276.601 156.9 277.001 156.6 277.001 156C277.001 155.4 277.501 155.2 278.201 155.6C278.801 156 279.001 155.9 278.701 155.3C278.101 154.4 282.701 149.2 283.601 149.7C283.801 149.9 285.001 150 286.301 150C287.901 150 288.101 149.7 287.101 149.1C286.401 148.6 286.001 147.8 286.401 147.2C286.701 146.6 286.101 145.8 284.901 145.5C283.201 144.9 283.001 144.6 284.101 143.9C285.201 143.2 285.201 143 283.901 143C283.001 143 281.901 144 281.501 145.2C281.101 146.6 280.701 147 280.301 146.2C280.101 145.6 279.401 145.2 279.001 145.5C278.501 145.8 278.501 144.6 279.001 142.9C279.501 141.2 279.901 139.5 279.801 139.1C279.801 138.8 279.901 138.3 280.001 138C280.401 136.9 280.801 134 280.501 134C280.401 134 279.701 134.7 279.001 135.5ZM201.601 185.7C201.201 186.5 200.401 187 199.701 186.7C198.901 186.4 197.801 187.1 197.201 188.1C196.501 189.1 195.301 190 194.501 190C193.701 190 192.201 190.9 191.301 192C189.201 194.5 186.801 194.7 187.701 192.3C188.201 191.2 188.001 190.9 187.101 191.4C186.301 192 186.401 191.2 187.401 189.1C188.301 187.4 189.301 186 189.601 186C189.901 186 189.801 186.4 189.501 187C189.201 187.6 189.601 187.7 190.401 187.4C191.301 187.1 191.801 186.4 191.501 186C190.901 185 193.901 183.8 195.101 184.6C195.601 184.9 195.901 184.6 195.801 183.9C195.601 183 196.501 182.6 198.301 182.6C199.801 182.7 201.101 182.2 201.101 181.6C201.201 181 201.401 181.3 201.701 182.3C202.001 183.3 201.901 184.8 201.601 185.7ZM210.501 190.1C210.501 190.9 209.901 191.4 209.201 191.2C208.501 191.1 207.701 191.7 207.401 192.5C207.101 193.3 206.401 193.7 205.901 193.4C205.401 193.1 205.001 193.6 205.001 194.4C205.001 195.3 204.401 196 203.801 196C203.101 196.1 200.901 197.4 199.001 199C195.001 202.5 193.001 202.8 193.001 200C193.001 198.2 194.001 197.5 196.301 197.9C196.701 197.9 197.001 197.3 197.001 196.4C197.001 195.6 197.401 195.2 198.001 195.5C198.501 195.8 198.701 195.5 198.401 194.7C197.701 192.8 200.001 191.1 203.801 190.8C205.501 190.7 207.201 190 207.501 189.2C208.101 187.5 210.501 188.2 210.501 190.1ZM233.001 204.3C233.001 205.2 232.501 206 231.901 206.2C231.001 206.5 231.001 207.2 231.901 208.8C234.101 212.8 230.701 210.9 228.301 206.6C226.101 202.9 225.401 201 226.601 202.3C227.001 202.6 227.901 202.3 228.701 201.5C229.901 200.2 230.301 200.2 231.601 201.4C232.401 202.2 233.001 203.5 233.001 204.3ZM260.401 203.2C260.101 203.6 260.801 204 262.001 204C263.201 204 263.801 204.4 263.501 205C263.201 205.5 263.501 206 264.201 206.1C264.901 206.1 264.601 206.5 263.501 207C261.901 207.7 261.801 207.9 263.201 207.9C264.101 208 265.101 207.6 265.501 207C265.801 206.5 266.701 206.3 267.501 206.6C268.201 206.9 269.301 206.2 270.001 205.1C270.601 203.9 271.501 203 272.101 203C272.701 203 272.801 203.4 272.501 204C272.201 204.5 272.601 205 273.401 205C274.301 205 275.001 205.4 275.001 205.9C275.001 207.2 278.901 207 281.701 205.7C283.001 205.1 284.301 204.9 284.601 205.3C285.601 206.3 282.601 208.7 281.101 208.2C280.301 207.9 280.001 208.2 280.401 208.9C280.901 209.6 280.501 209.8 279.401 209.3C278.201 208.9 277.901 209 278.401 209.8C278.801 210.6 278.601 210.8 277.701 210.4C276.901 210.1 275.901 210.4 275.401 211.1C274.901 211.9 275.101 212.1 276.101 211.5C276.901 211.1 276.601 211.6 275.501 212.7C274.401 213.7 273.101 214.7 272.701 214.8C272.301 214.8 271.001 215.9 270.001 217.2C268.901 218.5 268.101 219.2 268.001 218.7C268.001 218.3 267.101 218.9 266.001 220C264.401 221.6 263.701 221.8 262.601 220.8C261.601 219.8 261.501 219.3 262.601 218.3C263.301 217.6 264.301 217 264.901 217C265.501 217 266.501 216 267.101 214.7C268.201 212.8 268.101 212.7 266.801 213.7C266.001 214.4 265.001 214.7 264.601 214.3C264.201 213.9 263.601 214.1 263.201 214.7C262.701 215.5 262.001 215.6 261.001 214.9C259.701 214.1 259.801 213.7 261.701 212.1C263.801 210.3 263.901 210.2 262.001 209.7C260.601 209.4 260.001 209.8 259.801 211.4C259.601 212.5 258.901 213.5 258.101 213.5C257.301 213.5 256.601 214.4 256.401 215.4C256.301 216.4 255.601 217.6 254.901 218C254.201 218.5 254.001 219.8 254.401 221.3C255.101 224.3 253.301 226.1 250.201 225.3C248.001 224.8 247.001 221 249.101 221C249.601 221 249.901 220.6 249.601 220.1C249.301 219.7 249.901 218.2 251.001 217C252.101 215.7 253.001 213.9 253.001 213C253.001 211.8 254.101 211 256.201 210.6C260.501 209.7 259.401 209.2 254.301 209.8C251.901 210 250.301 210.6 250.501 211.1C250.801 211.6 249.901 212.2 248.501 212.6C247.201 212.9 246.301 213.6 246.601 214.1C246.901 214.6 245.801 215 244.101 215C240.401 215 239.401 213.7 241.801 211.9C243.301 210.7 243.401 210.7 242.501 212C242.001 212.9 242.301 212.7 243.301 211.7C244.201 210.6 245.001 210.2 245.001 210.6C245.001 211.1 245.701 210.5 246.501 209.3C247.401 208 248.701 207.3 249.501 207.6C250.801 208.1 251.501 207 251.101 204.8C251.101 204.4 251.701 204.3 252.501 204.6C253.301 205 254.001 204.7 254.001 204C254.001 203.4 254.501 203.2 255.001 203.5C255.601 203.8 256.001 203.6 256.001 203.1C256.001 202.5 257.101 202.1 258.401 202.2C259.801 202.3 260.601 202.8 260.401 203.2ZM139.601 239.3C141.101 238.8 141.601 240.5 140.201 241.4C138.601 242.4 135.001 240.8 135.001 239.1C135.001 237.7 135.201 237.7 136.001 239C136.801 240.3 137.001 240.2 137.101 238.5C137.201 236.9 137.301 236.8 137.701 238.2C137.901 239.2 138.701 239.7 139.601 239.3ZM153.401 252.6C155.101 253.3 155.401 254.8 154.201 256.8C153.501 257.7 152.701 257.8 150.901 257C148.701 256 148.601 256 150.801 256.4C152.001 256.6 153.001 256.4 153.001 255.9C153.001 255.4 152.301 255 151.501 255C149.901 255 149.501 253.8 150.701 252.7C151.501 251.9 151.501 251.9 153.401 252.6Z",
+}
diff --git a/src/imports/svg-qfwrc.tsx b/src/imports/svg-qfwrc.tsx
new file mode 100644
index 0000000..e18c527
--- /dev/null
+++ b/src/imports/svg-qfwrc.tsx
@@ -0,0 +1,5 @@
+export const imgGroup = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2097%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22clip0_66_1003%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M96.3381%200H0V29.0054H96.3381V0Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGroup1 = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%20100%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22clip0_66_1008%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M99.2%200H0V23.6602H99.2V0Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGroup2 = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%20100%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22clip0_66_1018%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M99.6033%200H0V19.4615H99.6033V0Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGroup3 = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2095%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22clip0_66_1032%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M94.4169%200H0V28.6673H94.4169V0Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
+export const imgGroup4 = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%2099%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22clip0_66_1034%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M98.4%200H0V29.512H98.4V0Z%22%20fill%3D%22var(--fill-0%2C%20black)%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A";
\ No newline at end of file
diff --git a/src/imports/svg-te3jp5uahp.ts b/src/imports/svg-te3jp5uahp.ts
new file mode 100644
index 0000000..a744d4f
--- /dev/null
+++ b/src/imports/svg-te3jp5uahp.ts
@@ -0,0 +1,9 @@
+export default {
+p1347bee0: "M0.221846 0.740788C0.605791 0.740788 0.893711 0.276899 0.893711 0.276899C0.893711 0.276899 1.18163 0.740788 1.56558 0.740788C1.94952 0.740788 2.33331 0.276899 2.33331 0.276899C2.33331 0.276899 2.71726 0.740788 3.00518 0.740788M0.221846 1.82319C0.605791 1.82319 0.893711 1.35931 0.893711 1.35931C0.893711 1.35931 1.18163 1.82319 1.56558 1.82319C1.94952 1.82319 2.33331 1.35931 2.33331 1.35931C2.33331 1.35931 2.71726 1.82319 3.00518 1.82319",
+p1a313240: "M41.455 81.91C63.7977 81.91 81.91 63.7977 81.91 41.455C81.91 19.1123 63.7977 1 41.455 1C19.1123 1 1 19.1123 1 41.455C1 63.7977 19.1123 81.91 41.455 81.91Z",
+p285ae700: "M45.2798 63.8439H47.511V61.9498C46.1741 61.8928 45.1039 60.7877 45.1039 59.4367C45.1039 58.0858 46.1747 56.9806 47.511 56.9236V54.2321C46.1741 54.1757 45.1039 53.0705 45.1039 51.7196C45.1039 50.3686 46.1747 49.2634 47.511 49.2071V46.5156C46.1741 46.4592 45.1039 45.354 45.1039 44.003C45.1039 42.6521 46.1747 41.5469 47.511 41.4905V38.799C46.1741 38.7426 45.1039 37.6369 45.1039 36.2859C45.1039 34.9349 46.1747 33.8298 47.511 33.7734V31.0825C46.1741 31.0261 45.1039 29.9203 45.1039 28.5694C45.1039 27.219 46.1747 26.1132 47.511 26.0568V23.3666C46.1741 23.3102 45.1039 22.2044 45.1039 20.8541C45.1039 19.5031 46.1747 18.3979 47.511 18.3415V15.6494C46.1741 15.593 45.1039 14.4873 45.1039 13.1369C45.1039 11.786 46.1747 10.6808 47.511 10.6238V7.93229C46.1741 7.8759 45.1039 6.77073 45.1039 5.41978C45.1039 4.06882 46.1747 2.96365 47.511 2.90665V0H45.2915C45.2081 1.31112 44.114 2.35253 42.782 2.35253C41.4495 2.35253 40.3559 1.31112 40.2726 0H37.5756C37.4922 1.31112 36.3981 2.35253 35.0655 2.35253C33.7342 2.35253 32.64 1.31112 32.5561 0H29.859C29.7757 1.31112 28.6815 2.35253 27.3496 2.35253C26.0176 2.35253 24.9235 1.31112 24.8401 0H22.1425C22.0585 1.31112 20.965 2.35253 19.633 2.35253C18.3005 2.35253 17.2063 1.31112 17.123 0H14.426C14.3426 1.31112 13.2485 2.35253 11.9159 2.35253C10.5839 2.35253 9.48982 1.31112 9.40646 0H6.70821C6.62485 1.31112 5.53072 2.35253 4.19877 2.35253C2.8662 2.35253 1.77268 1.31112 1.68932 0H0V2.91707C1.27863 3.04027 2.2753 4.1154 2.2753 5.41978C2.2753 6.72599 1.27495 7.80234 0 7.9231V10.6336C1.27863 10.7574 2.2753 11.8325 2.2753 13.1363C2.2753 14.4425 1.27495 15.5189 0 15.6396V18.3501C1.27863 18.4739 2.2753 19.5485 2.2753 20.8528C2.2753 22.159 1.27495 23.2354 0 23.3562V26.0667C1.27863 26.1905 2.2753 27.265 2.2753 28.5688C2.2753 29.875 1.27495 30.9513 0 31.0721V33.7832C1.27863 33.9064 2.2753 34.9815 2.2753 36.2853C2.2753 37.5915 1.27495 38.6679 0 38.7892V41.5003C1.27863 41.6235 2.2753 42.6987 2.2753 44.0024C2.2753 45.3086 1.27495 46.385 0 46.5057V49.2169C1.27863 49.3407 2.2753 50.4152 2.2753 51.719C2.2753 53.0252 1.27495 54.1015 0 54.2223V56.9334C1.27863 57.0572 2.2753 58.1317 2.2753 59.4361C2.2753 60.7423 1.27495 61.8187 0 61.9394V63.8427H1.70095C1.83703 62.5849 2.91095 61.5992 4.19938 61.5992C5.48782 61.5992 6.5611 62.5849 6.69718 63.8427H9.41811C9.55419 62.5849 10.6269 61.5992 11.9159 61.5992C13.2043 61.5992 14.2776 62.5849 14.4143 63.8427H17.1346C17.2713 62.5849 18.3446 61.5992 19.633 61.5992C20.9215 61.5992 21.9942 62.5849 22.1309 63.8427H24.8518C24.9885 62.5849 26.0611 61.5992 27.3496 61.5992C28.638 61.5992 29.7113 62.5849 29.8474 63.8427H32.5677C32.7044 62.5849 33.7771 61.5992 35.0655 61.5992C36.3546 61.5992 37.4278 62.5849 37.5639 63.8427H40.2842C40.4203 62.5849 41.4942 61.5992 42.7826 61.5992C44.0705 61.6005 45.1438 62.5861 45.2798 63.8439Z",
+p33bc9700: "M40.7691 6.18944H6.74134V57.6552H40.7691V6.18944Z",
+p3794ff00: "M2.69689 0.898964H0V0.299655L2.69689 0V0.898964Z",
+p80f500: "M3.3484 7.79161H1.44272C1.44272 7.79161 1.4908 7.50011 1.8355 7.50011C1.94246 7.50011 2.0217 7.41074 2.06801 7.33906C1.57439 4.55522 3.5601 2.1744 3.5601 2.1744C3.5493 2.18119 3.24679 2.18408 3.03042 2.37663C3.0194 2.36395 2.82696 2.27068 2.74939 2.28036C2.74939 2.28036 2.8786 2.36706 2.90443 2.42805C2.90443 2.42805 2.66213 2.4955 2.4619 2.63351C2.4619 2.63351 2.30363 2.54047 2.20991 2.56607C2.20991 2.56607 2.33591 2.64954 2.35527 2.68805C2.35527 2.68805 2.04519 2.83575 1.86755 3.05401C1.86755 3.05401 1.86043 2.42638 2.394 2.1488C2.80748 1.93377 3.48252 2.03004 3.48252 2.03004C3.48252 2.03004 3.22085 1.84707 2.90754 1.85998C2.90754 1.85998 2.8559 1.71874 2.71054 1.69303C2.71054 1.69303 2.74927 1.76359 2.76218 1.85352C2.76218 1.85352 2.57809 1.83104 2.30997 1.89849C2.30997 1.89849 2.20012 1.77973 2.12265 1.77005C2.12265 1.77005 2.1517 1.84061 2.18075 1.91774C2.18075 1.91774 1.71886 2.03004 1.49603 2.17451C1.49603 2.17451 1.8158 1.33676 2.64588 1.42346C3.3149 1.49336 3.57935 1.89526 3.57935 1.89526C3.57935 1.89526 3.4311 1.49302 3.26927 1.4042C3.2725 1.37527 3.29832 1.21477 3.21763 1.13775C3.21763 1.13775 3.19503 1.28222 3.16921 1.31427C3.16921 1.31427 2.94961 1.1185 2.81394 1.08633C2.81394 1.08633 2.81717 0.938635 2.74939 0.893781C2.74939 0.893781 2.7397 1.05428 2.71711 1.06708C2.71711 1.06708 2.51365 0.906581 2.09372 0.945091C2.09372 0.945091 2.46835 0.608074 2.86892 0.710804C3.26938 0.813534 3.57301 1.1441 3.72805 1.72508C3.72805 1.72508 3.82822 1.31438 3.699 1.02211C3.699 1.02211 3.7798 0.890554 3.75387 0.81665C3.75387 0.81665 3.69254 0.903353 3.64079 0.896898C3.64079 0.896898 3.54062 0.61119 3.48575 0.537398C3.48575 0.537398 3.54707 0.383359 3.51157 0.312683C3.51157 0.312683 3.45993 0.441123 3.42431 0.441123C3.42431 0.441123 3.37589 0.242119 3.111 0.00783182C3.111 0.00783182 3.66706 -0.0925609 3.91525 0.454034C4.19952 1.07999 4.00574 1.51005 3.95399 1.75725C3.95399 1.75725 4.43736 1.16502 5.09737 1.36569C5.64642 1.53264 5.66267 2.24519 5.66267 2.24519C5.66267 2.24519 5.52699 2.04941 5.30417 1.94345C5.30417 1.94345 5.27835 1.72519 5.16527 1.64495C5.16527 1.64495 5.21691 1.7509 5.16204 1.85998C5.16204 1.85998 4.98763 1.71874 4.79709 1.73477C4.79709 1.73477 4.74544 1.65129 4.60977 1.58707C4.60977 1.58707 4.65028 1.65418 4.6554 1.72887C4.6554 1.72887 4.19662 1.73376 3.95043 1.96816C3.95043 1.96816 4.81901 1.96015 5.09415 2.28359C5.35904 2.59489 5.31051 3.09563 5.25564 3.36209C5.25564 3.36209 5.14579 3.11812 5.01334 2.97365C5.01334 2.97365 5.02948 2.74893 4.96493 2.66234C4.96493 2.66234 4.9617 2.83564 4.9036 2.86457C4.9036 2.86457 4.85752 2.6432 4.68078 2.50507C4.68078 2.50507 4.7066 2.41837 4.65818 2.29327C4.65818 2.29327 4.62613 2.40056 4.59062 2.4423C4.59062 2.4423 4.25884 2.17674 3.89344 2.15103C3.89344 2.15103 4.37815 2.49895 4.45473 2.855C4.52841 3.19736 4.59686 3.6863 4.19629 4.17102C4.19629 4.17102 4.1866 3.79549 4.12205 3.67028C4.12205 3.67028 4.22545 3.53549 4.23513 3.38134C4.23513 3.38134 4.16412 3.45513 4.10268 3.49053C4.10268 3.49053 4.08009 3.1278 4.05104 3.07326C4.05104 3.07326 4.17703 2.93848 4.13507 2.83252C4.13507 2.83252 4.11248 2.90954 4.02845 2.94805C4.02845 2.94805 3.98003 2.56607 3.72482 2.26433C3.72482 2.26433 1.94402 4.3708 2.57709 7.36911C2.95741 7.7314 2.89229 7.24635 3.3484 7.79161Z",
+pefd30f0: "M28.1 55.2C43.0669 55.2 55.2 43.0669 55.2 28.1C55.2 13.1331 43.0669 1 28.1 1C13.1331 1 1 13.1331 1 28.1C1 43.0669 13.1331 55.2 28.1 55.2Z",
+}
diff --git a/src/imports/svg-tirbryj54p.ts b/src/imports/svg-tirbryj54p.ts
new file mode 100644
index 0000000..961b2aa
--- /dev/null
+++ b/src/imports/svg-tirbryj54p.ts
@@ -0,0 +1,9 @@
+export default {
+p1358f400: "M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z",
+p1873f780: "M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z",
+p2ddd6280: "M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7",
+p2eab3c00: "M12.07 10.315C12.4512 10.1667 12.8877 10.0654 13.5265 10.0363C14.1666 10.0068 14.3712 10 16.0007 10C17.6302 10 17.8347 10.0072 18.4745 10.0363C19.1128 10.0649 19.549 10.1667 19.9309 10.315C20.325 10.4682 20.6599 10.6732 20.9933 11.0071C21.3268 11.341 21.5319 11.6754 21.6855 12.07C21.8338 12.4511 21.9351 12.8875 21.9641 13.5263C21.9932 14.1661 22 14.3706 22 16C22 17.6294 21.9932 17.8335 21.9641 18.4737C21.9355 19.1124 21.8338 19.5487 21.6855 19.9301C21.5319 20.3245 21.3273 20.6595 20.9933 20.9929C20.6594 21.3263 20.325 21.5314 19.9305 21.685C19.549 21.8333 19.1128 21.9346 18.474 21.9637C17.8343 21.9932 17.6297 22 16.0003 22C14.3708 22 14.1666 21.9927 13.5265 21.9637C12.8877 21.9346 12.4519 21.8333 12.07 21.685C11.6753 21.5314 11.341 21.3262 11.0071 20.9929C10.6732 20.6597 10.4682 20.3245 10.315 19.9301C10.1667 19.5487 10.0654 19.1125 10.0363 18.4737C10.0068 17.8339 10 17.6294 10 16C10 14.3706 10.0068 14.1661 10.0363 13.5263C10.0654 12.8876 10.1667 12.4514 10.315 12.07C10.4682 11.6752 10.6732 11.3405 11.0071 11.0071C11.3411 10.6737 11.6753 10.4682 12.07 10.315ZM15.9997 14C14.8953 14 14 14.8955 14 16C14 17.1045 14.8953 18 15.9997 18C17.1043 18 18 17.1043 18 16C18 14.8957 17.1043 14 15.9997 14ZM12.6667 16C12.6667 14.1594 14.1586 12.6667 15.9997 12.6667C17.8405 12.6667 19.3333 14.1591 19.3333 16C19.3333 17.8409 17.8405 19.3333 15.9997 19.3333C14.1586 19.3333 12.6667 17.8407 12.6667 16ZM20 12.6667C20.3682 12.6667 20.6667 12.3682 20.6667 12C20.6667 11.6318 20.3682 11.3333 20 11.3333C19.6318 11.3333 19.3333 11.6318 19.3333 12C19.3333 12.3682 19.6318 12.6667 20 12.6667Z",
+p317063f1: "M20.58 19.37L17.59 11.01C17.38 10.46 16.91 10.12 16.37 10.12C15.83 10.12 15.37 10.46 15.14 11.03L12.16 19.37C12.02 19.76 12.22 20.19 12.61 20.33C13 20.47 13.43 20.27 13.57 19.88L14.19 18.15H18.54L19.16 19.88C19.27 20.19 19.56 20.38 19.87 20.38C19.95 20.38 20.04 20.37 20.12 20.34C20.51 20.2 20.71 19.77 20.57 19.38L20.58 19.37ZM14.74 16.64L16.38 12.05L18.02 16.64H14.74ZM12.19 7.85C9.92999 11.42 7.89 13.58 5.41 15.02C5.29 15.09 5.16 15.12 5.04 15.12C4.78 15.12 4.53 14.99 4.39 14.75C4.18 14.39 4.3 13.93 4.66 13.73C6.75999 12.51 8.48 10.76 10.41 7.86H4.12C3.71 7.86 3.37 7.52 3.37 7.11C3.37 6.7 3.71 6.36 4.12 6.36H7.87V4.38C7.87 3.97 8.21 3.63 8.62 3.63C9.02999 3.63 9.37 3.97 9.37 4.38V6.36H13.12C13.53 6.36 13.87 6.7 13.87 7.11C13.87 7.52 13.53 7.86 13.12 7.86H12.18L12.19 7.85ZM12.23 15.12C12.1 15.12 11.97 15.09 11.85 15.02C11.2 14.64 10.57 14.22 9.97999 13.78C9.64999 13.53 9.58 13.06 9.83 12.73C10.08 12.4 10.55 12.33 10.88 12.58C11.42 12.99 12.01 13.37 12.61 13.72C12.97 13.93 13.09 14.39 12.88 14.75C12.74 14.99 12.49 15.12 12.23 15.12Z",
+p3754fa00: "M19.0226 10.0027V10H19.7259L19.9829 10.0506C20.1542 10.0835 20.3098 10.1265 20.4495 10.1798C20.5893 10.2331 20.7245 10.2952 20.8552 10.3663C20.986 10.4373 21.1046 10.5097 21.2111 10.5834C21.3165 10.6562 21.4112 10.7334 21.4951 10.8151C21.578 10.8977 21.7074 10.919 21.8832 10.879C22.0591 10.8391 22.2485 10.7836 22.4513 10.7125C22.6542 10.6415 22.8548 10.5616 23.0532 10.4728C23.2516 10.384 23.3724 10.3276 23.4157 10.3037C23.458 10.2788 23.4806 10.2655 23.4833 10.2637L23.486 10.2597L23.4995 10.253L23.5131 10.2464L23.5266 10.2397L23.5401 10.2331L23.5428 10.2291L23.5469 10.2264L23.551 10.2238L23.5537 10.2198L23.5672 10.2158L23.5807 10.2131L23.578 10.2331L23.5739 10.253L23.5672 10.273L23.5604 10.293L23.5537 10.3063L23.5469 10.3196L23.5401 10.3396C23.5356 10.3529 23.5311 10.3707 23.5266 10.3929C23.5221 10.4151 23.4793 10.5039 23.3981 10.6593C23.317 10.8147 23.2155 10.9723 23.0938 11.1321C22.9721 11.2919 22.8629 11.4126 22.7665 11.4943C22.6691 11.5769 22.6046 11.6346 22.5731 11.6675C22.5415 11.7012 22.5031 11.7323 22.4581 11.7607L22.3904 11.8047L22.3769 11.8113L22.3634 11.818L22.3607 11.822L22.3566 11.8246L22.3526 11.8273L22.3499 11.8313L22.3363 11.838L22.3228 11.8446L22.3202 11.8486L22.316 11.8513L22.312 11.8539L22.3093 11.8579L22.3066 11.8619L22.3025 11.8646L22.2985 11.8673L22.2958 11.8713H22.3634L22.7421 11.7913C22.9946 11.7381 23.2358 11.6737 23.4657 11.5982L23.8309 11.4784L23.8715 11.465L23.8918 11.4584L23.9054 11.4517L23.9188 11.4451L23.9323 11.4384L23.9459 11.4317L23.9729 11.4277L24 11.4251V11.4517L23.9932 11.4544L23.9865 11.4584L23.9838 11.4624L23.9797 11.465L23.9756 11.4677L23.9729 11.4717L23.9702 11.4757L23.9662 11.4784L23.9621 11.481L23.9594 11.485L23.9567 11.489L23.9527 11.4917L23.9459 11.505L23.9391 11.5183L23.9351 11.521C23.9333 11.5236 23.876 11.5991 23.7633 11.7474C23.6506 11.8966 23.5898 11.972 23.5807 11.9738C23.5717 11.9765 23.5591 11.9898 23.5428 12.0138C23.5275 12.0386 23.432 12.1376 23.2561 12.3108C23.0803 12.4839 22.9081 12.638 22.7394 12.7729C22.5699 12.9088 22.4843 13.0757 22.4825 13.2737C22.4798 13.4708 22.4693 13.6937 22.4513 13.9423C22.4333 14.1909 22.3995 14.4595 22.3499 14.748C22.3003 15.0366 22.2236 15.3629 22.1199 15.727C22.0163 16.091 21.89 16.4462 21.7412 16.7924C21.5924 17.1387 21.4369 17.4495 21.2746 17.7248C21.1123 18 20.9635 18.2331 20.8282 18.424C20.6929 18.6149 20.5555 18.7946 20.4157 18.9634C20.2759 19.1321 20.0992 19.3221 19.8855 19.5334C19.6708 19.7439 19.5537 19.8593 19.5338 19.8797C19.5131 19.8992 19.4247 19.9721 19.2687 20.0981C19.1136 20.225 18.9468 20.352 18.7682 20.479C18.5906 20.6051 18.4274 20.7103 18.2786 20.7947C18.1298 20.8791 17.9504 20.9754 17.7403 21.0837C17.5311 21.1929 17.3047 21.2941 17.0613 21.3873C16.8178 21.4805 16.5609 21.5672 16.2904 21.647C16.0198 21.727 15.7583 21.7891 15.5059 21.8335C15.2534 21.8779 14.9671 21.9156 14.647 21.9468L14.1668 21.9933V22H13.2876V21.9933L13.1727 21.9867C13.096 21.9822 13.0329 21.9778 12.9833 21.9734C12.9337 21.969 12.7466 21.9445 12.422 21.9001C12.0974 21.8557 11.8427 21.8113 11.6578 21.7669C11.473 21.7225 11.1979 21.6382 10.8327 21.5139C10.4675 21.3896 10.1551 21.264 9.8954 21.137C9.63662 21.0109 9.47431 20.931 9.40847 20.8972C9.34355 20.8644 9.27052 20.8236 9.18936 20.7747L9.06763 20.7015L9.06494 20.6975L9.06086 20.6948L9.05681 20.6922L9.0541 20.6881L9.04058 20.6815L9.02705 20.6748L9.02436 20.6708L9.02029 20.6681L9.01623 20.6655L9.01352 20.6615L9.01084 20.6575L9.00677 20.6548H9V20.6282L9.01352 20.6309L9.02705 20.6349L9.08791 20.6415C9.1285 20.6459 9.23896 20.6526 9.4193 20.6615C9.59965 20.6704 9.79125 20.6704 9.99414 20.6615C10.197 20.6526 10.4044 20.6326 10.6163 20.6016C10.8282 20.5705 11.0785 20.5172 11.367 20.4417C11.6556 20.3663 11.9207 20.2766 12.1623 20.1727C12.4031 20.0679 12.5744 19.9898 12.6763 19.9383C12.7773 19.8877 12.9315 19.7936 13.1389 19.6559L13.45 19.4495L13.4527 19.4455L13.4567 19.4429L13.4608 19.4402L13.4635 19.4362L13.4662 19.4322L13.4702 19.4295L13.4743 19.4268L13.477 19.4229L13.4905 19.4189L13.5041 19.4162L13.5068 19.4029L13.5108 19.3895L13.5149 19.3869L13.5176 19.3829L13.4094 19.3763C13.3372 19.3718 13.2674 19.3674 13.1997 19.3629C13.1321 19.3585 13.0262 19.3385 12.8819 19.303C12.7376 19.2674 12.5821 19.2142 12.4152 19.1432C12.2484 19.0722 12.0861 18.9878 11.9283 18.8901C11.7705 18.7925 11.6564 18.7112 11.5861 18.6464C11.5167 18.5825 11.4265 18.4919 11.3156 18.3747C11.2056 18.2566 11.11 18.1354 11.0289 18.0111C10.9477 17.8868 10.8702 17.7434 10.7962 17.5809L10.684 17.3385L10.6772 17.3185L10.6704 17.2985L10.6664 17.2853L10.6637 17.2719L10.684 17.2745L10.7042 17.2786L10.853 17.2985C10.9522 17.3119 11.1078 17.3163 11.3197 17.3119C11.5316 17.3075 11.6781 17.2986 11.7592 17.2853C11.8404 17.2719 11.89 17.263 11.908 17.2586L11.9351 17.252L11.9689 17.2453L12.0027 17.2386L12.0054 17.2347L12.0095 17.232L12.0135 17.2293L12.0162 17.2253L11.9892 17.2187L11.9621 17.212L11.9351 17.2053L11.908 17.1986L11.881 17.192C11.8629 17.1876 11.8314 17.1787 11.7863 17.1653C11.7412 17.1521 11.6195 17.1032 11.4211 17.0189C11.2227 16.9345 11.0649 16.8524 10.9477 16.7725C10.8302 16.6923 10.7181 16.6047 10.6123 16.5101C10.5068 16.4142 10.3909 16.2908 10.2646 16.1399C10.1384 15.9889 10.0257 15.8135 9.92651 15.6137C9.82732 15.4139 9.75293 15.2231 9.70333 15.0411C9.65394 14.8601 9.62135 14.6751 9.60596 14.4883L9.5816 14.2087L9.59513 14.2113L9.60865 14.2153L9.62219 14.222L9.63571 14.2286L9.64923 14.2353L9.66276 14.242L9.87241 14.3352C10.0122 14.3973 10.1858 14.4506 10.3931 14.495C10.6006 14.5394 10.7245 14.5638 10.7651 14.5682L10.826 14.5749H10.9477L10.945 14.5709L10.9409 14.5682L10.9369 14.5656L10.9342 14.5616L10.9315 14.5576L10.9274 14.555L10.9234 14.5523L10.9207 14.5483L10.9071 14.5416L10.8936 14.535L10.8909 14.531L10.8868 14.5283L10.8828 14.5256L10.8801 14.5217L10.8665 14.515L10.853 14.5083L10.8503 14.5044C10.8476 14.5026 10.8088 14.4741 10.734 14.4191C10.66 14.3632 10.5825 14.2908 10.5014 14.202C10.4202 14.1132 10.339 14.02 10.2579 13.9223C10.1766 13.8244 10.1042 13.7197 10.0415 13.6093C9.97837 13.4983 9.91163 13.3572 9.8413 13.1858C9.77187 13.0153 9.71912 12.8435 9.68305 12.6704C9.64699 12.4972 9.6267 12.3263 9.62219 12.1576C9.61768 11.9889 9.62218 11.8446 9.63571 11.7248C9.64923 11.6049 9.67628 11.4695 9.71687 11.3185C9.75744 11.1676 9.81606 11.0078 9.89269 10.8391L10.0077 10.586L10.0144 10.566L10.0212 10.5461L10.0253 10.5434L10.0279 10.5394L10.0307 10.5354L10.0347 10.5327L10.0388 10.5354L10.0415 10.5394L10.0442 10.5434L10.0482 10.5461L10.0523 10.5487L10.055 10.5527L10.0577 10.5567L10.0618 10.5594L10.0685 10.5727L10.0753 10.586L10.0794 10.5887L10.0821 10.5927L10.2646 10.7925C10.3864 10.9256 10.5307 11.0744 10.6975 11.2386C10.8643 11.4029 10.9567 11.4881 10.9747 11.4943C10.9928 11.5014 11.0153 11.5219 11.0424 11.5556C11.0694 11.5885 11.1596 11.667 11.3129 11.7913C11.4662 11.9156 11.6668 12.0599 11.9148 12.2242C12.1628 12.3884 12.4378 12.5505 12.7399 12.7103C13.0419 12.8701 13.3666 13.0144 13.7137 13.1432C14.0609 13.2719 14.3043 13.3563 14.4441 13.3962C14.5839 13.4362 14.8228 13.4872 15.1609 13.5494C15.4991 13.6116 15.7538 13.6515 15.9251 13.6693C16.0965 13.687 16.2137 13.6972 16.2768 13.6999L16.3715 13.7026L16.3688 13.6826L16.3648 13.6626L16.3377 13.4961C16.3196 13.3851 16.3106 13.2297 16.3106 13.03C16.3106 12.8302 16.3265 12.646 16.358 12.4772C16.3895 12.3085 16.4369 12.1376 16.5 11.9645C16.5632 11.7913 16.6249 11.6524 16.6853 11.5476C16.7466 11.4437 16.8268 11.3252 16.9261 11.192C17.0252 11.0588 17.1538 10.9212 17.3116 10.7791C17.4694 10.6371 17.6497 10.5105 17.8526 10.3996C18.0554 10.2886 18.2425 10.2042 18.4138 10.1465C18.5852 10.0888 18.7295 10.0511 18.8467 10.0333C18.9639 10.0155 19.0226 10.0053 19.0226 10.0027Z",
+pe943800: "M16.8946 22V16.7982H18.6636L18.9284 14.576H16.8945V13.1573C16.8945 12.514 17.0597 12.0755 17.9124 12.0755L19 12.075V10.0876C18.8119 10.0605 18.1662 10 17.4152 10C15.8471 10 14.7735 11.0355 14.7735 12.9373V14.576H13V16.7982H14.7735V21.9999L16.8946 22Z",
+}
diff --git a/src/imports/svg-uozb6wgfml.ts b/src/imports/svg-uozb6wgfml.ts
new file mode 100644
index 0000000..3cb55f6
--- /dev/null
+++ b/src/imports/svg-uozb6wgfml.ts
@@ -0,0 +1,54 @@
+export default {
+p11d0cb00: "M130 0H5C2.23858 0 0 2.23858 0 5V35C0 37.7614 2.23858 40 5 40H130C132.761 40 135 37.7614 135 35V5C135 2.23858 132.761 0 130 0Z",
+p1358f400: "M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z",
+p140623c0: "M20.7324 17.5327C20.7324 20.3462 19.2266 22.1538 16.9541 22.1538C16.3784 22.1839 15.8059 22.0513 15.3022 21.7712C14.7984 21.491 14.3836 21.0747 14.1055 20.5698H14.0625V25.0542H12.2041V13.0054H14.0029V14.5112H14.0371C14.3281 14.0088 14.7498 13.5946 15.2574 13.3127C15.7651 13.0309 16.3396 12.8919 16.9199 12.9106C19.2177 12.9107 20.7324 14.7271 20.7324 17.5327ZM18.8223 17.5327C18.8223 15.6997 17.875 14.4946 16.4297 14.4946C15.0098 14.4946 14.0547 15.7251 14.0547 17.5327C14.0547 19.3569 15.0098 20.5786 16.4297 20.5786C17.875 20.5786 18.8223 19.3823 18.8223 17.5327Z",
+p146a6200: "M18.8965 7.13442V1.13442H19.667V7.13442H18.8965Z",
+p14978a80: "M74.957 19.3999C74.707 21.0435 73.1064 22.1714 71.0586 22.1714C68.4248 22.1714 66.79 20.4067 66.79 17.5757C66.79 14.7358 68.4336 12.894 70.9805 12.894C73.4853 12.894 75.0606 14.6147 75.0606 17.3599V17.9966H68.666V18.1089C68.6365 18.4421 68.6782 18.7778 68.7884 19.0936C68.8986 19.4094 69.0747 19.6982 69.3051 19.9408C69.5354 20.1833 69.8147 20.3741 70.1245 20.5004C70.4342 20.6267 70.7673 20.6856 71.1016 20.6733C71.5407 20.7145 71.9814 20.6128 72.3582 20.3833C72.7349 20.1539 73.0274 19.809 73.1924 19.3999L74.957 19.3999ZM68.6748 16.6978H73.2012C73.2179 16.3982 73.1724 16.0983 73.0678 15.8171C72.9631 15.5359 72.8014 15.2794 72.5929 15.0636C72.3844 14.8479 72.1335 14.6775 71.856 14.5633C71.5785 14.4491 71.2805 14.3935 70.9805 14.3999C70.6778 14.3981 70.3778 14.4562 70.0978 14.571C69.8178 14.6857 69.5632 14.8548 69.3489 15.0684C69.1345 15.2821 68.9646 15.536 68.8489 15.8157C68.7332 16.0953 68.674 16.3951 68.6748 16.6978Z",
+p1660e80: "M52.5 40V50C52.5 51.3807 51.3807 52.5 50 52.5H10C8.6193 52.5 7.5 51.3807 7.5 50V45M52.5 40V10C52.5 8.6193 51.3807 7.5 50 7.5H10C8.6193 7.5 7.5 8.6193 7.5 10V45M52.5 40L38.7072 30.8048C37.9607 30.307 37.0047 30.2475 36.2022 30.6487L7.5 45",
+p1865d740: "M70.334 5.04493C70.2132 5.45647 69.9516 5.81245 69.5949 6.0506C69.2383 6.28875 68.8092 6.3939 68.3828 6.34766C68.0861 6.35549 67.7913 6.29867 67.5188 6.18114C67.2463 6.06361 67.0027 5.88819 66.8047 5.66706C66.6068 5.44592 66.4594 5.18436 66.3727 4.90054C66.286 4.61672 66.2622 4.31743 66.3027 4.02345C66.2632 3.72856 66.2875 3.42863 66.374 3.14396C66.4605 2.85929 66.6071 2.59652 66.804 2.37345C67.0009 2.15037 67.2434 1.9722 67.5151 1.85099C67.7868 1.72979 68.0814 1.66837 68.3789 1.67091C69.6318 1.67091 70.3877 2.52691 70.3877 3.94091V4.251H67.208V4.3008C67.1941 4.46605 67.2149 4.63238 67.269 4.78913C67.3231 4.94588 67.4094 5.08958 67.5223 5.21104C67.6352 5.3325 67.7722 5.42902 67.9246 5.49441C68.077 5.55981 68.2414 5.59264 68.4072 5.5908C68.6198 5.61632 68.8351 5.57804 69.0259 5.48083C69.2167 5.38363 69.3742 5.23188 69.4785 5.0449L70.334 5.04493ZM67.208 3.59376H69.4824C69.4936 3.44263 69.473 3.29083 69.4221 3.14811C69.3711 3.0054 69.2909 2.87492 69.1865 2.76506C69.0821 2.6552 68.9559 2.5684 68.816 2.51022C68.676 2.45205 68.5255 2.42379 68.374 2.42726C68.2203 2.42533 68.0678 2.45419 67.9254 2.51213C67.783 2.57008 67.6537 2.65594 67.545 2.76465C67.4364 2.87336 67.3506 3.00273 67.2927 3.14512C67.2348 3.28752 67.206 3.44006 67.208 3.59376Z",
+p1873f780: "M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z",
+p190f4c00: "M32.5679 6.35902C31.9839 6.94126 31.1928 7.26822 30.3682 7.26822C29.5435 7.26822 28.7525 6.94126 28.1685 6.35902C27.8796 6.06639 27.6524 5.71865 27.5006 5.33649C27.3488 4.95432 27.2753 4.54553 27.2847 4.13442C27.2753 3.7233 27.3488 3.31451 27.5006 2.93234C27.6524 2.55018 27.8796 2.20244 28.1685 1.90982C28.4571 1.62108 28.7999 1.39211 29.1772 1.23602C29.5544 1.07992 29.9588 0.999755 30.367 1.00012C30.7753 1.00048 31.1795 1.08136 31.5565 1.23813C31.9335 1.39489 32.2758 1.62447 32.564 1.91372C32.8531 2.20557 33.0806 2.55253 33.2331 2.934C33.3856 3.31547 33.4599 3.72368 33.4517 4.13442C33.4607 4.5455 33.3872 4.95422 33.2354 5.33635C33.0836 5.71848 32.8566 6.06624 32.5679 6.35902ZM28.7378 5.85662C29.1703 6.28841 29.7565 6.53093 30.3677 6.53093C30.9788 6.53093 31.565 6.28841 31.9976 5.85662C32.2194 5.62953 32.3928 5.35984 32.5075 5.06384C32.6221 4.76783 32.6756 4.45166 32.6646 4.13442C32.6756 3.81718 32.6221 3.501 32.5075 3.20499C32.3928 2.90899 32.2194 2.6393 31.9976 2.41222C31.565 1.98042 30.9788 1.73791 30.3677 1.73791C29.7565 1.73791 29.1703 1.98042 28.7378 2.41222C28.5163 2.63948 28.3431 2.90922 28.2286 3.2052C28.1142 3.50118 28.0608 3.81727 28.0718 4.13442C28.0608 4.45157 28.1142 4.76765 28.2286 5.06363C28.3431 5.35961 28.5163 5.62935 28.7378 5.85662Z",
+p1ab2e500: "M130 0.8C131.114 0.801287 132.181 1.24423 132.968 2.03165C133.756 2.81907 134.199 3.88666 134.2 5.0002V35.0002C134.199 36.1137 133.756 37.1813 132.968 37.9687C132.181 38.7561 131.114 39.1991 130 39.2004H5C3.88645 39.1991 2.81888 38.7562 2.0315 37.9688C1.24412 37.1813 0.801231 36.1138 0.8 35.0002V5.0002C0.801212 3.88664 1.24409 2.81904 2.03148 2.03162C2.81886 1.2442 3.88644 0.801266 5 0.8H130ZM130 0.000200272H5C3.67511 0.00407837 2.40559 0.532108 1.46875 1.46895C0.531908 2.40579 0.0038781 3.67531 0 5.0002L0 35.0002C0.0038781 36.3251 0.531908 37.5946 1.46875 38.5315C2.40559 39.4683 3.67511 39.9963 5 40.0002H130C131.325 39.9963 132.594 39.4683 133.531 38.5315C134.468 37.5946 134.996 36.3251 135 35.0002V5.0002C134.996 3.67531 134.468 2.40579 133.531 1.46895C132.594 0.532108 131.325 0.00407837 130 0.000200272V0.000200272Z",
+p1ae2b0c0: "M17.0588 17.1472L12.9294 13.0158V12.7235L17.0598 8.59311L17.1529 8.64621L22.0457 11.4263C23.4433 12.2203 23.4433 13.5195 22.0457 14.314L17.1529 17.0941L17.0588 17.1472Z",
+p1b13c280: "M17.1529 8.64571L2.54453 0.345309C2.24543 0.111403 1.87393 -0.0105038 1.49439 0.000710063C1.11486 0.0119239 0.7512 0.155552 0.466431 0.406709L12.9294 12.8697L17.1529 8.64571Z",
+p1b75f800: "M17.0598 17.0006L2.54453 25.2479C2.25695 25.4668 1.90595 25.5863 1.54452 25.5882C1.18309 25.5901 0.830837 25.4745 0.540931 25.2586L0.466431 25.3331L0.540431 25.4052L0.540931 25.4047C0.830788 25.6207 1.18306 25.7364 1.54452 25.7345C1.90598 25.7326 2.257 25.6131 2.54453 25.394L17.1529 17.0936L17.0598 17.0006Z",
+p1ba7a100: "M14.7973 11.5804C14.8081 10.7457 15.0298 9.92737 15.4418 9.20142C15.8538 8.47546 16.4428 7.86552 17.1539 7.42835C16.7021 6.78319 16.1062 6.25225 15.4134 5.8777C14.7205 5.50314 13.9499 5.2953 13.1627 5.27067C11.4835 5.09441 9.85552 6.2755 8.99981 6.2755C8.12754 6.2755 6.81004 5.28817 5.39131 5.31736C4.47364 5.34701 3.57929 5.61386 2.79541 6.09192C2.01154 6.56998 1.36486 7.24294 0.918393 8.04523C-1.01561 11.3936 0.426982 16.3147 2.27959 19.0213C3.20649 20.3467 4.28977 21.8271 5.70722 21.7746C7.09428 21.7171 7.61232 20.8901 9.28662 20.8901C10.9454 20.8901 11.4314 21.7746 12.8776 21.7412C14.366 21.7171 15.3038 20.41 16.1981 19.0721C16.8641 18.1277 17.3766 17.084 17.7166 15.9796C16.8518 15.6139 16.1139 15.0017 15.5948 14.2194C15.0757 13.4371 14.7983 12.5193 14.7973 11.5804V11.5804Z",
+p1c846872: "M7.2534 4.00734C7.22509 3.71142 7.25895 3.41285 7.35279 3.13078C7.44663 2.84871 7.59838 2.58937 7.79833 2.36939C7.99827 2.14941 8.24198 1.97364 8.51383 1.85337C8.78568 1.73309 9.07967 1.67096 9.37694 1.67096C9.67421 1.67096 9.9682 1.73309 10.24 1.85337C10.5119 1.97364 10.7556 2.14941 10.9556 2.36939C11.1555 2.58937 11.3073 2.84871 11.4011 3.13078C11.4949 3.41285 11.5288 3.71142 11.5005 4.00734C11.5293 4.30356 11.4959 4.60254 11.4023 4.88507C11.3087 5.16759 11.157 5.42741 10.957 5.64783C10.757 5.86824 10.5131 6.04437 10.241 6.16491C9.96889 6.28544 9.67456 6.34771 9.37694 6.34771C9.07932 6.34771 8.78498 6.28544 8.51286 6.16491C8.24074 6.04437 7.99684 5.86824 7.79685 5.64783C7.59686 5.42741 7.44519 5.16759 7.3516 4.88507C7.25801 4.60254 7.22456 4.30356 7.2534 4.00734ZM10.5864 4.00734C10.5864 3.03127 10.1479 2.46047 9.3784 2.46047C8.60594 2.46047 8.1714 3.03127 8.1714 4.00735C8.1714 4.99124 8.60597 5.55764 9.3784 5.55764C10.1479 5.55763 10.5864 4.98732 10.5864 4.00734Z",
+p1fa9cb00: "M61.2773 0H62.1582V2.48145H62.2285C62.3466 2.22213 62.5419 2.00554 62.7876 1.86119C63.0332 1.71684 63.3175 1.65176 63.6015 1.67481C63.8195 1.66295 64.0374 1.69934 64.2396 1.78138C64.4419 1.86342 64.6236 1.9891 64.7717 2.14943C64.9198 2.30977 65.0307 2.50082 65.0965 2.70896C65.1623 2.91709 65.1813 3.13718 65.1523 3.35352V6.26075H64.2627V3.57275C64.2627 2.85351 63.9277 2.48925 63.2998 2.48925C63.1471 2.47672 62.9935 2.49772 62.8497 2.55077C62.7059 2.60383 62.5755 2.68766 62.4675 2.79639C62.3595 2.90513 62.2765 3.03615 62.2245 3.18029C62.1724 3.32443 62.1525 3.4782 62.166 3.63085V6.26073H61.2774L61.2773 0Z",
+p20fe0080: "M2.54453 0.491909L22.0457 11.5719C22.3094 11.6918 22.5414 11.8715 22.7234 12.0968C22.9054 12.3221 23.0323 12.5867 23.094 12.8697C23.0645 12.5572 22.9516 12.2584 22.7673 12.0045C22.5829 11.7505 22.3337 11.5507 22.0457 11.4258L2.54453 0.345809C1.14693 -0.448291 0.00363159 0.211308 0.00363159 1.81211V1.95821C0.00363159 0.357508 1.14693 -0.302091 2.54453 0.491909Z",
+p21d6a400: "M48.9189 10.8628V13.0054H50.6406V14.4771H48.9189V19.4683C48.9189 20.2437 49.2637 20.605 50.0205 20.605C50.2249 20.6014 50.429 20.5871 50.6318 20.562V22.0249C50.2916 22.0885 49.9457 22.1172 49.5996 22.1108C47.7666 22.1108 47.0518 21.4223 47.0518 19.6665V14.4771H45.7354V13.0054H47.0517V10.8628H48.9189Z",
+p22016470: "M31.9736 4.98732C31.9736 4.17677 32.5771 3.70949 33.6484 3.64308L34.8682 3.57277V3.1841C34.8682 2.70851 34.5537 2.43996 33.9463 2.43996C33.4502 2.43996 33.1064 2.62209 33.0078 2.94045H32.1475C32.2383 2.16701 32.9658 1.67092 33.9873 1.67092C35.1162 1.67092 35.7529 2.23292 35.7529 3.1841V6.26076H34.8975V5.62795H34.8271C34.6844 5.85494 34.484 6.03999 34.2464 6.1642C34.0088 6.28841 33.7424 6.34733 33.4746 6.33495C33.2856 6.35461 33.0945 6.33444 32.9137 6.27575C32.733 6.21705 32.5665 6.12112 32.4251 5.99415C32.2837 5.86718 32.1705 5.71199 32.0927 5.53857C32.0149 5.36516 31.9744 5.17737 31.9736 4.98732ZM34.8682 4.60255V4.22609L33.7685 4.2964C33.1484 4.3379 32.8672 4.54884 32.8672 4.94581C32.8672 5.35108 33.2187 5.58692 33.7022 5.58692C33.8438 5.60126 33.9869 5.58696 34.1229 5.54487C34.2589 5.50278 34.3851 5.43376 34.4938 5.34192C34.6026 5.25007 34.6918 5.13729 34.7561 5.01027C34.8204 4.88325 34.8585 4.74459 34.8682 4.60255Z",
+p234bdb12: "M23.0869 7.13442H22.3154V1.87172H20.6397V1.13442H24.7627V1.87172H23.0869V7.13442Z",
+p235e2a00: "M17.146 6.26075H16.2241L15.2935 2.94434H15.2231L14.2964 6.26075H13.3833L12.1421 1.75782H13.0435L13.8501 5.19382H13.9165L14.8423 1.75782H15.6948L16.6206 5.19382H16.6909L17.4936 1.75782H18.3823L17.146 6.26075Z",
+p25f97b00: "M22.0457 14.1674L17.0598 17.0006L17.1529 17.0936L22.0457 14.3135C22.3335 14.1886 22.5826 13.9888 22.767 13.735C22.9513 13.4811 23.0643 13.1824 23.094 12.8701C23.0322 13.153 22.9052 13.4175 22.7232 13.6427C22.5413 13.8679 22.3093 14.0475 22.0457 14.1674V14.1674Z",
+p26d43100: "M0.466427 25.187C0.138544 24.7949 -0.0270254 24.2923 0.00362672 23.7821V23.9282C-0.0270439 24.4384 0.138528 24.941 0.466427 25.3331L0.540927 25.2586L0.466427 25.187Z",
+p26de8970: "M12.0657 3.49062C12.8772 2.51641 13.277 1.26423 13.1802 0C11.9404 0.13022 10.7951 0.722779 9.97262 1.65961C9.57048 2.11728 9.26248 2.64971 9.06624 3.22648C8.86999 3.80325 8.78935 4.41304 8.82891 5.021C9.44905 5.02739 10.0626 4.89297 10.6232 4.62788C11.1839 4.3628 11.6771 3.97395 12.0657 3.49062Z",
+p28b0e180: "M50.2422 1.75782H51.0976V2.47315H51.1641C51.2767 2.21623 51.4667 2.00086 51.7076 1.85705C51.9485 1.71324 52.2282 1.64817 52.5078 1.6709C52.7269 1.65443 52.9469 1.68746 53.1515 1.76756C53.3561 1.84765 53.5401 1.97276 53.6897 2.1336C53.8394 2.29445 53.951 2.48691 54.0162 2.69673C54.0814 2.90655 54.0986 3.12835 54.0664 3.3457V6.2607H53.1777V3.56886C53.1777 2.84523 52.8633 2.48536 52.206 2.48536C52.0573 2.47843 51.9088 2.50375 51.7707 2.55958C51.6327 2.61541 51.5083 2.70043 51.4062 2.80882C51.3041 2.9172 51.2266 3.04639 51.1791 3.18752C51.1315 3.32865 51.1151 3.47839 51.1308 3.62647V6.26075H50.2422V1.75782Z",
+p2ddae880: "M17.1529 17.0936L12.9294 12.8697L0.466431 25.3326C0.7512 25.5838 1.11486 25.7274 1.49439 25.7386C1.87393 25.7498 2.24543 25.6279 2.54453 25.394L17.1529 17.0936Z",
+p2ddd6280: "M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7",
+p2e09de00: "M10.9863 1.87172H8.25386V3.77402H10.7178V4.49482H8.25386V6.39712H10.9863V7.13442H7.48336V1.13442H10.9863V1.87172Z",
+p2eab3c00: "M12.07 10.315C12.4512 10.1667 12.8877 10.0654 13.5265 10.0363C14.1666 10.0068 14.3712 10 16.0007 10C17.6302 10 17.8347 10.0072 18.4745 10.0363C19.1128 10.0649 19.549 10.1667 19.9309 10.315C20.325 10.4682 20.6599 10.6732 20.9933 11.0071C21.3268 11.341 21.5319 11.6754 21.6855 12.07C21.8338 12.4511 21.9351 12.8875 21.9641 13.5263C21.9932 14.1661 22 14.3706 22 16C22 17.6294 21.9932 17.8335 21.9641 18.4737C21.9355 19.1124 21.8338 19.5487 21.6855 19.9301C21.5319 20.3245 21.3273 20.6595 20.9933 20.9929C20.6594 21.3263 20.325 21.5314 19.9305 21.685C19.549 21.8333 19.1128 21.9346 18.474 21.9637C17.8343 21.9932 17.6297 22 16.0003 22C14.3708 22 14.1666 21.9927 13.5265 21.9637C12.8877 21.9346 12.4519 21.8333 12.07 21.685C11.6753 21.5314 11.341 21.3262 11.0071 20.9929C10.6732 20.6597 10.4682 20.3245 10.315 19.9301C10.1667 19.5487 10.0654 19.1125 10.0363 18.4737C10.0068 17.8339 10 17.6294 10 16C10 14.3706 10.0068 14.1661 10.0363 13.5263C10.0654 12.8876 10.1667 12.4514 10.315 12.07C10.4682 11.6752 10.6732 11.3405 11.0071 11.0071C11.3411 10.6737 11.6753 10.4682 12.07 10.315ZM15.9997 14C14.8953 14 14 14.8955 14 16C14 17.1045 14.8953 18 15.9997 18C17.1043 18 18 17.1043 18 16C18 14.8957 17.1043 14 15.9997 14ZM12.6667 16C12.6667 14.1594 14.1586 12.6667 15.9997 12.6667C17.8405 12.6667 19.3333 14.1591 19.3333 16C19.3333 17.8409 17.8405 19.3333 15.9997 19.3333C14.1586 19.3333 12.6667 17.8407 12.6667 16ZM20 12.6667C20.3682 12.6667 20.6667 12.3682 20.6667 12C20.6667 11.6318 20.3682 11.3333 20 11.3333C19.6318 11.3333 19.3333 11.6318 19.3333 12C19.3333 12.3682 19.6318 12.6667 20 12.6667Z",
+p2edcc080: "M14.2373 7.13442H13.4658V1.87172H11.79V1.13442H15.9131V1.87172H14.2373V7.13442Z",
+p317063f1: "M20.58 19.37L17.59 11.01C17.38 10.46 16.91 10.12 16.37 10.12C15.83 10.12 15.37 10.46 15.14 11.03L12.16 19.37C12.02 19.76 12.22 20.19 12.61 20.33C13 20.47 13.43 20.27 13.57 19.88L14.19 18.15H18.54L19.16 19.88C19.27 20.19 19.56 20.38 19.87 20.38C19.95 20.38 20.04 20.37 20.12 20.34C20.51 20.2 20.71 19.77 20.57 19.38L20.58 19.37ZM14.74 16.64L16.38 12.05L18.02 16.64H14.74ZM12.19 7.85C9.92999 11.42 7.89 13.58 5.41 15.02C5.29 15.09 5.16 15.12 5.04 15.12C4.78 15.12 4.53 14.99 4.39 14.75C4.18 14.39 4.3 13.93 4.66 13.73C6.75999 12.51 8.48 10.76 10.41 7.86H4.12C3.71 7.86 3.37 7.52 3.37 7.11C3.37 6.7 3.71 6.36 4.12 6.36H7.87V4.38C7.87 3.97 8.21 3.63 8.62 3.63C9.02999 3.63 9.37 3.97 9.37 4.38V6.36H13.12C13.53 6.36 13.87 6.7 13.87 7.11C13.87 7.52 13.53 7.86 13.12 7.86H12.18L12.19 7.85ZM12.23 15.12C12.1 15.12 11.97 15.09 11.85 15.02C11.2 14.64 10.57 14.22 9.97999 13.78C9.64999 13.53 9.58 13.06 9.83 12.73C10.08 12.4 10.55 12.33 10.88 12.58C11.42 12.99 12.01 13.37 12.61 13.72C12.97 13.93 13.09 14.39 12.88 14.75C12.74 14.99 12.49 15.12 12.23 15.12Z",
+p330e6600: "M7.875 18.7026H3.1416L2.00488 22.0591H0L4.4834 9.64109H6.5664L11.0498 22.0591H9.01073L7.875 18.7026ZM3.63183 17.1538H7.38383L5.53422 11.7065H5.48246L3.63183 17.1538Z",
+p3394cd00: "M9.42998 39.128C9.08566 39.128 8.74966 39.1241 8.40804 39.1173C7.70034 39.1091 6.9943 39.0546 6.29571 38.9542C5.6443 38.8549 5.01327 38.6702 4.42342 38.4062C3.83897 38.1443 3.30591 37.801 2.84466 37.3893C2.37673 36.9825 1.98715 36.5107 1.69137 35.9926C1.39233 35.471 1.18538 34.912 1.07772 34.335C0.961463 33.715 0.898562 33.0881 0.889561 32.4596C0.882396 32.2487 0.873016 31.5463 0.873016 31.5463V8.44093C0.873016 8.44093 0.883007 7.74937 0.889618 7.5462C0.898236 6.91875 0.960772 6.29279 1.07668 5.67374C1.18454 5.09514 1.39165 4.53452 1.69085 4.01129C1.98554 3.4935 2.37296 3.02132 2.83807 2.61305C3.30266 2.20091 3.83742 1.85582 4.42286 1.59037C5.01136 1.3272 5.6412 1.1438 6.29129 1.04631C6.99218 0.944858 7.70067 0.890007 8.41082 0.882219L9.43053 0.870007H125.57L126.602 0.882709C127.306 0.89011 128.008 0.944472 128.702 1.04533C129.359 1.14404 129.995 1.32872 130.59 1.5933C131.763 2.12826 132.718 2.97461 133.32 4.01373C133.614 4.53335 133.818 5.0894 133.924 5.663C134.042 6.28713 134.107 6.91801 134.121 7.5506C134.124 7.83386 134.124 8.13813 134.124 8.44093C134.133 8.81601 134.133 9.17301 134.133 9.53295V30.466C134.133 30.8294 134.133 31.1839 134.124 31.5414C134.124 31.8667 134.124 32.1646 134.12 32.4713C134.106 33.0926 134.042 33.7122 133.927 34.3252C133.821 34.9064 133.615 35.4698 133.316 35.9956C133.018 36.5081 132.631 36.9758 132.169 37.3815C131.707 37.7954 131.173 38.1407 130.587 38.4043C129.994 38.6703 129.358 38.8557 128.702 38.9542C128.004 39.0551 127.297 39.1097 126.59 39.1173C126.259 39.1241 125.912 39.128 125.576 39.128L124.35 39.13L9.42998 39.128Z",
+p349a7f80: "M20 27.5C22.7614 27.5 25 25.2614 25 22.5C25 19.7386 22.7614 17.5 20 17.5C17.2386 17.5 15 19.7386 15 22.5C15 25.2614 17.2386 27.5 20 27.5Z",
+p35419200: "M30.6973 17.5327C30.6973 20.3462 29.1914 22.1538 26.9189 22.1538C26.3433 22.1839 25.7708 22.0513 25.267 21.7712C24.7632 21.491 24.3485 21.0747 24.0703 20.5698H24.0273V25.0542H22.1689V13.0054H23.9677V14.5112H24.0019C24.2929 14.0088 24.7146 13.5946 25.2222 13.3127C25.7299 13.0309 26.3044 12.8919 26.8847 12.9107C29.1826 12.9107 30.6973 14.7271 30.6973 17.5327ZM28.7871 17.5327C28.7871 15.6997 27.8398 14.4946 26.3945 14.4946C24.9746 14.4946 24.0195 15.7251 24.0195 17.5327C24.0195 19.3569 24.9746 20.5786 26.3945 20.5786C27.8398 20.5786 28.7871 19.3823 28.7871 17.5327Z",
+p35e78e00: "M44.8027 4.00734C44.7744 3.71142 44.8083 3.41285 44.9021 3.13078C44.9959 2.84871 45.1477 2.58937 45.3476 2.36939C45.5476 2.14941 45.7913 1.97364 46.0631 1.85337C46.335 1.73309 46.629 1.67096 46.9263 1.67096C47.2235 1.67096 47.5175 1.73309 47.7894 1.85337C48.0612 1.97364 48.3049 2.14941 48.5049 2.36939C48.7048 2.58937 48.8566 2.84871 48.9504 3.13078C49.0442 3.41285 49.0781 3.71142 49.0498 4.00734C49.0786 4.30356 49.0452 4.60254 48.9516 4.88507C48.858 5.16759 48.7063 5.42741 48.5063 5.64783C48.3064 5.86824 48.0625 6.04437 47.7903 6.16491C47.5182 6.28544 47.2239 6.34771 46.9263 6.34771C46.6286 6.34771 46.3343 6.28544 46.0622 6.16491C45.7901 6.04437 45.5462 5.86824 45.3462 5.64783C45.1462 5.42741 44.9945 5.16759 44.9009 4.88507C44.8073 4.60254 44.7739 4.30356 44.8027 4.00734ZM48.1357 4.00734C48.1357 3.03127 47.6972 2.46047 46.9277 2.46047C46.1553 2.46047 45.7207 3.03127 45.7207 4.00735C45.7207 4.99124 46.1553 5.55764 46.9277 5.55764C47.6973 5.55763 48.1357 4.98732 48.1357 4.00734Z",
+p360ff200: "M6.37696 4.37762C6.39514 4.74456 6.33844 5.11137 6.21033 5.4557C6.08222 5.80003 5.88537 6.11469 5.63176 6.38052C5.34755 6.67528 5.00431 6.90672 4.62449 7.05969C4.24467 7.21266 3.83684 7.28372 3.42766 7.26822C3.01588 7.2719 2.60752 7.19324 2.22657 7.03685C1.84563 6.88046 1.49979 6.64949 1.20938 6.35753C0.918978 6.06557 0.689869 5.7185 0.535514 5.33672C0.38116 4.95495 0.304678 4.54617 0.310565 4.13442C0.304724 3.72265 0.381233 3.31387 0.535598 2.93209C0.689963 2.55031 0.919067 2.20322 1.20946 1.91123C1.49985 1.61924 1.84567 1.38823 2.22659 1.23176C2.60752 1.0753 3.01587 0.996541 3.42766 1.00012C3.85105 0.998837 4.27019 1.08444 4.65916 1.25162C5.02043 1.39806 5.34199 1.62776 5.59766 1.92202L5.07026 2.44982C4.86928 2.21327 4.61665 2.02605 4.33185 1.90262C4.04705 1.77919 3.7377 1.72284 3.42766 1.73792C3.11558 1.7363 2.80639 1.79769 2.51859 1.9184C2.2308 2.03911 1.97032 2.21666 1.75277 2.44042C1.53522 2.66418 1.36507 2.92955 1.2525 3.22063C1.13994 3.5117 1.08727 3.8225 1.09766 4.13442C1.09022 4.60161 1.22169 5.0605 1.47539 5.45288C1.72909 5.84526 2.0936 6.15347 2.52269 6.33842C2.95178 6.52337 3.42613 6.57673 3.88559 6.49174C4.34505 6.40675 4.76893 6.18723 5.10347 5.86102C5.41135 5.52925 5.58982 5.09793 5.60636 4.64562H3.42766V3.92492H6.33496C6.36245 4.07426 6.37651 4.22577 6.37696 4.37762Z",
+p3709a00: "M61.7588 13.0054H63.5312V14.5464H63.5742C63.6942 14.0651 63.9761 13.6398 64.3727 13.3419C64.7693 13.044 65.2563 12.8917 65.752 12.9106C65.9661 12.9099 66.1797 12.9331 66.3887 12.98V14.7183C66.1183 14.6356 65.8363 14.5977 65.5537 14.606C65.2837 14.595 65.0146 14.6426 64.7647 14.7455C64.5149 14.8484 64.2903 15.0041 64.1063 15.202C63.9223 15.3999 63.7833 15.6353 63.6989 15.8919C63.6145 16.1486 63.5866 16.4205 63.6172 16.689V22.0591H61.7588L61.7588 13.0054Z",
+p3754fa00: "M19.0226 10.0027V10H19.7259L19.9829 10.0506C20.1542 10.0835 20.3098 10.1265 20.4495 10.1798C20.5893 10.2331 20.7245 10.2952 20.8552 10.3663C20.986 10.4373 21.1046 10.5097 21.2111 10.5834C21.3165 10.6562 21.4112 10.7334 21.4951 10.8151C21.578 10.8977 21.7074 10.919 21.8832 10.879C22.0591 10.8391 22.2485 10.7836 22.4513 10.7125C22.6542 10.6415 22.8548 10.5616 23.0532 10.4728C23.2516 10.384 23.3724 10.3276 23.4157 10.3037C23.458 10.2788 23.4806 10.2655 23.4833 10.2637L23.486 10.2597L23.4995 10.253L23.5131 10.2464L23.5266 10.2397L23.5401 10.2331L23.5428 10.2291L23.5469 10.2264L23.551 10.2238L23.5537 10.2198L23.5672 10.2158L23.5807 10.2131L23.578 10.2331L23.5739 10.253L23.5672 10.273L23.5604 10.293L23.5537 10.3063L23.5469 10.3196L23.5401 10.3396C23.5356 10.3529 23.5311 10.3707 23.5266 10.3929C23.5221 10.4151 23.4793 10.5039 23.3981 10.6593C23.317 10.8147 23.2155 10.9723 23.0938 11.1321C22.9721 11.2919 22.8629 11.4126 22.7665 11.4943C22.6691 11.5769 22.6046 11.6346 22.5731 11.6675C22.5415 11.7012 22.5031 11.7323 22.4581 11.7607L22.3904 11.8047L22.3769 11.8113L22.3634 11.818L22.3607 11.822L22.3566 11.8246L22.3526 11.8273L22.3499 11.8313L22.3363 11.838L22.3228 11.8446L22.3202 11.8486L22.316 11.8513L22.312 11.8539L22.3093 11.8579L22.3066 11.8619L22.3025 11.8646L22.2985 11.8673L22.2958 11.8713H22.3634L22.7421 11.7913C22.9946 11.7381 23.2358 11.6737 23.4657 11.5982L23.8309 11.4784L23.8715 11.465L23.8918 11.4584L23.9054 11.4517L23.9188 11.4451L23.9323 11.4384L23.9459 11.4317L23.9729 11.4277L24 11.4251V11.4517L23.9932 11.4544L23.9865 11.4584L23.9838 11.4624L23.9797 11.465L23.9756 11.4677L23.9729 11.4717L23.9702 11.4757L23.9662 11.4784L23.9621 11.481L23.9594 11.485L23.9567 11.489L23.9527 11.4917L23.9459 11.505L23.9391 11.5183L23.9351 11.521C23.9333 11.5236 23.876 11.5991 23.7633 11.7474C23.6506 11.8966 23.5898 11.972 23.5807 11.9738C23.5717 11.9765 23.5591 11.9898 23.5428 12.0138C23.5275 12.0386 23.432 12.1376 23.2561 12.3108C23.0803 12.4839 22.9081 12.638 22.7394 12.7729C22.5699 12.9088 22.4843 13.0757 22.4825 13.2737C22.4798 13.4708 22.4693 13.6937 22.4513 13.9423C22.4333 14.1909 22.3995 14.4595 22.3499 14.748C22.3003 15.0366 22.2236 15.3629 22.1199 15.727C22.0163 16.091 21.89 16.4462 21.7412 16.7924C21.5924 17.1387 21.4369 17.4495 21.2746 17.7248C21.1123 18 20.9635 18.2331 20.8282 18.424C20.6929 18.6149 20.5555 18.7946 20.4157 18.9634C20.2759 19.1321 20.0992 19.3221 19.8855 19.5334C19.6708 19.7439 19.5537 19.8593 19.5338 19.8797C19.5131 19.8992 19.4247 19.9721 19.2687 20.0981C19.1136 20.225 18.9468 20.352 18.7682 20.479C18.5906 20.6051 18.4274 20.7103 18.2786 20.7947C18.1298 20.8791 17.9504 20.9754 17.7403 21.0837C17.5311 21.1929 17.3047 21.2941 17.0613 21.3873C16.8178 21.4805 16.5609 21.5672 16.2904 21.647C16.0198 21.727 15.7583 21.7891 15.5059 21.8335C15.2534 21.8779 14.9671 21.9156 14.647 21.9468L14.1668 21.9933V22H13.2876V21.9933L13.1727 21.9867C13.096 21.9822 13.0329 21.9778 12.9833 21.9734C12.9337 21.969 12.7466 21.9445 12.422 21.9001C12.0974 21.8557 11.8427 21.8113 11.6578 21.7669C11.473 21.7225 11.1979 21.6382 10.8327 21.5139C10.4675 21.3896 10.1551 21.264 9.8954 21.137C9.63662 21.0109 9.47431 20.931 9.40847 20.8972C9.34355 20.8644 9.27052 20.8236 9.18936 20.7747L9.06763 20.7015L9.06494 20.6975L9.06086 20.6948L9.05681 20.6922L9.0541 20.6881L9.04058 20.6815L9.02705 20.6748L9.02436 20.6708L9.02029 20.6681L9.01623 20.6655L9.01352 20.6615L9.01084 20.6575L9.00677 20.6548H9V20.6282L9.01352 20.6309L9.02705 20.6349L9.08791 20.6415C9.1285 20.6459 9.23896 20.6526 9.4193 20.6615C9.59965 20.6704 9.79125 20.6704 9.99414 20.6615C10.197 20.6526 10.4044 20.6326 10.6163 20.6016C10.8282 20.5705 11.0785 20.5172 11.367 20.4417C11.6556 20.3663 11.9207 20.2766 12.1623 20.1727C12.4031 20.0679 12.5744 19.9898 12.6763 19.9383C12.7773 19.8877 12.9315 19.7936 13.1389 19.6559L13.45 19.4495L13.4527 19.4455L13.4567 19.4429L13.4608 19.4402L13.4635 19.4362L13.4662 19.4322L13.4702 19.4295L13.4743 19.4268L13.477 19.4229L13.4905 19.4189L13.5041 19.4162L13.5068 19.4029L13.5108 19.3895L13.5149 19.3869L13.5176 19.3829L13.4094 19.3763C13.3372 19.3718 13.2674 19.3674 13.1997 19.3629C13.1321 19.3585 13.0262 19.3385 12.8819 19.303C12.7376 19.2674 12.5821 19.2142 12.4152 19.1432C12.2484 19.0722 12.0861 18.9878 11.9283 18.8901C11.7705 18.7925 11.6564 18.7112 11.5861 18.6464C11.5167 18.5825 11.4265 18.4919 11.3156 18.3747C11.2056 18.2566 11.11 18.1354 11.0289 18.0111C10.9477 17.8868 10.8702 17.7434 10.7962 17.5809L10.684 17.3385L10.6772 17.3185L10.6704 17.2985L10.6664 17.2853L10.6637 17.2719L10.684 17.2745L10.7042 17.2786L10.853 17.2985C10.9522 17.3119 11.1078 17.3163 11.3197 17.3119C11.5316 17.3075 11.6781 17.2986 11.7592 17.2853C11.8404 17.2719 11.89 17.263 11.908 17.2586L11.9351 17.252L11.9689 17.2453L12.0027 17.2386L12.0054 17.2347L12.0095 17.232L12.0135 17.2293L12.0162 17.2253L11.9892 17.2187L11.9621 17.212L11.9351 17.2053L11.908 17.1986L11.881 17.192C11.8629 17.1876 11.8314 17.1787 11.7863 17.1653C11.7412 17.1521 11.6195 17.1032 11.4211 17.0189C11.2227 16.9345 11.0649 16.8524 10.9477 16.7725C10.8302 16.6923 10.7181 16.6047 10.6123 16.5101C10.5068 16.4142 10.3909 16.2908 10.2646 16.1399C10.1384 15.9889 10.0257 15.8135 9.92651 15.6137C9.82732 15.4139 9.75293 15.2231 9.70333 15.0411C9.65394 14.8601 9.62135 14.6751 9.60596 14.4883L9.5816 14.2087L9.59513 14.2113L9.60865 14.2153L9.62219 14.222L9.63571 14.2286L9.64923 14.2353L9.66276 14.242L9.87241 14.3352C10.0122 14.3973 10.1858 14.4506 10.3931 14.495C10.6006 14.5394 10.7245 14.5638 10.7651 14.5682L10.826 14.5749H10.9477L10.945 14.5709L10.9409 14.5682L10.9369 14.5656L10.9342 14.5616L10.9315 14.5576L10.9274 14.555L10.9234 14.5523L10.9207 14.5483L10.9071 14.5416L10.8936 14.535L10.8909 14.531L10.8868 14.5283L10.8828 14.5256L10.8801 14.5217L10.8665 14.515L10.853 14.5083L10.8503 14.5044C10.8476 14.5026 10.8088 14.4741 10.734 14.4191C10.66 14.3632 10.5825 14.2908 10.5014 14.202C10.4202 14.1132 10.339 14.02 10.2579 13.9223C10.1766 13.8244 10.1042 13.7197 10.0415 13.6093C9.97837 13.4983 9.91163 13.3572 9.8413 13.1858C9.77187 13.0153 9.71912 12.8435 9.68305 12.6704C9.64699 12.4972 9.6267 12.3263 9.62219 12.1576C9.61768 11.9889 9.62218 11.8446 9.63571 11.7248C9.64923 11.6049 9.67628 11.4695 9.71687 11.3185C9.75744 11.1676 9.81606 11.0078 9.89269 10.8391L10.0077 10.586L10.0144 10.566L10.0212 10.5461L10.0253 10.5434L10.0279 10.5394L10.0307 10.5354L10.0347 10.5327L10.0388 10.5354L10.0415 10.5394L10.0442 10.5434L10.0482 10.5461L10.0523 10.5487L10.055 10.5527L10.0577 10.5567L10.0618 10.5594L10.0685 10.5727L10.0753 10.586L10.0794 10.5887L10.0821 10.5927L10.2646 10.7925C10.3864 10.9256 10.5307 11.0744 10.6975 11.2386C10.8643 11.4029 10.9567 11.4881 10.9747 11.4943C10.9928 11.5014 11.0153 11.5219 11.0424 11.5556C11.0694 11.5885 11.1596 11.667 11.3129 11.7913C11.4662 11.9156 11.6668 12.0599 11.9148 12.2242C12.1628 12.3884 12.4378 12.5505 12.7399 12.7103C13.0419 12.8701 13.3666 13.0144 13.7137 13.1432C14.0609 13.2719 14.3043 13.3563 14.4441 13.3962C14.5839 13.4362 14.8228 13.4872 15.1609 13.5494C15.4991 13.6116 15.7538 13.6515 15.9251 13.6693C16.0965 13.687 16.2137 13.6972 16.2768 13.6999L16.3715 13.7026L16.3688 13.6826L16.3648 13.6626L16.3377 13.4961C16.3196 13.3851 16.3106 13.2297 16.3106 13.03C16.3106 12.8302 16.3265 12.646 16.358 12.4772C16.3895 12.3085 16.4369 12.1376 16.5 11.9645C16.5632 11.7913 16.6249 11.6524 16.6853 11.5476C16.7466 11.4437 16.8268 11.3252 16.9261 11.192C17.0252 11.0588 17.1538 10.9212 17.3116 10.7791C17.4694 10.6371 17.6497 10.5105 17.8526 10.3996C18.0554 10.2886 18.2425 10.2042 18.4138 10.1465C18.5852 10.0888 18.7295 10.0511 18.8467 10.0333C18.9639 10.0155 19.0226 10.0053 19.0226 10.0027Z",
+p3aebff00: "M0.466434 0.406709C0.13852 0.798782 -0.0270535 1.30141 0.00363445 1.81161V23.9277C-0.0271427 24.4379 0.138442 24.9406 0.466434 25.3326L0.540435 25.4047L12.9294 13.0158V12.7235L0.540435 0.334109L0.466434 0.406709Z",
+p3b676a80: "M24.6665 0H25.5552V6.26074H24.6665V0Z",
+p3c1952c0: "M19.4263 1.75782H20.2817V2.47315H20.3481C20.4608 2.21623 20.6508 2.00086 20.8917 1.85705C21.1325 1.71324 21.4123 1.64817 21.6919 1.6709C21.911 1.65443 22.131 1.68746 22.3356 1.76756C22.5402 1.84765 22.7241 1.97276 22.8738 2.1336C23.0235 2.29445 23.1351 2.48691 23.2003 2.69673C23.2655 2.90655 23.2826 3.12835 23.2505 3.3457V6.2607H22.3618V3.56886C22.3618 2.84523 22.0474 2.48536 21.3901 2.48536C21.2414 2.47843 21.0929 2.50375 20.9548 2.55958C20.8168 2.61541 20.6924 2.70043 20.5903 2.80882C20.4882 2.9172 20.4107 3.04639 20.3631 3.18752C20.3156 3.32865 20.2992 3.47839 20.3149 3.62647V6.26075H19.4263L19.4263 1.75782Z",
+p3c536e80: "M51.6377 17.5327C51.6377 14.6841 53.3155 12.8941 55.9317 12.8941C58.5567 12.8941 60.2266 14.6841 60.2266 17.5327C60.2266 20.3892 58.5655 22.1714 55.9317 22.1714C53.2988 22.1714 51.6377 20.3892 51.6377 17.5327ZM58.333 17.5327C58.333 15.5786 57.4375 14.4253 55.9317 14.4253C54.4258 14.4253 53.5313 15.5874 53.5313 17.5327C53.5313 19.4946 54.4258 20.6392 55.9317 20.6392C57.4375 20.6392 58.333 19.4946 58.333 17.5327Z",
+p3f96e4c0: "M34.5337 7.13442V1.13442H35.4722L38.3882 5.80192H38.4214L38.3882 4.64562V1.13442H39.1597V7.13442H38.355L35.3042 2.24082H35.271L35.3042 3.39712V7.13442H34.5337Z",
+p48005c0: "M37.2832 18.5991C37.4209 19.8306 38.6172 20.6391 40.252 20.6391C41.8184 20.6391 42.9453 19.8305 42.9453 18.7202C42.9453 17.7563 42.2656 17.1792 40.6562 16.7837L39.0469 16.396C36.7666 15.8452 35.708 14.7788 35.708 13.0483C35.708 10.9057 37.5752 9.43403 40.2266 9.43403C42.8506 9.43403 44.6494 10.9057 44.71 13.0483H42.834C42.7217 11.809 41.6972 11.061 40.2002 11.061C38.7031 11.061 37.6787 11.8178 37.6787 12.9194C37.6787 13.7973 38.333 14.3139 39.9336 14.7094L41.3017 15.0453C43.8496 15.6479 44.9082 16.6713 44.9082 18.4877C44.9082 20.811 43.0576 22.266 40.1142 22.266C37.3603 22.266 35.5009 20.8451 35.3808 18.599L37.2832 18.5991Z",
+p4ac700: "M59.0879 0.63673V1.77833H60.0635V2.52687H59.0879V4.8423C59.0879 5.31398 59.2822 5.52052 59.7246 5.52052C59.8379 5.52016 59.951 5.51331 60.0635 5.50001V6.24024C59.9039 6.26879 59.7422 6.28398 59.5801 6.28565C58.5918 6.28565 58.1982 5.93799 58.1982 5.06983V2.52683H57.4834V1.77829H58.1982V0.63673H59.0879Z",
+p7fb1900: "M36.9209 4.00734C36.9209 2.58449 37.6523 1.68312 38.79 1.68312C39.0714 1.67015 39.3507 1.73756 39.5953 1.87745C39.8398 2.01735 40.0394 2.22395 40.1709 2.47312H40.2373V0H41.126V6.26074H40.2744V5.54931H40.2041C40.0625 5.7968 39.8559 6.00083 39.6066 6.13932C39.3574 6.2778 39.075 6.34545 38.79 6.33495C37.6445 6.335 36.9209 5.43361 36.9209 4.00734ZM37.8389 4.00734C37.8389 4.96242 38.2891 5.53713 39.042 5.53713C39.791 5.53713 40.2539 4.95413 40.2539 4.01125C40.2539 3.07277 39.7862 2.48146 39.042 2.48146C38.2939 2.48146 37.8389 3.06007 37.8389 4.00734Z",
+p949f00: "M27.0944 15.886C26.2539 15.8892 25.4331 16.1414 24.7358 16.6106C24.0385 17.0799 23.4959 17.7453 23.1764 18.5227C22.857 19.3002 22.7751 20.1548 22.941 20.9788C23.1069 21.8028 23.5133 22.5591 24.1088 23.1523C24.7042 23.7455 25.4621 24.149 26.2867 24.3118C27.1113 24.4746 27.9656 24.3894 28.7419 24.067C29.5181 23.7446 30.1814 23.1995 30.648 22.5004C31.1146 21.8013 31.3637 20.9796 31.3637 20.1391C31.3719 19.5769 31.267 19.0188 31.0552 18.498C30.8434 17.9772 30.5289 17.5044 30.1306 17.1075C29.7323 16.7107 29.2582 16.3981 28.7366 16.1883C28.215 15.9784 27.6565 15.8756 27.0944 15.886V15.886ZM27.0944 22.7168C26.5767 22.7537 26.06 22.6339 25.6114 22.373C25.1628 22.1122 24.8032 21.7223 24.5793 21.2541C24.3554 20.7859 24.2776 20.2612 24.3561 19.7483C24.4346 19.2353 24.6657 18.7578 25.0194 18.3781C25.373 17.9983 25.8328 17.7338 26.3389 17.619C26.845 17.5042 27.3739 17.5444 27.8568 17.7345C28.3397 17.9245 28.7542 18.2555 29.0464 18.6844C29.3385 19.1133 29.4948 19.6202 29.4948 20.1391C29.5105 20.467 29.4604 20.7946 29.3476 21.1028C29.2348 21.411 29.0614 21.6936 28.8377 21.9338C28.614 22.174 28.3446 22.367 28.0452 22.5015C27.7458 22.6359 27.4225 22.7092 27.0944 22.7168V22.7168ZM17.781 15.886C16.9405 15.8892 16.1197 16.1413 15.4224 16.6106C14.7251 17.0799 14.1824 17.7452 13.863 18.5227C13.5435 19.3001 13.4616 20.1548 13.6275 20.9788C13.7934 21.8027 14.1998 22.5591 14.7952 23.1523C15.3907 23.7455 16.1486 24.149 16.9732 24.3118C17.7978 24.4746 18.6521 24.3894 19.4283 24.067C20.2046 23.7447 20.8679 23.1995 21.3345 22.5004C21.8011 21.8013 22.0502 20.9796 22.0502 20.1391C22.0584 19.5769 21.9535 19.0189 21.7417 18.4981C21.5299 17.9773 21.2154 17.5044 20.8171 17.1076C20.4188 16.7108 19.9448 16.3981 19.4232 16.1883C18.9016 15.9784 18.3431 15.8756 17.781 15.886V15.886ZM17.781 22.7168C17.2633 22.7537 16.7466 22.6339 16.298 22.373C15.8494 22.1122 15.4898 21.7223 15.2659 21.2541C15.042 20.7859 14.9642 20.2612 15.0427 19.7483C15.1212 19.2353 15.3523 18.7578 15.706 18.3781C16.0596 17.9983 16.5194 17.7338 17.0255 17.619C17.5316 17.5042 18.0605 17.5444 18.5434 17.7345C19.0263 17.9245 19.4408 18.2555 19.733 18.6844C20.0251 19.1133 20.1814 19.6202 20.1814 20.1391C20.1971 20.467 20.1471 20.7946 20.0342 21.1028C19.9214 21.4111 19.748 21.6936 19.5243 21.9338C19.3007 22.174 19.0312 22.367 18.7318 22.5015C18.4324 22.636 18.1091 22.7092 17.781 22.7168ZM6.70216 17.191V18.9953H11.0199C10.9576 19.8416 10.6113 20.6421 10.0371 21.2669C9.60438 21.7079 9.08405 22.0534 8.50964 22.2809C7.93522 22.5084 7.31949 22.613 6.70216 22.5879C5.44014 22.5708 4.2356 22.0575 3.3492 21.159C2.4628 20.2605 1.96582 19.0492 1.96582 17.787C1.96582 16.5249 2.4628 15.3135 3.3492 14.415C4.2356 13.5165 5.44014 13.0032 6.70216 12.9861C7.91438 12.9703 9.08387 13.4334 9.95657 14.2749L11.2293 13.0022C10.6338 12.4127 9.92668 11.9481 9.1493 11.6354C8.37192 11.3228 7.53994 11.1686 6.70216 11.1817C5.82665 11.169 4.95734 11.3304 4.14478 11.6566C3.33222 11.9829 2.59261 12.4674 1.96898 13.082C1.34534 13.6966 0.850114 14.4291 0.512093 15.2368C0.174071 16.0445 0 16.9114 0 17.787C0 18.6626 0.174071 19.5295 0.512093 20.3372C0.850114 21.1449 1.34534 21.8774 1.96898 22.492C2.59261 23.1067 3.33222 23.5912 4.14478 23.9174C4.95734 24.2436 5.82665 24.4051 6.70216 24.3923C7.55762 24.4278 8.41085 24.281 9.20523 23.9615C9.99961 23.6421 10.717 23.1574 11.3098 22.5396C12.3622 21.3909 12.9231 19.8758 12.8726 18.3187C12.8767 17.9406 12.8443 17.5629 12.7758 17.191H6.70216ZM52.0105 18.5925C51.7549 17.8221 51.2683 17.1491 50.6169 16.6649C49.9655 16.1807 49.1808 15.9088 48.3695 15.886C47.823 15.8894 47.2829 16.0036 46.7818 16.2216C46.2807 16.4397 45.829 16.757 45.4541 17.1546C45.0791 17.5521 44.7887 18.0216 44.6003 18.5346C44.4119 19.0475 44.3295 19.5934 44.3581 20.1391C44.3457 20.6983 44.4463 21.2542 44.6536 21.7737C44.861 22.2931 45.1709 22.7655 45.5649 23.1625C45.9589 23.5595 46.4288 23.873 46.9467 24.0843C47.4646 24.2956 48.0197 24.4004 48.579 24.3923C49.2796 24.3962 49.9703 24.226 50.5889 23.897C51.2075 23.568 51.7347 23.0905 52.1232 22.5074L50.6733 21.5408C50.4561 21.9015 50.1488 22.1996 49.7816 22.4058C49.4145 22.612 49 22.7191 48.579 22.7168C48.1457 22.7334 47.7174 22.6194 47.3497 22.3896C46.9819 22.1598 46.6918 21.8248 46.5168 21.428L52.2039 19.0759L52.0105 18.5925ZM46.2108 20.0103C46.1907 19.7008 46.2326 19.3903 46.334 19.0972C46.4354 18.804 46.5943 18.534 46.8013 18.303C47.0083 18.0719 47.2593 17.8845 47.5396 17.7517C47.82 17.6188 48.124 17.5432 48.4339 17.5293C48.7566 17.5081 49.0783 17.5823 49.3591 17.7428C49.6399 17.9032 49.8672 18.1427 50.0128 18.4315L46.2108 20.0103ZM41.587 24.1345H43.4558V11.6329H41.587V24.1345ZM38.526 16.8365H38.4616C38.1774 16.5278 37.8307 16.2834 37.4445 16.1194C37.0583 15.9555 36.6416 15.8759 36.2222 15.886C35.1255 15.9327 34.0892 16.4012 33.3297 17.1937C32.5702 17.9862 32.1462 19.0415 32.1462 20.1392C32.1462 21.2369 32.5702 22.2921 33.3297 23.0846C34.0892 23.8771 35.1255 24.3456 36.2222 24.3923C36.6432 24.4035 37.0617 24.3229 37.4484 24.1559C37.8352 23.989 38.1809 23.7398 38.4616 23.4257H38.526V24.0379C38.526 25.6651 37.6561 26.535 36.2544 26.535C35.7872 26.5238 35.334 26.3738 34.9524 26.1041C34.5708 25.8344 34.2782 25.4572 34.1118 25.0206L32.4846 25.6973C32.7912 26.444 33.3139 27.0821 33.9855 27.5298C34.6572 27.9776 35.4472 28.2146 36.2544 28.2105C38.4455 28.2105 40.2982 26.9217 40.2982 23.7801V16.1437H38.526V16.8365ZM36.3834 22.7168C35.7374 22.662 35.1356 22.3668 34.697 21.8894C34.2584 21.412 34.015 20.7874 34.015 20.1392C34.015 19.4909 34.2584 18.8663 34.697 18.3889C35.1356 17.9116 35.7374 17.6163 36.3834 17.5615C36.7047 17.5772 37.0196 17.6574 37.3093 17.7974C37.599 17.9374 37.8575 18.1343 38.0695 18.3763C38.2815 18.6184 38.4426 18.9006 38.5431 19.2062C38.6437 19.5119 38.6817 19.8346 38.6549 20.1552C38.68 20.4738 38.6406 20.7943 38.539 21.0973C38.4375 21.4004 38.2758 21.6798 38.0638 21.919C37.8517 22.1581 37.5936 22.352 37.3049 22.4891C37.0161 22.6262 36.7027 22.7036 36.3834 22.7168V22.7168ZM60.7644 11.6331H56.2932V24.1345H58.1589V19.3981H60.7644C61.2921 19.427 61.8202 19.3481 62.3164 19.166C62.8126 18.984 63.2665 18.7027 63.6504 18.3393C64.0342 17.976 64.3399 17.5382 64.5489 17.0527C64.7578 16.5672 64.8655 16.0442 64.8655 15.5156C64.8655 14.9871 64.7578 14.4641 64.5489 13.9786C64.3399 13.4931 64.0342 13.0553 63.6504 12.6919C63.2665 12.3285 62.8126 12.0472 62.3164 11.8652C61.8202 11.6832 61.2921 11.6042 60.7644 11.6331V11.6331ZM60.8126 17.6583H58.1589V13.373H60.8126C61.0977 13.3671 61.3811 13.4182 61.6462 13.5232C61.9114 13.6282 62.1529 13.7851 62.3566 13.9846C62.5603 14.1842 62.7222 14.4224 62.8327 14.6853C62.9432 14.9482 63.0001 15.2305 63.0001 15.5157C63.0001 15.8008 62.9432 16.0831 62.8327 16.346C62.7222 16.6089 62.5603 16.8471 62.3566 17.0467C62.1529 17.2462 61.9114 17.4031 61.6462 17.5081C61.3811 17.6132 61.0977 17.6642 60.8126 17.6583V17.6583ZM72.3443 15.863C71.6632 15.8233 70.9854 15.9832 70.394 16.3232C69.8026 16.6632 69.3233 17.1684 69.015 17.7769L70.6716 18.4685C70.8358 18.1665 71.0846 17.9189 71.3873 17.7561C71.6901 17.5932 72.0338 17.5222 72.3764 17.5517C72.8497 17.5055 73.322 17.6489 73.6899 17.9503C74.0577 18.2518 74.291 18.6868 74.3386 19.16V19.2887C73.7394 18.9704 73.071 18.8047 72.3925 18.8062C70.6073 18.8062 68.7899 19.7873 68.7899 21.6208C68.8072 22.0072 68.902 22.3862 69.0686 22.7353C69.2352 23.0844 69.4702 23.3964 69.7597 23.6529C70.0493 23.9094 70.3873 24.1052 70.7539 24.2285C71.1205 24.3519 71.5082 24.4003 71.8939 24.371C72.3637 24.3987 72.8323 24.2999 73.251 24.0849C73.6696 23.8699 74.023 23.5466 74.2743 23.1487H74.3386V24.1137H76.1399V19.3209C76.1399 17.1014 74.4833 15.863 72.3443 15.863V15.863ZM72.1191 22.7144C71.5079 22.7144 70.6555 22.4089 70.6555 21.6529C70.6555 20.688 71.717 20.318 72.6338 20.318C73.2292 20.3022 73.818 20.4466 74.3386 20.7362C74.27 21.2785 74.0075 21.7775 73.5995 22.1412C73.1915 22.5049 72.6656 22.7085 72.1191 22.7144V22.7144ZM82.7019 16.1364L80.5628 21.5564H80.4984L78.279 16.1364H76.2686L79.5978 23.7116L77.7 27.9254H79.646L84.7766 16.1364H82.7019ZM65.8949 24.1345H67.7605V11.6331H65.8949V24.1345Z",
+pa6cfb80: "M3.39891 0.293999C3.78853 0.26604 4.17949 0.3249 4.5436 0.466333C4.90771 0.607766 5.2359 0.828247 5.50449 1.11187C5.77307 1.3955 5.97536 1.7352 6.09676 2.10647C6.21817 2.47774 6.25566 2.87132 6.20653 3.25884C6.20653 5.16509 5.17626 6.26084 3.39891 6.26084H1.24364V0.293999H3.39891ZM2.17039 5.417H3.29539C3.5738 5.43364 3.85241 5.38799 4.11095 5.28338C4.36949 5.17876 4.60145 5.01782 4.78994 4.81225C4.97844 4.60669 5.11872 4.36168 5.20058 4.09506C5.28244 3.82844 5.30382 3.54692 5.26316 3.271C5.30087 2.99617 5.27732 2.71639 5.19421 2.45173C5.11109 2.18707 4.97046 1.94406 4.78239 1.74013C4.59433 1.5362 4.36349 1.37639 4.10641 1.27216C3.84933 1.16792 3.57238 1.12184 3.29539 1.13721H2.17039V5.417Z",
+pd6ee900: "M10.7566 1.72057e-06H124.249C124.655 1.72057e-06 125.067 -0.000128279 125.472 0.00187172C125.753 0.00346346 126.039 0.00766047 126.322 0.0118031C126.386 0.0127355 126.449 0.0136652 126.512 0.0145617C127.269 0.0220095 128.023 0.0811045 128.769 0.191322C129.518 0.304242 130.243 0.515569 130.921 0.818322C132.278 1.43603 133.383 2.4152 134.079 3.61812C134.419 4.2175 134.655 4.85928 134.777 5.52144C134.903 6.18324 134.973 6.85242 134.987 7.52344C134.991 7.83008 134.991 8.1377 134.991 8.44434C135 8.80664 135 9.16992 135 9.53613V30.4648C135 30.834 135 31.1953 134.991 31.5586C134.991 31.8691 134.991 32.1699 134.987 32.4805C134.973 33.1515 134.903 33.8206 134.777 34.4824C134.655 35.1449 134.42 35.7871 134.079 36.3867C133.733 36.9835 133.283 37.5282 132.746 38.001C132.213 38.4778 131.597 38.8758 130.921 39.1797C130.243 39.4833 129.518 39.6958 128.769 39.8105C128.023 39.9198 127.268 39.9789 126.512 39.9873C126.169 39.9941 125.816 39.998 125.472 39.998C125.067 40 124.655 40 124.249 40H10.7566C10.343 40 9.93419 40 9.5216 39.998C9.17621 39.998 8.83358 39.9941 8.48488 39.9873C7.72738 39.9785 6.9717 39.9194 6.22416 39.8105C5.47772 39.6966 4.75481 39.484 4.07967 39.1797C3.40371 38.876 2.78717 38.478 2.25357 38.001C1.71505 37.5301 1.26616 36.9849 0.924356 36.3867C0.581124 35.7875 0.343339 35.1453 0.219258 34.4824C0.0936522 33.8207 0.0260614 33.1514 0.0170916 32.4805C0.00993901 32.2683 0.00715699 32.0607 0.00435296 31.8514C0.0030527 31.7544 0.00174771 31.657 0 31.5586V8.44434C0.00176842 8.34604 0.00308357 8.24765 0.00439918 8.14922C0.0071877 7.94059 0.00997831 7.7318 0.0170916 7.52348C0.0260586 6.85252 0.0936495 6.18319 0.219258 5.52148C0.343683 4.85894 0.581453 4.21711 0.924356 3.61816C1.26632 3.01802 1.71514 2.47064 2.25357 1.99707C2.7892 1.52217 3.40534 1.12447 4.07967 0.818412C4.75482 0.514917 5.4778 0.303534 6.22416 0.191412C6.97157 0.081678 7.72733 0.0226035 8.48488 0.0147017C8.55727 0.0136865 8.6294 0.0126317 8.70135 0.0115795C8.97596 0.00756356 9.24792 0.00358651 9.5216 0.00200172C9.9342 1.72062e-06 10.3429 1.72057e-06 10.7566 1.72057e-06ZM8.40804 39.1173C8.74966 39.1241 9.08566 39.128 9.42998 39.128L124.35 39.13L125.576 39.128C125.912 39.128 126.259 39.1241 126.59 39.1173C127.297 39.1097 128.004 39.0551 128.702 38.9542C129.358 38.8557 129.993 38.6703 130.587 38.4043C131.173 38.1407 131.707 37.7954 132.169 37.3815C132.631 36.9758 133.018 36.5081 133.316 35.9956C133.615 35.4698 133.821 34.9064 133.927 34.3252C134.042 33.7122 134.106 33.0926 134.12 32.4713C134.124 32.1646 134.124 31.8667 134.124 31.5414C134.133 31.1839 134.133 30.8294 134.133 30.466V9.53295C134.133 9.17301 134.133 8.81601 134.124 8.44093C134.124 8.13813 134.124 7.83386 134.121 7.55061C134.107 6.91801 134.042 6.28713 133.924 5.663C133.818 5.0894 133.614 4.53335 133.32 4.01374C132.718 2.97461 131.763 2.12826 130.59 1.5933C129.995 1.32872 129.359 1.14404 128.702 1.04533C128.008 0.944474 127.306 0.890111 126.602 0.882711L125.57 0.870008H9.43053L8.41082 0.882221C7.70067 0.890008 6.99218 0.94486 6.29129 1.04631C5.6412 1.1438 5.01136 1.3272 4.42286 1.59037C3.83742 1.85582 3.30266 2.20091 2.83807 2.61305C2.37296 3.02132 1.98554 3.4935 1.69085 4.01129C1.39165 4.53452 1.18454 5.09514 1.07668 5.67374C0.960772 6.2928 0.898236 6.91875 0.889618 7.5462C0.883007 7.74938 0.873016 8.44093 0.873016 8.44093V31.5463C0.873016 31.5463 0.882396 32.2487 0.889561 32.4596C0.898562 33.0881 0.961463 33.715 1.07772 34.335C1.18538 34.912 1.39233 35.471 1.69137 35.9925C1.98715 36.5107 2.37673 36.9825 2.84466 37.3893C3.30591 37.801 3.83897 38.1443 4.42342 38.4062C5.01327 38.6702 5.6443 38.8549 6.29571 38.9542C6.9943 39.0546 7.70034 39.1091 8.40804 39.1173Z",
+pd9336c0: "M26.7905 4.00734C26.7622 3.7114 26.7961 3.41282 26.89 3.13074C26.9838 2.84866 27.1356 2.58931 27.3356 2.36932C27.5355 2.14933 27.7793 1.97356 28.0511 1.85329C28.323 1.73301 28.617 1.67088 28.9143 1.67088C29.2116 1.67088 29.5056 1.73301 29.7775 1.85329C30.0493 1.97356 30.2931 2.14933 30.493 2.36932C30.693 2.58931 30.8448 2.84866 30.9386 3.13074C31.0325 3.41282 31.0664 3.7114 31.0381 4.00734C31.0669 4.30357 31.0334 4.60256 30.9398 4.88508C30.8462 5.16761 30.6945 5.42742 30.4944 5.64783C30.2944 5.86823 30.0505 6.04436 29.7784 6.16489C29.5063 6.28542 29.2119 6.34768 28.9143 6.34768C28.6167 6.34768 28.3223 6.28542 28.0502 6.16489C27.778 6.04436 27.5341 5.86823 27.3341 5.64783C27.1341 5.42742 26.9824 5.16761 26.8888 4.88508C26.7952 4.60256 26.7617 4.30357 26.7905 4.00734ZM30.1235 4.00734C30.1235 3.03127 29.685 2.46047 28.9155 2.46047C28.143 2.46047 27.7085 3.03127 27.7085 4.00735C27.7085 4.99124 28.1431 5.55764 28.9155 5.55764C29.685 5.55763 30.1235 4.98732 30.1235 4.00734Z",
+pe943800: "M16.8946 22V16.7982H18.6636L18.9284 14.576H16.8945V13.1573C16.8945 12.514 17.0597 12.0755 17.9124 12.0755L19 12.075V10.0876C18.8119 10.0605 18.1662 10 17.4152 10C15.8471 10 14.7735 11.0355 14.7735 12.9373V14.576H13V16.7982H14.7735V21.9999L16.8946 22Z",
+}
diff --git a/src/imports/svg-wv5wqovq7z.ts b/src/imports/svg-wv5wqovq7z.ts
new file mode 100644
index 0000000..b3ad9d7
--- /dev/null
+++ b/src/imports/svg-wv5wqovq7z.ts
@@ -0,0 +1,16 @@
+export default {
+p1159e100: "M0 20.2731V0.42H3.48692V20.2731H0ZM12.4142 5.87076C11.4276 5.84854 10.4464 6.02396 9.52861 6.38672C8.61078 6.74946 7.77483 7.29221 7.06997 7.98298C6.36511 8.67376 5.8056 9.49858 5.42439 10.4089C5.0432 11.3192 4.848 12.2966 4.85031 13.2836C4.85262 14.2704 5.05238 15.2469 5.43785 16.1554C5.82331 17.0639 6.38668 17.8861 7.09476 18.5736C7.80284 19.2611 8.64133 19.7999 9.56085 20.1583C10.4804 20.5168 11.4623 20.6877 12.4488 20.6608C13.4277 20.6705 14.3987 20.4857 15.3058 20.1174C16.2127 19.749 17.0375 19.2042 17.7323 18.5146C18.427 17.8251 18.9781 17.0045 19.3533 16.1003C19.7287 15.1962 19.9207 14.2266 19.9184 13.2477C19.9161 12.2687 19.7196 11.3001 19.3401 10.3977C18.9606 9.49533 18.4057 8.67728 17.7076 7.99098C17.0097 7.30467 16.1822 6.76376 15.2736 6.39961C14.3649 6.03546 13.393 5.85647 12.4142 5.87076ZM12.3738 9.23076C13.2976 9.22784 14.1938 9.54516 14.9099 10.1287C15.626 10.7122 16.1177 11.5259 16.3013 12.4312C16.485 13.3365 16.3492 14.2775 15.9172 15.0939C15.4851 15.9103 14.7833 16.5518 13.9315 16.9091C13.0797 17.2664 12.1303 17.3174 11.2451 17.0534C10.3599 16.7895 9.59347 16.2269 9.07637 15.4614C8.55929 14.696 8.32345 13.775 8.40905 12.8552C8.49463 11.9355 8.89633 11.0738 9.54577 10.4169C10.2952 9.66411 11.3116 9.23779 12.3738 9.23076ZM28.7169 5.87076C27.7303 5.84854 26.7492 6.02396 25.8313 6.38672C24.9135 6.74946 24.0775 7.29221 23.3727 7.98298C22.6678 8.67376 22.1083 9.49858 21.727 10.4089C21.3459 11.3192 21.1507 12.2966 21.153 13.2836C21.1553 14.2704 21.355 15.2469 21.7405 16.1554C22.126 17.0639 22.6893 17.8861 23.3975 18.5736C24.1056 19.2611 24.9441 19.7999 25.8636 20.1583C26.7831 20.5168 27.765 20.6877 28.7515 20.6608C29.7369 20.6848 30.7169 20.5096 31.6329 20.1458C32.549 19.782 33.382 19.2369 34.0824 18.5435C34.7827 17.8499 35.3358 17.0221 35.7085 16.1097C36.0812 15.1972 36.266 14.219 36.2515 13.2335C36.3494 11.8738 35.945 10.5256 35.115 9.44423L36.0819 9.11307V6.28269H31.1354C30.356 6.0126 29.5372 5.87341 28.7123 5.87076H28.7169ZM28.6765 9.23076C29.6002 9.22839 30.4962 9.54615 31.2118 10.13C31.9275 10.7138 32.4188 11.5276 32.602 12.4329C32.7853 13.3381 32.6491 14.279 32.2169 15.0952C31.7845 15.9114 31.0827 16.5525 30.2308 16.9095C29.379 17.2665 28.4297 17.3173 27.5446 17.0532C26.6595 16.7891 25.8933 16.2264 25.3764 15.461C24.8595 14.6955 24.6238 13.7746 24.7095 12.855C24.7951 11.9353 25.1968 11.0738 25.8462 10.4169C26.5962 9.66355 27.6135 9.23718 28.6765 9.23076ZM32.715 21.24C32.715 22.3074 32.291 23.331 31.5362 24.0859C30.7815 24.8406 29.7578 25.2646 28.6904 25.2646C27.623 25.2646 26.5993 24.8406 25.8445 24.0859C25.0898 23.331 24.6658 22.3074 24.6658 21.24H21.1269C21.1104 22.2347 21.2971 23.2223 21.6758 24.1423C22.0544 25.0623 22.617 25.8952 23.3289 26.5901C24.0408 27.2849 24.8872 27.8271 25.816 28.1833C26.7449 28.5395 27.7367 28.7022 28.7308 28.6616C29.7155 28.6867 30.6952 28.5126 31.611 28.1498C32.5268 27.7871 33.3599 27.243 34.0604 26.5504C34.7608 25.8577 35.314 25.0307 35.687 24.119C36.06 23.2072 36.245 22.2296 36.2308 21.2446L32.715 21.24ZM37.6558 20.2696V6.28269H41.1438V20.2731L37.6558 20.2696ZM44.5292 20.2696V9.41653H42.6588V6.28269H44.5292V1.98692H48.0162V6.28269H49.9373V9.41653H48.0162V20.2731L44.5292 20.2696ZM41.7012 2.30769C41.7012 2.76411 41.5658 3.21028 41.3122 3.58977C41.0587 3.96927 40.6982 4.26506 40.2766 4.43972C39.8549 4.61439 39.3909 4.66008 38.9432 4.57104C38.4957 4.482 38.0844 4.26221 37.7617 3.93948C37.439 3.61674 37.2192 3.20555 37.1301 2.7579C37.0411 2.31025 37.0868 1.84625 37.2614 1.42458C37.4361 1.0029 37.7319 0.642488 38.1114 0.388915C38.4909 0.135344 38.937 0 39.3935 0C40.0055 0 40.5924 0.24313 41.0252 0.675907C41.458 1.10868 41.7012 1.69565 41.7012 2.30769ZM57.7777 5.86153C56.7918 5.84154 55.8123 6.02306 54.8991 6.39497C53.9858 6.76689 53.1582 7.32136 52.4668 8.02441C51.7754 8.72747 51.2348 9.5643 50.8783 10.4836C50.5217 11.4029 50.3566 12.3854 50.3931 13.3708C50.3527 14.3541 50.5193 15.335 50.8822 16.2499C51.2451 17.1646 51.7962 17.9931 52.4997 18.6814C53.2032 19.3696 54.0434 19.9024 54.9659 20.2452C55.8885 20.588 56.8727 20.7331 57.855 20.6712C59.0402 20.7087 60.2197 20.4911 61.3135 20.0332C62.4075 19.5754 63.3902 18.8879 64.1954 18.0173L61.8646 15.6831C60.8189 16.7783 59.4089 17.4538 57.9 17.5823C57.0249 17.6167 56.1652 17.3454 55.4683 16.8151C54.7713 16.2847 54.2808 15.5284 54.0808 14.6758H64.9477V13.7158C64.9477 9.88384 62.73 5.86269 57.7835 5.86269L57.7777 5.86153ZM57.6623 8.93192C58.5189 8.88266 59.3634 9.15335 60.0318 9.69147C60.7002 10.2296 61.1448 10.9968 61.2796 11.8442H53.9758C54.1472 11.0005 54.6123 10.2448 55.2884 9.7116C55.9644 9.17838 56.8075 8.90211 57.6681 8.93192H57.6623ZM73.665 20.6723C72.6922 20.6732 71.7287 20.4826 70.8297 20.1113C69.9305 19.7399 69.1133 19.1952 68.4248 18.5079C67.0342 17.1201 66.2518 15.2368 66.2498 13.2721C66.2478 11.3075 67.0263 9.42251 68.4142 8.03188C69.8019 6.64127 71.6853 5.85891 73.65 5.85692C74.7922 5.84838 75.9219 6.09506 76.9566 6.57895C77.9912 7.06285 78.9047 7.77174 79.6304 8.65384L77.1923 11.0769C76.7567 10.5434 76.2151 10.1062 75.6017 9.79276C74.9885 9.47935 74.3168 9.29663 73.6292 9.25615C73.0997 9.24297 72.5729 9.33717 72.0808 9.53307C71.5885 9.72897 71.1412 10.0225 70.7655 10.396C70.3899 10.7695 70.0937 11.2152 69.895 11.7062C69.6963 12.1972 69.5991 12.7235 69.6092 13.2531C69.5958 13.7839 69.6895 14.312 69.8847 14.8058C70.0798 15.2998 70.3724 15.7492 70.745 16.1277C71.1174 16.506 71.5625 16.8054 72.0532 17.0083C72.5439 17.211 73.0705 17.3128 73.6015 17.3077C74.2942 17.2717 74.9717 17.0909 75.5902 16.7768C76.2087 16.4629 76.7544 16.0226 77.1923 15.4846L79.65 17.9077C78.9223 18.7869 78.0069 19.4921 76.971 19.9712C75.9351 20.4504 74.8051 20.6916 73.6638 20.6769L73.665 20.6723ZM80.9204 20.2835V0.369231H84.4073V7.68576C84.9318 7.08272 85.5854 6.60534 86.3193 6.28898C87.0533 5.9726 87.8491 5.82534 88.6477 5.85807C92.2996 5.85807 94.4169 8.57307 94.4169 12.045V20.2835H90.9231V12.5769C90.9755 12.1514 90.9343 11.7196 90.8025 11.3117C90.6706 10.9038 90.4513 10.5296 90.1597 10.2153C89.8681 9.90098 89.5115 9.65416 89.1145 9.49208C88.7176 9.33 88.2901 9.25656 87.8619 9.27692C87.3962 9.23989 86.9281 9.30469 86.49 9.46683C86.0519 9.62896 85.6543 9.88453 85.3248 10.2158C84.9955 10.547 84.7422 10.9461 84.5826 11.385C84.4229 11.8241 84.3607 12.2926 84.4004 12.7581V20.2892H80.9204V20.2835Z",
+p18a70300: "M84.9297 4.96728H87.2805V5.75089C88.4559 4.18368 91.1994 4.57548 92.7666 6.14269C94.7256 3.79187 98.6444 4.57548 99.4281 7.3181C99.8199 9.66894 99.4281 12.4124 99.4281 14.7632C99.4281 15.5468 98.2526 15.5468 97.0772 15.5468C97.0772 13.196 97.469 10.8443 97.0772 8.49763C97.0002 8.08623 96.7821 7.7146 96.4608 7.44717C96.1387 7.17974 95.7338 7.03333 95.3149 7.03333C94.8961 7.03333 94.4912 7.17974 94.169 7.44717C93.8477 7.7146 93.6297 8.08623 93.5526 8.49763V15.5468H91.2018C91.2666 13.0587 91.1354 10.5693 90.81 8.10173C90.4182 6.5345 87.6756 6.9263 87.6756 8.49353C87.3502 10.8284 87.219 13.1862 87.2838 15.5427H84.9297V4.96728Z",
+p18ffe400: "M32.4218 4.96625H34.7726V5.74986C35.5562 4.57445 37.1234 4.57445 38.6915 4.96625C38.2997 5.74986 37.9079 6.14166 37.9079 6.92527C36.3407 6.53347 34.7734 7.31707 34.7734 8.49247V14.3703C34.3808 15.5498 33.2054 15.5498 32.4218 15.5498V4.96625Z",
+p1fd6d500: "M50.8398 4.9661H53.1907V5.74971C54.2621 5.00678 55.5662 4.67685 56.8621 4.82089C58.1579 4.96494 59.3578 5.57323 60.2398 6.53332C60.7243 7.03682 61.1003 7.63432 61.3447 8.28891C61.589 8.94342 61.6966 9.64121 61.6606 10.3389C61.6246 11.0367 61.4459 11.7197 61.1356 12.3456C60.8253 12.9716 60.3898 13.5274 59.8562 13.9784C58.289 15.9374 55.1538 15.9374 53.1948 14.762V18.2866C52.803 19.462 51.6275 19.462 50.8439 19.462V4.9661H50.8398ZM55.9341 6.92512C53.5833 7.31692 52.4095 10.0596 53.5833 11.6276C54.7587 13.5866 57.8939 13.5866 58.6775 11.6276C60.2439 9.66777 58.2849 6.92512 55.9341 6.92512Z",
+p21cb4200: "M14.755 3.42354e-08C11.8366 0.000197034 8.98376 0.865786 6.55728 2.48732C4.1308 4.10885 2.23964 6.4135 1.12295 9.10982C0.00625968 11.8061 -0.285816 14.773 0.283661 17.6353C0.853137 20.4977 2.25859 23.1268 4.32229 25.1904C6.38599 27.254 9.01526 28.6592 11.8776 29.2285C14.74 29.7978 17.7068 29.5055 20.4031 28.3887C23.0993 27.2718 25.4039 25.3805 27.0252 22.9539C28.6466 20.5273 29.512 17.6744 29.512 14.756C29.512 12.8181 29.1303 10.8992 28.3887 9.1089C27.647 7.31855 26.56 5.69182 25.1897 4.32158C23.8194 2.95135 22.1926 1.86445 20.4022 1.12295C18.6118 0.381447 16.6929 -0.000131966 14.755 3.42354e-08ZM21.522 21.282C21.4586 21.3848 21.3757 21.4741 21.2778 21.5448C21.18 21.6155 21.0691 21.6662 20.9516 21.6941C20.8342 21.722 20.7124 21.7264 20.5932 21.7072C20.474 21.6879 20.3597 21.6454 20.257 21.582C16.792 19.466 12.431 18.982 7.294 20.16C7.0561 20.2142 6.8064 20.1717 6.59983 20.0419C6.39326 19.912 6.24674 19.7054 6.1925 19.4675C6.13827 19.2296 6.18076 18.9799 6.31062 18.7733C6.44049 18.5667 6.6471 18.4202 6.885 18.366C12.506 17.082 17.328 17.635 21.217 20.012C21.3208 20.075 21.411 20.158 21.4826 20.256C21.5542 20.3541 21.6056 20.4654 21.634 20.5835C21.6623 20.7015 21.667 20.824 21.6478 20.9439C21.6286 21.0638 21.5858 21.1787 21.522 21.282ZM23.328 17.264C23.1685 17.524 22.9123 17.7102 22.6156 17.7814C22.319 17.8527 22.0062 17.8032 21.746 17.644C17.267 15.1469 11.9806 14.528 7.046 15.923C6.75427 16.0122 6.43902 15.9819 6.16963 15.8387C5.90023 15.6956 5.69875 15.4512 5.6095 15.1595C5.52026 14.8677 5.55056 14.5525 5.69374 14.2831C5.83693 14.0137 6.08126 13.8122 6.373 13.723C9.12686 12.9302 12.0113 12.6952 14.8571 13.0317C17.703 13.3683 20.453 14.2697 22.946 15.683C23.0748 15.7619 23.1867 15.8655 23.2755 15.9878C23.3643 16.11 23.428 16.2485 23.4632 16.3955C23.4984 16.5424 23.5043 16.6948 23.4806 16.844C23.4569 16.9932 23.404 17.1362 23.325 17.265L23.328 17.264ZM23.483 13.08C18.727 10.255 10.883 9.99502 6.34 11.374C6.1655 11.4305 5.98148 11.4516 5.79872 11.4361C5.61595 11.4207 5.4381 11.3689 5.27557 11.2839C5.11303 11.1989 4.96907 11.0824 4.8521 10.9411C4.73512 10.7998 4.64749 10.6367 4.59431 10.4611C4.54114 10.2856 4.52349 10.1012 4.54241 9.91882C4.56132 9.73632 4.61641 9.55949 4.70446 9.39859C4.79251 9.23769 4.91175 9.09595 5.05522 8.98167C5.19868 8.86739 5.36349 8.78285 5.54 8.733C10.752 7.151 19.417 7.456 24.893 10.707C25.0489 10.7994 25.185 10.9217 25.2936 11.0667C25.4023 11.2118 25.4813 11.3769 25.5261 11.5525C25.571 11.728 25.5808 11.9108 25.555 12.0901C25.5293 12.2695 25.4684 12.4421 25.376 12.598C25.2835 12.7539 25.1613 12.89 25.0162 12.9986C24.8712 13.1073 24.7061 13.1863 24.5305 13.2311C24.3549 13.276 24.1722 13.2858 23.9928 13.26C23.8134 13.2343 23.6409 13.1734 23.485 13.081L23.483 13.08ZM40.146 13.623C37.598 13.015 37.146 12.589 37.146 11.693C37.146 10.846 37.946 10.277 39.128 10.277C40.4027 10.3225 41.6267 10.7876 42.61 11.6C42.6279 11.6132 42.6482 11.6227 42.6698 11.628C42.6913 11.6332 42.7138 11.6342 42.7357 11.6307C42.7577 11.6273 42.7787 11.6195 42.7976 11.6079C42.8166 11.5963 42.833 11.581 42.846 11.563L44.09 9.80902C44.1146 9.77422 44.125 9.73132 44.1191 9.68912C44.1131 9.64694 44.0913 9.60861 44.058 9.582C42.6794 8.45438 40.9457 7.85203 39.165 7.882C36.414 7.882 34.492 9.533 34.492 11.895C34.492 14.428 36.15 15.325 39.015 16.017C41.452 16.579 41.864 17.049 41.864 17.89C41.864 18.822 41.032 19.402 39.693 19.402C38.1742 19.3903 36.7193 18.7894 35.635 17.726C35.6011 17.6971 35.5574 17.6825 35.513 17.685C35.4909 17.6864 35.4693 17.6923 35.4496 17.7023C35.4298 17.7123 35.4123 17.7261 35.398 17.743L33.998 19.403C33.9699 19.4363 33.9559 19.4792 33.9589 19.5227C33.9619 19.5662 33.9816 19.6068 34.014 19.636C35.5523 21.0297 37.5562 21.7977 39.632 21.789C42.596 21.789 44.511 20.17 44.511 17.662C44.516 15.546 43.249 14.374 40.146 13.62H40.141L40.146 13.623ZM51.222 11.11C50.6043 11.1019 49.9931 11.237 49.4363 11.5047C48.8796 11.7724 48.3924 12.1655 48.013 12.653V11.485C48.0131 11.4631 48.0089 11.4414 48.0006 11.4212C47.9924 11.4009 47.9801 11.3825 47.9647 11.367C47.9493 11.3514 47.9309 11.3391 47.9107 11.3307C47.8905 11.3223 47.8689 11.318 47.847 11.318H45.566C45.5441 11.318 45.5224 11.3223 45.5022 11.3307C45.482 11.3391 45.4637 11.3514 45.4482 11.367C45.4328 11.3825 45.4206 11.4009 45.4123 11.4212C45.404 11.4414 45.3998 11.4631 45.4 11.485V24.454C45.4 24.4981 45.4174 24.5404 45.4485 24.5717C45.4796 24.603 45.5219 24.6207 45.566 24.621H47.846C47.8901 24.6207 47.9323 24.603 47.9634 24.5717C47.9945 24.5404 48.012 24.4981 48.012 24.454V20.361C48.4054 20.8262 48.8975 21.198 49.4526 21.4491C50.0077 21.7003 50.6118 21.8246 51.221 21.813C53.609 21.813 56.026 19.975 56.026 16.462C56.026 12.949 53.612 11.109 51.226 11.109L51.222 11.11ZM53.374 16.462C53.4139 16.8407 53.3748 17.2237 53.259 17.5865C53.1432 17.9493 52.9534 18.2842 52.7014 18.5698C52.4495 18.8554 52.1409 19.0855 51.7954 19.2457C51.4498 19.4058 51.0748 19.4924 50.694 19.5C50.3123 19.4878 49.937 19.3986 49.5906 19.2377C49.2443 19.0769 48.9339 18.8477 48.6783 18.564C48.4227 18.2803 48.2271 17.9478 48.1031 17.5866C47.9791 17.2254 47.9294 16.8429 47.957 16.462C47.9293 16.081 47.9789 15.6984 48.1028 15.337C48.2267 14.9757 48.4223 14.6431 48.6779 14.3593C48.9336 14.0755 49.2439 13.8462 49.5904 13.6853C49.9368 13.5244 50.3122 13.4352 50.694 13.423C51.0732 13.435 51.446 13.5245 51.7894 13.686C52.1327 13.8476 52.4394 14.0777 52.6905 14.3622C52.9415 14.6467 53.1317 14.9796 53.2493 15.3404C53.3668 15.7011 53.4092 16.0822 53.374 16.46V16.462ZM62.221 11.11C61.1643 11.1299 60.1371 11.4615 59.2684 12.0633C58.3996 12.665 57.7279 13.5101 57.3378 14.4922C56.9477 15.4744 56.8564 16.55 57.0755 17.5838C57.2946 18.6177 57.8143 19.5638 58.5692 20.3033C59.3242 21.0428 60.2809 21.5428 61.3191 21.7404C62.3573 21.9381 63.4307 21.8245 64.4046 21.4142C65.3785 21.0038 66.2094 20.3148 66.793 19.4337C67.3767 18.5527 67.687 17.5188 67.685 16.462C67.6814 15.7507 67.5368 15.0472 67.2595 14.3922C66.9822 13.7372 66.5778 13.1436 66.0697 12.6459C65.5616 12.1482 64.9598 11.7562 64.2991 11.4925C63.6385 11.2289 62.9322 11.0989 62.221 11.11ZM62.221 19.518C61.8293 19.5144 61.4424 19.4314 61.0836 19.2742C60.7248 19.1169 60.4016 18.8886 60.1335 18.603C59.8654 18.3174 59.6579 17.9805 59.5236 17.6125C59.3893 17.2445 59.3309 16.8531 59.352 16.462C59.3266 16.0747 59.3811 15.6864 59.512 15.321C59.6429 14.9557 59.8475 14.6211 60.113 14.3381C60.3785 14.055 60.6993 13.8295 61.0556 13.6756C61.4118 13.5216 61.7959 13.4424 62.184 13.443C62.5768 13.4457 62.965 13.528 63.3252 13.6847C63.6853 13.8415 64.0101 14.0696 64.2797 14.3553C64.5494 14.6409 64.7584 14.9782 64.8942 15.3468C65.0301 15.7154 65.0898 16.1077 65.07 16.5C65.0944 16.8884 65.0387 17.2777 64.9064 17.6437C64.774 18.0097 64.5679 18.3445 64.3007 18.6275C64.0336 18.9105 63.7111 19.1356 63.3534 19.2888C62.9956 19.442 62.6102 19.52 62.221 19.518ZM74.251 11.318H71.74V8.751C71.7401 8.72912 71.7359 8.70743 71.7276 8.68717C71.7194 8.66691 71.7071 8.6485 71.6917 8.63298C71.6763 8.61746 71.6579 8.60514 71.6377 8.59673C71.6175 8.58833 71.5959 8.584 71.574 8.584H69.293C69.2488 8.58427 69.2065 8.60194 69.1752 8.63321C69.1439 8.66447 69.1262 8.70679 69.126 8.751V11.318H68.026C68.0041 11.318 67.9824 11.3223 67.9622 11.3307C67.942 11.3391 67.9237 11.3514 67.9082 11.367C67.8928 11.3825 67.8806 11.4009 67.8723 11.4212C67.8641 11.4414 67.8599 11.4631 67.86 11.485V13.446C67.86 13.4901 67.8774 13.5324 67.9085 13.5637C67.9397 13.595 67.9819 13.6127 68.026 13.613H69.126V18.687C69.126 20.736 70.146 21.776 72.16 21.776C72.9069 21.7939 73.6447 21.6101 74.296 21.244C74.3218 21.2299 74.3434 21.2091 74.3584 21.1837C74.3733 21.1584 74.3811 21.1294 74.381 21.1V19.231C74.3809 19.2027 74.3736 19.1749 74.3598 19.1502C74.346 19.1255 74.3261 19.1048 74.302 19.09C74.278 19.0747 74.2504 19.066 74.2219 19.0648C74.1935 19.0635 74.1652 19.0698 74.14 19.083C73.7263 19.297 73.2668 19.4075 72.801 19.405C72.07 19.405 71.742 19.072 71.742 18.328V13.614H74.253C74.2749 13.614 74.2965 13.6097 74.3167 13.6013C74.3369 13.5928 74.3553 13.5805 74.3707 13.565C74.3861 13.5495 74.3984 13.5311 74.4066 13.5108C74.4149 13.4906 74.4191 13.4689 74.419 13.447V11.487C74.4197 11.4651 74.4159 11.4434 74.4079 11.423C74.4 11.4026 74.388 11.3841 74.3726 11.3685C74.3573 11.3529 74.339 11.3405 74.3188 11.3322C74.2986 11.3239 74.2769 11.3197 74.255 11.32L74.251 11.318ZM82.998 11.328V11.013C82.998 10.086 83.354 9.672 84.15 9.672C84.589 9.67722 85.0239 9.75732 85.436 9.90902C85.4611 9.91742 85.4879 9.91982 85.514 9.91582C85.5402 9.91182 85.5651 9.90162 85.5865 9.88602C85.608 9.87042 85.6254 9.85002 85.6373 9.82632C85.6492 9.80262 85.6552 9.77652 85.655 9.75002V7.823C85.6554 7.78713 85.6441 7.75211 85.6228 7.72324C85.6015 7.69437 85.5714 7.67322 85.537 7.663C84.9214 7.47505 84.2805 7.3833 83.637 7.391C81.531 7.391 80.416 8.578 80.416 10.821V11.304H79.316C79.2718 11.3042 79.2295 11.3219 79.1982 11.3532C79.1669 11.3844 79.1492 11.4268 79.149 11.471V13.442C79.1492 13.4862 79.1669 13.5285 79.1982 13.5598C79.2295 13.591 79.2718 13.6087 79.316 13.609H80.416V21.434C80.416 21.4783 80.4336 21.5208 80.4649 21.5521C80.4962 21.5834 80.5387 21.601 80.583 21.601H82.863C82.8849 21.6011 82.9067 21.5969 82.9271 21.5885C82.9474 21.5802 82.9658 21.5679 82.9814 21.5524C82.9969 21.5368 83.0092 21.5184 83.0175 21.498C83.0259 21.4777 83.0301 21.456 83.03 21.434V13.614H85.16L88.423 21.438C88.053 22.259 87.688 22.423 87.191 22.423C86.7481 22.412 86.3153 22.2888 85.933 22.065C85.8921 22.0445 85.8449 22.0402 85.801 22.053C85.779 22.0602 85.7587 22.0719 85.7415 22.0874C85.7242 22.1029 85.7104 22.1218 85.701 22.143L84.927 23.843C84.9091 23.8815 84.9067 23.9254 84.92 23.9657C84.9334 24.006 84.9616 24.0398 84.999 24.06C85.7408 24.4806 86.5813 24.696 87.434 24.684C89.119 24.684 90.051 23.898 90.87 21.784L94.836 11.556C94.8458 11.5309 94.8495 11.5037 94.8465 11.4769C94.8436 11.45 94.8342 11.4243 94.8192 11.4019C94.8042 11.3795 94.7839 11.3611 94.7602 11.3482C94.7365 11.3353 94.71 11.3284 94.683 11.328H92.307C92.2721 11.3277 92.238 11.3384 92.2095 11.3584C92.181 11.3785 92.1595 11.407 92.148 11.44L89.715 18.389L87.046 11.436C87.034 11.4045 87.0128 11.3775 86.9851 11.3584C86.9575 11.3393 86.9246 11.329 86.891 11.329H82.991L82.998 11.328ZM77.927 11.318H75.646C75.6018 11.3182 75.5595 11.3359 75.5282 11.3672C75.4969 11.3984 75.4792 11.4408 75.479 11.485V21.437C75.479 21.4589 75.4833 21.4806 75.4917 21.5009C75.5001 21.5212 75.5124 21.5396 75.5279 21.5551C75.5434 21.5706 75.5618 21.5829 75.5821 21.5913C75.6023 21.5997 75.6241 21.604 75.646 21.604H77.928C77.9499 21.604 77.9716 21.5997 77.9919 21.5913C78.0122 21.5829 78.0306 21.5706 78.0461 21.5551C78.0616 21.5396 78.0739 21.5212 78.0823 21.5009C78.0907 21.4806 78.095 21.4589 78.095 21.437V11.486C78.095 11.4417 78.0774 11.3992 78.0461 11.3679C78.0148 11.3366 77.9723 11.319 77.928 11.319L77.927 11.318ZM76.799 6.786C76.4754 6.78581 76.1591 6.88156 75.8899 7.06116C75.6208 7.24077 75.4109 7.49615 75.2869 7.79501C75.1629 8.09387 75.1303 8.4228 75.1932 8.74019C75.2562 9.05758 75.4118 9.34918 75.6405 9.57812C75.8691 9.80702 76.1605 9.96302 76.4778 10.0264C76.7952 10.0897 77.1241 10.0575 77.4231 9.93382C77.7222 9.81022 77.9778 9.60068 78.1577 9.33175C78.3376 9.06282 78.4338 8.74657 78.434 8.423C78.4341 8.20816 78.3919 7.9954 78.3098 7.79686C78.2277 7.59832 78.1073 7.41789 77.9555 7.26588C77.8037 7.11387 77.6234 6.99326 77.425 6.91092C77.2265 6.82858 77.0138 6.78613 76.799 6.786ZM96.785 14.523C96.4669 14.5222 96.1563 14.4272 95.8921 14.2501C95.628 14.0729 95.4223 13.8215 95.3009 13.5275C95.1795 13.2335 95.1479 12.9102 95.2101 12.5983C95.2722 12.2864 95.4254 11.9999 95.6502 11.7749C95.875 11.5499 96.1614 11.3966 96.4733 11.3342C96.7852 11.2719 97.1085 11.3033 97.4026 11.4245C97.6966 11.5457 97.9482 11.7513 98.1255 12.0153C98.3028 12.2793 98.398 12.5899 98.399 12.908C98.401 13.1205 98.3606 13.3314 98.2802 13.5281C98.1998 13.7249 98.081 13.9037 97.9308 14.0541C97.7805 14.2044 97.6018 14.3233 97.4051 14.4038C97.2083 14.4843 96.9975 14.5249 96.785 14.523ZM96.794 11.463C96.5064 11.4602 96.2245 11.543 95.9841 11.7009C95.7437 11.8587 95.5557 12.0845 95.4439 12.3495C95.3322 12.6145 95.3018 12.9067 95.3565 13.189C95.4113 13.4714 95.5488 13.731 95.7515 13.935C95.9542 14.139 96.213 14.2781 96.495 14.3346C96.777 14.3912 97.0694 14.3626 97.3351 14.2525C97.6008 14.1424 97.8277 13.9558 97.9871 13.7164C98.1464 13.477 98.231 13.1956 98.23 12.908C98.2312 12.7186 98.1949 12.5309 98.1233 12.3557C98.0516 12.1804 97.946 12.0211 97.8126 11.8868C97.6791 11.7525 97.5204 11.6459 97.3456 11.5731C97.1708 11.5004 96.9833 11.463 96.794 11.463ZM97.15 13.073L97.605 13.709H97.221L96.812 13.126H96.461V13.709H96.14V12.023H96.891C97.284 12.023 97.541 12.223 97.541 12.561C97.5467 12.6784 97.5108 12.7942 97.4397 12.8878C97.3686 12.9814 97.2667 13.047 97.152 13.073H97.15ZM96.879 12.313H96.461V12.846H96.879C97.087 12.846 97.212 12.746 97.212 12.579C97.212 12.412 97.086 12.308 96.878 12.308L96.879 12.313Z",
+p248a1d00: "M62.1018 20.0152C61.3921 19.1025 57.371 19.5756 55.5791 19.8121C55.0379 19.8802 54.9364 19.4071 55.4441 19.0691C58.6552 16.8052 63.8925 17.4802 64.5018 18.2244C65.111 18.9687 64.3333 24.2406 61.3252 26.741C60.8521 27.1125 60.4125 26.9094 60.6156 26.4029C61.2906 24.7137 62.8114 20.9614 62.1018 20.0152Z",
+p272a6dc0: "M42.2179 4.96735C46.1368 3.40014 50.0548 7.31817 49.2671 11.2371C48.4794 15.1559 42.9974 17.1149 40.2507 14.3715C37.1163 11.6289 38.2917 5.75096 42.2097 4.96735H42.2179ZM43.3933 6.92637C42.7353 7.10191 42.1353 7.4479 41.6538 7.92944C41.1722 8.41099 40.8262 9.01099 40.6507 9.66902C40.5703 10.1161 40.5924 10.5756 40.7156 11.0128C40.8387 11.45 41.0595 11.8536 41.3614 12.193C41.6632 12.5325 42.0383 12.7989 42.4581 12.9722C42.878 13.1456 43.3317 13.2212 43.7851 13.1936C45.3524 13.1936 46.9196 12.0182 46.9196 10.451C46.9196 8.49361 44.9614 6.53457 43.395 6.92637H43.3933Z",
+p2796bcf0: "M59.769 22.685C54.1924 26.8077 46.082 29.0046 39.0863 29.0046C29.7548 29.051 20.7411 25.6166 13.8066 19.3723C13.3001 18.8993 13.7386 18.2566 14.3836 18.6293C21.0988 22.4938 28.6174 24.7518 36.3508 25.2266C44.0841 25.7014 51.8224 24.3801 58.9601 21.3662C59.904 20.9958 60.6816 22.0135 59.769 22.685Z",
+p2a71dac0: "M3.03332 1.83191C3.77779 1.18505 4.64296 0.691948 5.57891 0.38104C6.51487 0.0701326 7.50311 -0.0524322 8.48669 0.0204121C9.47021 0.0932571 10.4296 0.360069 11.3096 0.805464C12.1895 1.25087 12.9726 1.86604 13.6137 2.61551C14.9922 4.00956 15.7973 5.87019 15.8699 7.82938C15.9424 9.78854 15.2771 11.7036 14.0055 13.1958L8.12758 19.0737C6.95217 18.2901 4.99315 16.7229 5.77676 15.1548C7.34397 13.1958 9.30136 11.6303 10.871 9.66878C12.0464 8.10157 11.2628 4.96633 8.91201 4.57453C8.38447 4.39014 7.81845 4.34428 7.26812 4.44133C6.71779 4.5384 6.2016 4.77513 5.76898 5.12886C5.33637 5.48258 5.00181 5.94146 4.79737 6.46154C4.59292 6.98162 4.52542 7.54548 4.60135 8.09911C4.60135 10.0581 6.16856 11.2335 7.34397 12.4098C6.16856 13.5852 4.60135 14.3688 4.60135 15.9344C3.42594 14.3671 1.46692 13.1917 0.682494 11.2319C-0.0339199 9.62796 -0.191649 7.8301 0.234543 6.12592C0.660735 4.42175 1.64622 2.90978 3.03332 1.83191Z",
+p2cdc9c00: "M28.1138 1.83214C28.5056 0.656725 29.681 1.04853 30.4646 1.04853V15.5428H28.1138V14.3707C27.1703 15.1313 25.9949 15.5462 24.783 15.5462C23.5711 15.5462 22.3957 15.1313 21.4523 14.3707C20.367 13.3798 19.717 12.0005 19.6437 10.5329C19.5703 9.06517 20.0795 7.62791 21.0605 6.53377C21.9426 5.57368 23.1424 4.9654 24.4383 4.82135C25.7341 4.67731 27.0382 5.00724 28.1097 5.75017L28.1138 1.83214ZM24.5892 6.9264C22.6301 7.3182 21.0646 10.0608 22.6302 12.0207C22.9229 12.4476 23.3228 12.7902 23.7897 13.0137C24.2566 13.2373 24.7742 13.3341 25.2903 13.2943C25.8065 13.2547 26.3031 13.0799 26.7304 12.7875C27.1576 12.4952 27.5004 12.0956 27.7244 11.6289C28.8974 9.66902 26.9375 6.92558 24.5867 6.92558L24.5892 6.9264Z",
+p337ab80: "M55.6798 3.18497V0.992671C55.676 0.92059 55.6874 0.848532 55.7132 0.781147C55.739 0.713756 55.7788 0.652558 55.8298 0.601524C55.8808 0.55049 55.9421 0.510742 56.0095 0.4849C56.0769 0.459057 56.1489 0.447695 56.221 0.451519H66.0183C66.1663 0.447768 66.3098 0.502427 66.4178 0.603708C66.5258 0.704988 66.5894 0.844736 66.5952 0.992671V2.85151C66.5952 3.15612 66.3252 3.56113 65.8521 4.23613L60.7833 11.4684C62.7149 11.3644 64.6399 11.7711 66.3645 12.6477C66.5141 12.7333 66.6393 12.8559 66.728 13.0039C66.8166 13.1518 66.8659 13.3199 66.871 13.4923V15.8242C66.871 16.1623 66.5329 16.5338 66.1614 16.3307C64.5623 15.5031 62.7869 15.0739 60.9863 15.0797C59.1857 15.0855 57.4131 15.5262 55.8195 16.3642C55.7388 16.393 55.6524 16.402 55.5674 16.3902C55.4826 16.3784 55.4019 16.3462 55.3322 16.2965C55.2625 16.2467 55.2058 16.1809 55.1671 16.1044C55.1284 16.028 55.1087 15.9433 55.1098 15.8577V13.6238C55.0766 13.1015 55.2064 12.5818 55.4814 12.1365L61.366 3.72151H56.2625C56.1145 3.72526 55.971 3.6706 55.8631 3.56931C55.7551 3.46803 55.6913 3.32829 55.6856 3.18035L55.6798 3.18497ZM19.9579 16.8004H16.9798C16.8466 16.787 16.7214 16.7302 16.6235 16.6387C16.5258 16.5471 16.4608 16.4259 16.4387 16.2938V1.02267C16.4444 0.874736 16.5081 0.734989 16.6161 0.633708C16.7241 0.532428 16.8676 0.477769 17.0156 0.48152H19.7848C19.9219 0.483385 20.0533 0.536322 20.1535 0.630011C20.2535 0.7237 20.3151 0.851394 20.326 0.988055V2.98189H20.3941C20.6571 2.15769 21.1756 1.43846 21.8742 0.928124C22.5729 0.417781 23.4156 0.142739 24.2808 0.142739C25.1459 0.142739 25.9888 0.417781 26.6875 0.928124C27.386 1.43846 27.9043 2.15769 28.1675 2.98189C28.4641 2.13216 29.0234 1.39895 29.7648 0.888582C30.506 0.378208 31.3906 0.117223 32.2902 0.143443C32.9581 0.12997 33.6193 0.276348 34.2191 0.570396C34.8189 0.864444 35.3396 1.29763 35.7379 1.83382C36.6841 3.11806 36.481 4.9769 36.481 6.63267V16.2984C36.4752 16.4464 36.4115 16.5861 36.3035 16.6874C36.1955 16.7887 36.0521 16.8434 35.9041 16.8396H32.9641C32.8233 16.8312 32.6905 16.7714 32.5908 16.6717C32.4911 16.572 32.4314 16.4392 32.4229 16.2984V8.18804C32.4683 7.22995 32.4454 6.26986 32.3548 5.31498C32.2929 4.9085 32.0738 4.54259 31.7446 4.29613C31.4155 4.04967 31.0028 3.94236 30.5952 3.99729C30.2073 4.00848 29.8311 4.13282 29.5129 4.35505C29.1948 4.57727 28.9484 4.88767 28.8044 5.24803C28.5596 6.20759 28.4684 7.19994 28.5344 8.18804V16.2984C28.5288 16.4464 28.465 16.5861 28.357 16.6874C28.249 16.7887 28.1056 16.8434 27.9575 16.8396H24.9841C24.8433 16.8312 24.7105 16.7714 24.6108 16.6717C24.5111 16.572 24.4514 16.4392 24.4429 16.2984V8.18804C24.4429 6.49766 24.7129 3.96384 22.6175 3.96384C20.4887 3.96384 20.5556 6.39727 20.5556 8.18804V16.2984C20.5344 16.4429 20.4606 16.5745 20.3484 16.668C20.2362 16.7615 20.0935 16.8103 19.9475 16.805L19.9579 16.8004ZM75.0448 0.13883C79.4721 0.13883 81.8721 3.92344 81.8721 8.7569C81.8721 13.4207 79.2356 17.1384 75.0448 17.1384C70.7191 17.1384 68.3525 13.3538 68.3525 8.6219C68.3191 3.85652 70.7179 0.13883 75.0448 0.13883ZM75.0448 3.2819C72.8525 3.2819 72.7129 6.28997 72.7129 8.14881C72.7129 10.0077 72.6795 13.9954 75.0114 13.9954C77.3098 13.9954 77.4448 10.7842 77.4448 8.82497C77.4864 7.45923 77.3384 6.09434 77.0052 4.76922C76.9129 4.32665 76.6632 3.93253 76.3025 3.65991C75.9419 3.38729 75.4946 3.25466 75.0437 3.28652L75.0448 3.2819ZM87.5825 16.8004H84.6091C84.4683 16.7919 84.3355 16.7322 84.2358 16.6324C84.1361 16.5327 84.0764 16.4 84.0679 16.2592V0.954605C84.0866 0.81469 84.1554 0.68627 84.2614 0.593143C84.3675 0.500016 84.5037 0.448464 84.6448 0.448032H87.4141C87.5398 0.452237 87.6609 0.497503 87.7586 0.576875C87.8562 0.656247 87.9253 0.765381 87.9552 0.887659V3.21958H88.0233C88.8679 1.1242 90.0171 0.144571 92.0791 0.144571C92.7651 0.113401 93.4474 0.2623 94.058 0.576453C94.6688 0.890601 95.1866 1.35907 95.5602 1.93534C96.3379 3.15265 96.3379 5.21343 96.3379 6.70074V16.333C96.3175 16.4693 96.2471 16.5932 96.1406 16.6807C96.034 16.768 95.8986 16.8128 95.761 16.8061H92.7875C92.6591 16.794 92.5377 16.7417 92.4407 16.6569C92.3435 16.572 92.2756 16.4587 92.2464 16.333V8.01958C92.2464 6.33035 92.4494 3.89689 90.3875 3.89689C90.0141 3.91431 89.6536 4.03804 89.3481 4.2535C89.0428 4.46894 88.8053 4.76716 88.6637 5.11303C88.3022 6.03751 88.1409 7.02819 88.1906 8.01958V16.2661C88.1719 16.4146 88.0999 16.5514 87.9881 16.6508C87.8763 16.7504 87.7322 16.8059 87.5825 16.8073V16.8004ZM47.8729 9.49996C47.9833 10.5883 47.7963 11.6862 47.3318 12.6765C47.1432 13.0679 46.8518 13.4005 46.4885 13.6388C46.1252 13.8771 45.7039 14.012 45.2698 14.0288C44.116 14.0288 43.4444 13.1496 43.4444 11.8654C43.4444 9.3269 45.7083 8.8573 47.8718 8.8573L47.8729 9.49996ZM50.881 16.7692C50.7846 16.8533 50.6644 16.9051 50.5371 16.9174C50.4099 16.9296 50.2819 16.9015 50.1714 16.8373C49.483 16.2802 48.8993 15.6051 48.4475 14.8434C47.8583 15.5639 47.1074 16.1352 46.256 16.5111C45.4046 16.887 44.4766 17.0569 43.5471 17.0069C42.9373 17.0427 42.3269 16.9461 41.758 16.7236C41.1891 16.5012 40.6751 16.1581 40.2512 15.7182C39.8274 15.2782 39.5038 14.7518 39.3027 14.175C39.1017 13.5981 39.0279 12.9846 39.0864 12.3765C39.0513 11.3371 39.3376 10.3122 39.9059 9.44133C40.4743 8.57044 41.2974 7.89591 42.2629 7.50961C44.0769 6.90796 45.9641 6.55548 47.8729 6.46189V6.09036C47.974 5.34816 47.8442 4.59285 47.5014 3.92689C47.3071 3.67496 47.0555 3.47297 46.7675 3.33771C46.4796 3.20247 46.1635 3.13784 45.8456 3.14919C45.2956 3.10119 44.747 3.25716 44.3044 3.58737C43.8619 3.91759 43.5563 4.39899 43.4456 4.93997C43.3775 5.20997 43.2148 5.48111 42.9391 5.48111L40.066 5.17652C39.9966 5.16677 39.9299 5.1431 39.8698 5.10694C39.8098 5.07078 39.7578 5.02287 39.7167 4.96609C39.6756 4.90931 39.6464 4.8448 39.631 4.77647C39.6154 4.70814 39.6139 4.63738 39.6264 4.56843C40.3025 1.05381 43.4456 0.00611476 46.2841 0.00611476C47.9153 -0.0636387 49.5158 0.465328 50.7841 1.49343C52.2368 2.84574 52.1018 4.66996 52.1018 6.63034V11.2607C52.1207 12.2896 52.5178 13.2755 53.2175 14.03C53.4206 14.3 53.4541 14.638 53.2175 14.8077C52.5702 15.3177 51.4868 16.2638 50.881 16.7692ZM8.83945 9.49996C8.94992 10.5883 8.76287 11.6862 8.29828 12.6765C8.1098 13.0679 7.81828 13.4005 7.45502 13.6388C7.09175 13.8771 6.67047 14.012 6.23638 14.0288C5.08254 14.0288 4.411 13.1496 4.411 11.8654C4.411 9.3269 6.67483 8.8573 8.8383 8.8573L8.83945 9.49996ZM11.8141 16.7692C11.7177 16.8533 11.5975 16.9051 11.4702 16.9174C11.3429 16.9296 11.215 16.9015 11.1044 16.8373C10.4161 16.2802 9.83238 15.6051 9.3806 14.8434C8.79133 15.5639 8.04053 16.1352 7.18909 16.5111C6.33766 16.887 5.4096 17.0569 4.48022 17.0069C3.87039 17.0427 3.26004 16.9461 2.69111 16.7236C2.12217 16.5012 1.60813 16.1581 1.1843 15.7182C0.760483 15.2782 0.436914 14.7518 0.235838 14.175C0.0347628 13.5981 -0.0390493 12.9846 0.0194569 12.3765C-0.0155785 11.3371 0.270584 10.3122 0.838995 9.44133C1.40741 8.57044 2.23043 7.89591 3.19599 7.50961C5.00991 6.90796 6.89717 6.55548 8.80599 6.46189V6.09036C8.90701 5.34816 8.77731 4.59285 8.43446 3.92689C8.24018 3.67496 7.9886 3.47297 7.70065 3.33771C7.41268 3.20247 7.09661 3.13784 6.77867 3.14919C6.2286 3.10119 5.68008 3.25716 5.23752 3.58737C4.79496 3.91759 4.4893 4.39899 4.37869 4.93997C4.31061 5.20997 4.14214 5.48111 3.87214 5.48111L0.999071 5.17652C0.929682 5.16677 0.862974 5.1431 0.802954 5.10694C0.742936 5.07078 0.690833 5.02287 0.64978 4.96609C0.608726 4.90931 0.579559 4.8448 0.564037 4.77647C0.548515 4.70814 0.546952 4.63738 0.559442 4.56843C1.23559 1.05381 4.37868 0.00611476 7.21714 0.00611476C8.84834 -0.0636387 10.4488 0.465328 11.7171 1.49343C13.1698 2.84574 13.0348 4.66996 13.0348 6.63034V11.2607C13.0539 12.2895 13.451 13.2754 14.1506 14.03C14.3537 14.3 14.3871 14.638 14.1506 14.8077C13.5079 15.3142 12.4268 16.2604 11.8187 16.7692H11.8141Z",
+p35ba2b80: "M65.7281 5.35889C66.7198 4.80276 67.8635 4.5788 68.9918 4.71981C70.12 4.86083 71.1734 5.35939 71.9978 6.1425C71.606 6.5343 71.2142 7.31791 70.4306 7.70971C70.0653 7.4138 69.6362 7.20685 69.1773 7.1052C68.7183 7.00353 68.242 7.00996 67.786 7.12395C67.33 7.23794 66.9066 7.45638 66.5495 7.76202C66.1924 8.06765 65.9111 8.45216 65.7281 8.88511C65.5578 9.34913 65.4968 9.8461 65.5497 10.3375C65.6028 10.829 65.7683 11.3015 66.0337 11.7185C66.299 12.1355 66.6569 12.4858 67.0796 12.7419C67.5022 12.9981 67.9783 13.1535 68.4707 13.1958C69.2543 13.1958 70.0379 12.804 70.8215 12.804C71.5215 13.1122 72.0806 13.6713 72.3888 14.3712C69.6461 16.722 64.9437 15.9384 63.7683 12.4122C62.201 10.0605 63.3765 6.92447 65.7281 5.35889Z",
+p3f7f9b00: "M23.2988 22.0868H17.7964L16.1096 18.0277H6.94458L5.41084 22.0868H0L8.26626 1.58433H14.1892L23.2988 22.0868ZM11.3036 6.48313L8.29157 14.4494H14.6048L11.3036 6.48313ZM43.2831 1.58433H47.7325V22.0868H42.6217V9.2771L37.0904 15.7097H36.3084L30.7771 9.2771V22.0868H25.6626V1.58433H30.1205L36.6988 9.19036L43.2831 1.58433ZM60.6831 1.58433C68.1687 1.58433 72.0157 6.24337 72.0157 11.8651C72.0157 17.7566 68.2879 22.0868 60.112 22.0868H51.6337V1.58433H60.6831ZM56.747 18.3289H60.0831C65.2241 18.3289 66.7566 14.835 66.7566 11.8338C66.7566 8.31566 64.8626 5.34096 60.0229 5.34096H56.747V18.3289ZM82.1831 6.44578L75.7385 0H99.2V23.4627L92.7554 17.0181V6.44578H82.1831ZM82.1759 7.73734L75.5422 14.3723V23.6603H84.8289L91.4639 17.0253H82.1759V7.73734Z",
+pa9dd680: "M72.3889 12.0198C71.2151 8.49353 73.9561 4.57471 77.4831 4.57471C78.8939 4.63628 80.2424 5.1731 81.3094 6.09794C82.3766 7.02278 83.0996 8.28131 83.3611 9.66894V15.5468C82.1857 15.5468 81.402 15.5468 80.6184 14.7632C77.8757 16.7222 73.5692 15.155 72.3897 12.0206L72.3889 12.0198ZM77.4831 6.92553C76.9434 7.02705 76.436 7.25619 76.0029 7.59381C75.5698 7.9314 75.2239 8.36771 74.9938 8.86631C74.7637 9.36492 74.6562 9.91131 74.6803 10.4598C74.7044 11.0084 74.8594 11.5433 75.1323 12.0198C76.6995 13.9788 79.8348 13.587 80.6184 11.628C80.819 11.1113 80.8924 10.5539 80.8322 10.0028C80.772 9.45181 80.5801 8.92336 80.2725 8.46213C79.9651 8.0009 79.5511 7.62053 79.0656 7.35308C78.58 7.08562 78.0373 6.93898 77.4831 6.92553Z",
+}
diff --git a/src/imports/svg-xklexce4dq.ts b/src/imports/svg-xklexce4dq.ts
new file mode 100644
index 0000000..d4ee8cc
--- /dev/null
+++ b/src/imports/svg-xklexce4dq.ts
@@ -0,0 +1,14 @@
+export default {
+p165b1900: "M15.1658 1.56517C15.232 0.832549 14.6911 0.178348 13.9555 0.180954V0.180954C13.2188 0.183564 12.6825 0.843422 12.7557 1.57648L14.0203 14.2271L15.1658 1.56517Z",
+p2193a880: "M26.6745 14.2186C27.4055 14.2186 28.0045 13.6248 27.9356 12.8971V12.8971C27.8667 12.1694 27.1669 11.6985 26.4489 11.8357L13.9773 14.2186H26.6745Z",
+p229f6800: "M1.32351 14.1834C0.592569 14.1834 -0.00645272 13.5895 0.062442 12.8618V12.8618C0.131337 12.1341 0.831159 11.6633 1.54911 11.8005L14.0207 14.1834H1.32351Z",
+p233cb880: "M0.639034 0.0133626L6.4553 -1.64677e-05L6.47199 2.07034H-3.40723e-05L0.639034 0.0133626Z",
+p2946b000: "M8.47495 2.79704C8.15568 2.13951 8.42824 1.34127 9.11293 1.08541V1.08541C9.79763 0.829542 10.5269 1.25341 10.7171 1.95918L14.0208 14.219L8.47495 2.79704Z",
+p2c30f300: "M25.989 10.1036C26.6805 9.86673 27.0548 9.11083 26.7538 8.44473V8.44473C26.4529 7.77863 25.6382 7.55993 25.0035 7.92234L13.9769 14.2178L25.989 10.1036Z",
+p339e2d00: "M19.5231 2.83164C19.8424 2.1741 19.5698 1.37587 18.8851 1.12V1.12C18.2004 0.86414 17.4712 1.28801 17.281 1.99378L13.9772 14.2536L19.5231 2.83164Z",
+p3a572b0: "M4.40669 6.42417V2.06981H6.48469L6.50478 5.80233L4.40669 6.42417Z",
+p5ff2880: "M2.0087 10.0696C1.31719 9.83279 0.94291 9.07689 1.24388 8.41079V8.41079C1.54485 7.74469 2.35949 7.52599 2.99426 7.8884L14.0209 14.1839L2.0087 10.0696Z",
+p628b00: "M4.52835 5.81194C3.963 5.31228 3.90608 4.44344 4.45457 3.92534V3.92534C5.00873 3.4019 5.88202 3.51756 6.34383 4.12403L14.0104 14.1922L4.52835 5.81194Z",
+p7126770: "M23.4694 5.84653C24.0347 5.34688 24.0916 4.47804 23.5431 3.95994V3.95994C22.989 3.4365 22.1157 3.55216 21.6539 4.15863L13.9873 14.2268L23.4694 5.84653Z",
+p7ae9780: "M3.59791 20.9834V18.0203L1.66503 17.2863L2.03873e-05 16.7033V12.9325L1.80876 13.5728L3.67868 14.215L3.59791 10.9827C3.59791 8.14844 3.62728 6.23936 3.67868 5.82083C3.97238 3.44916 5.1472 1.65756 7.01223 0.754412C7.84929 0.343224 8.60559 0.152316 9.76572 0.0495191C10.5367 -0.0239073 10.8084 -0.0165646 11.4619 0.0788896C12.3283 0.211057 13.2094 0.475392 13.7675 0.77644L14.1346 0.974691L14.1566 2.64147L14.1713 4.30825L13.6426 4.02188C12.7542 3.55195 11.9391 3.33902 10.9038 3.33168C10.1549 3.32433 9.94929 3.3537 9.52341 3.49321C8.56153 3.83097 7.81992 4.56524 7.48216 5.52712C7.23251 6.23936 7.18846 7.1425 7.21048 11.4012L7.23251 15.4397L10.7056 16.67L14.2761 17.9112L14.1713 18.8685L13.9553 21.5727L10.7056 20.412L7.1958 19.2203V20.9834V23.333H5.39685H3.59791V20.9834Z",
+}
diff --git a/src/imports/svg-zb9y9b0hmn.ts b/src/imports/svg-zb9y9b0hmn.ts
new file mode 100644
index 0000000..0444dcc
--- /dev/null
+++ b/src/imports/svg-zb9y9b0hmn.ts
@@ -0,0 +1,61 @@
+export default {
+p1165c400: "M877 481.6C877 483.1 880.9 485 884.1 485C886.2 485 888 485.4 888 485.9C888 486.3 889.2 486.5 890.6 486.2C892.4 485.9 893.6 486.2 894.1 487.2C894.7 488.2 896.1 488.7 898.2 488.5C900 488.3 902 488.6 902.6 489.1C903.4 489.7 904 489.5 904.4 488.5C904.8 487.3 904.2 487 901.5 487C899.6 487 898 486.6 898 486C898 485.5 897.3 485.3 896.5 485.6C895.7 486 895 485.8 895 485.2C895 484.6 894 484.4 892.8 484.8C891.5 485.1 890.9 484.9 891.3 484.3C891.7 483.7 891 483.5 889.5 483.8C888.1 484 887 483.8 887 483.2C887 482.5 885.6 482.3 883.5 482.7C881.5 483 880 482.8 880 482.3C880 481.8 879.3 481.3 878.5 481.3C877.7 481.3 877 481.5 877 481.6Z",
+p12642100: "M477.7 108.3C478 108.9 476.7 109.1 474.7 108.8C472.7 108.6 471.4 108.8 471.6 109.2C472.2 110.1 468.5 110.4 463.2 110.1C460.1 109.8 460 109.9 461.1 112.4C462.2 114.8 462.4 114.8 465.1 113.4C466.9 112.5 468 112.4 468 113C468 113.7 468.6 113.7 470.1 113C471.2 112.3 472.8 112.1 473.6 112.4C474.4 112.7 475 112.5 475 112.1C475 111.6 476.8 110.9 479 110.5C484.2 109.6 484.9 108.3 480.6 107.8C478.6 107.6 477.4 107.8 477.7 108.3Z",
+p12c91a00: "M873.5 346C873.9 346.6 874.6 346.7 875.2 346.4C875.8 346 876.9 346.5 877.7 347.5C878.4 348.6 879 348.9 879 348.4C879 346.8 876.7 345 874.7 345C873.7 345 873.2 345.5 873.5 346Z",
+p13059e00: "M271.901 208.1C270.701 208.8 270.701 209 272.001 209.1C272.801 209.1 272.501 209.5 271.201 209.8C269.901 210.2 268.901 210.9 268.901 211.5C268.801 213.3 270.501 213 273.301 210.6C275.301 208.9 275.701 208.1 274.701 207.7C273.901 207.4 272.701 207.6 271.901 208.1Z",
+p1492ad00: "M870.401 327.1C870.101 327.7 868.901 328 867.901 327.7C866.901 327.4 866.001 327.6 865.801 328C865.601 328.4 862.601 329.1 859.101 329.4C855.601 329.7 851.701 330.3 850.501 330.6C849.101 330.9 847.101 330.4 845.401 329.3C843.801 328.3 842.901 328.1 843.301 328.7C843.801 329.4 843.701 330 843.301 330C841.801 330 842.101 334.1 843.601 334.7C844.501 335 844.801 336 844.501 337C844.201 338 844.601 339.5 845.401 340.3C846.201 341.1 846.601 342.1 846.201 342.5C845.801 342.9 846.501 342.9 847.801 342.6C849.101 342.1 850.001 342.3 850.001 342.9C850.001 343.5 850.701 344 851.501 344C852.301 344 852.901 344.3 852.901 344.7C852.501 346.9 853.201 348 854.801 347.7C857.501 347.2 861.101 345 860.501 344.1C860.301 343.6 861.401 343 863.101 342.6C864.801 342.3 865.901 341.6 865.501 341C865.201 340.5 865.601 340 866.501 340C867.401 340 867.801 340.4 867.501 341C867.201 341.5 867.401 342 867.901 342C868.801 342 869.601 336.6 869.101 333.7C869.001 333.1 872.101 332.6 874.501 332.9C875.101 333 874.601 332.2 873.501 331.3C872.401 330.3 871.601 328.7 871.801 327.7C872.201 325.8 871.501 325.4 870.401 327.1Z",
+p16952200: "M890.9 328L888.5 330L891.3 328.9C892.8 328.2 894 327.3 894 326.8C894 325.6 893.5 325.8 890.9 328Z",
+p17b09c0: "M823.4 309C823.5 311.7 823.7 314 824 314C824.3 314 825.2 315.5 826 317.2C827.3 320.2 827.5 320.3 827.8 318.2C828 317 828.4 316 828.8 316C829.2 316 829.5 314.7 829.5 313.1C829.5 311.5 829.2 310.4 828.9 310.6C828.5 310.8 827.9 310.3 827.6 309.4C827.2 308.4 827.4 308.1 828.3 308.5C828.9 308.9 828.6 308.4 827.6 307.6C826.5 306.7 826 306 826.6 306C827.5 306 824.9 304 823.9 304C823.6 304 823.3 306.2 823.4 309Z",
+p18c2ce00: "M894 334.6C894 334.7 893.3 336.4 892.5 338.4C891 341.9 891 342 893.2 342C894.9 342 895.1 341.7 894.1 341.1C893 340.4 893.2 340.1 894.8 339.6C897.5 338.7 898.4 334.1 895.8 334.3C894.8 334.4 894 334.5 894 334.6Z",
+p198bb300: "M947 243.6C947 245.9 950.5 250 952.5 250C953.1 249.9 952.7 249.5 951.7 248.9C950.8 248.3 950.1 247.6 950.3 247.2C950.5 246.8 949.9 245.7 948.8 244.7C947.8 243.8 947 243.3 947 243.6Z",
+p1ab02900: "M907.401 380.2C907.001 380.9 907.001 381.2 907.401 380.8C908.401 380 912.101 383.1 911.401 384.2C911.101 384.6 911.401 385 911.901 385C912.501 385 913.001 386.4 913.001 388.1C913.001 389.7 912.601 390.9 912.101 390.6C911.701 390.3 910.401 390.8 909.401 391.6C908.401 392.5 908.001 392.9 908.701 392.5C910.001 391.9 914.001 394.8 914.001 396.5C914.101 399.3 920.501 404 921.201 401.8C921.501 401.1 922.701 400.9 924.301 401.4C925.801 401.7 926.801 402.4 926.501 402.9C926.301 403.4 926.701 404 927.501 404.4C928.401 404.7 929.001 406.2 929.001 408.3C929.001 410.6 929.801 412.4 931.401 413.9C933.401 415.8 933.801 415.9 933.601 414.5C933.501 413.6 932.901 412.5 932.301 412.2C931.801 411.8 931.001 409.8 930.601 407.6C929.901 403.8 929.901 403.8 932.501 404.4L935.101 405.1L932.901 402.9C931.401 401.4 931.101 400.5 931.901 399.7C932.601 399 932.001 397.7 929.901 395.3C928.301 393.4 927.201 391.5 927.501 391.1C927.701 390.6 927.101 390 926.001 389.7C924.901 389.4 923.601 388.1 923.101 386.8C922.601 385.5 921.401 383.8 920.401 383C918.601 381.6 918.701 381.7 920.401 384C921.501 385.4 920.701 384.8 918.701 382.7C915.901 379.8 914.301 379 911.601 379C909.701 379 907.801 379.6 907.401 380.2Z",
+p1afaf800: "M233 145.5C230.3 147 230.1 148.2 232.5 148.6C233.3 148.7 233.7 148.4 233.4 147.8C233.1 147.3 233.6 146.2 234.6 145.5C237 143.7 236.2 143.7 233 145.5Z",
+p1cd08500: "M574.9 76.4C574.6 76.7 572.5 77 570.2 77.1C567.8 77.3 565.6 77.8 565.4 78.2C565.1 78.6 564.4 79 563.9 79C563.3 79 563.2 78.5 563.6 77.9C564.1 77.1 563.7 77.1 562.3 77.9C561.2 78.5 560.1 78.8 559.9 78.7C559.7 78.6 559.6 78.7 559.8 79C560.1 79.5 560.7 79.6 564.8 79.8C566.1 79.9 566.8 80.5 566.5 81C566.1 81.6 566.8 81.8 568.2 81.6C569.5 81.3 570.7 81.1 571 81.1C571.3 81 570.8 80.5 570 79.9C568.8 79.1 569.1 78.9 571.2 79.3C572.7 79.5 573.7 79.4 573.5 79C573.2 78.5 573.7 78 574.4 77.7C575.2 77.4 576.1 77.6 576.4 78.3C576.6 79 576.9 78.7 576.9 77.7C577 76.1 575.9 75.4 574.9 76.4Z",
+p1cd69d00: "M822.701 386.5C821.801 387.2 821.001 388.2 821.001 388.9C821.001 389.5 820.601 390 820.001 390C819.501 390 819.001 391 819.001 392.2C819.001 394.3 819.001 394.3 817.601 392.5C816.301 390.7 816.201 390.7 816.701 393.3C817.001 395 816.801 396 816.001 396C815.301 396 815.101 396.8 815.501 398C815.901 399.2 815.701 400 815.001 400C814.401 400 814.201 400.4 814.501 401C814.801 401.5 814.601 402 813.901 402C813.201 402 812.901 402.3 813.301 402.6C814.001 403.3 808.701 408 807.201 408C805.101 408 806.801 411.3 809.101 411.7C810.401 411.9 811.701 412.5 811.801 413C812.001 413.6 812.901 414 813.801 414C815.301 414 815.301 413.8 814.001 413C812.701 412.2 812.801 412 814.301 412C815.201 412 816.001 412.4 816.001 413C816.001 413.5 816.601 413.7 817.401 413.4C818.101 413.1 819.501 413.6 820.401 414.5C821.301 415.4 822.001 415.8 822.001 415.3C822.001 414.9 822.401 415.1 822.901 415.9C823.401 416.7 825.901 417.3 829.101 417.4C835.601 417.6 843.001 419.8 844.801 421.9C845.401 422.7 846.001 423.1 846.001 422.7C846.001 421.3 851.701 428.5 852.401 430.7C853.001 432.4 853.901 433 856.101 433C858.301 433 859.001 433.5 859.001 434.9C859.001 436.3 858.501 436.7 857.001 436.3C855.401 435.9 855.101 436.1 855.601 437.4C856.401 439.6 855.201 444.2 854.001 443.5C853.401 443.2 853.001 443.6 853.001 444.5C853.001 445.4 853.501 445.8 854.001 445.5C854.601 445.2 855.001 445.8 855.001 447C855.001 448.2 855.501 448.8 856.001 448.5C856.601 448.2 857.001 448.4 857.001 449.1C857.001 449.8 857.301 450 857.701 449.7C858.001 449.3 858.901 449.9 859.701 451C860.701 452.4 862.301 453 864.601 453C867.001 453 867.901 453.4 867.401 454.2C866.901 455 867.201 455.1 868.301 454.7C869.301 454.3 870.001 454.6 870.001 455.2C870.001 455.8 870.301 456.1 870.601 455.7C870.901 455.4 872.301 455.5 873.701 456.1C875.501 456.7 875.901 456.7 875.401 455.8C874.901 455 875.201 454.9 876.301 455.3C877.301 455.7 878.001 455.5 878.001 454.8C878.001 454.1 879.401 453.9 882.001 454.3C884.501 454.6 885.801 454.4 885.401 453.8C885.001 453.2 887.201 452.9 891.401 453.2C895.001 453.3 898.001 453.2 898.001 452.8C898.001 452.4 898.701 452.4 899.701 452.7C900.901 453.2 901.101 453 900.501 452C899.901 451 900.201 450.8 901.801 451.2C903.101 451.6 904.101 451.2 904.501 450.2C904.801 449.4 905.301 449 905.601 449.3C906.901 450.6 909.401 446.6 909.101 443.8C909.001 442.2 909.401 440.2 910.101 439.3C911.201 438.1 911.201 437.6 909.901 436.6C908.301 435.4 908.501 433 910.401 431.7C911.201 431.2 911.001 430.7 910.001 430.1C909.201 429.5 908.901 428.8 909.201 428.4C909.601 428 909.401 426.8 908.901 425.7C908.001 424.1 908.101 423.5 909.301 422.8C910.201 422.3 910.701 421.3 910.401 420.6C910.101 419.8 910.801 418.3 912.001 417.2C913.901 415.4 914.001 415.1 912.501 413.6C911.001 412.1 911.001 411.9 912.401 410.4C914.701 408.1 914.301 406.5 911.501 406.5C910.101 406.5 909.001 406.9 909.001 407.3C909.001 407.8 908.601 407.8 908.001 407.5C907.401 407.2 907.301 407.6 907.601 408.5C908.001 409.5 907.801 410 906.901 409.8C906.101 409.6 905.601 410.1 905.801 410.8C905.901 411.6 905.601 411.9 905.101 411.6C903.901 410.8 900.901 412 901.501 413C901.801 413.4 900.401 413.4 898.501 413C896.601 412.6 894.901 412.4 894.701 412.7C894.401 412.9 894.001 412.4 893.601 411.5C893.301 410.6 893.401 410.2 894.001 410.5C894.601 410.8 894.701 410.4 894.401 409.6C894.101 408.7 893.301 408.3 892.701 408.7C892.001 409.1 891.901 408.7 892.301 407.6C893.001 405.7 890.801 401.6 889.701 402.7C889.301 403 889.001 402.9 889.001 402.4C889.001 401.9 889.801 400.7 890.801 399.9C892.501 398.4 892.801 398.4 893.801 399.9C894.701 401.2 894.901 401.2 894.701 400C894.601 399.2 895.101 398.6 895.901 398.5C896.701 398.5 897.501 397.9 897.801 397.2C898.001 396.5 897.601 396.2 896.601 396.6C895.701 396.9 895.001 396.7 895.001 396C895.001 395.4 894.601 395.2 894.001 395.5C893.501 395.8 893.001 395.8 893.001 395.3C893.001 394.9 891.901 393.2 890.501 391.6C889.101 390 888.001 389.2 888.001 389.9C888.001 390.8 887.501 390.8 886.001 390C884.901 389.4 883.401 389.2 882.801 389.6C882.101 390 882.001 389.9 882.401 389.2C883.301 387.7 883.001 387.7 878.701 389.5C875.101 391 872.001 390.7 872.001 388.8C872.001 388.3 871.601 388.2 871.001 388.5C870.401 388.9 870.301 388.4 870.701 387.4C871.101 386.2 871.001 385.9 870.201 386.4C869.501 386.8 869.001 386.7 869.001 386.2C869.001 384.9 861.801 384.9 860.001 386.2C858.801 387 858.801 387.1 860.301 386.6C861.301 386.3 861.801 386.4 861.501 387C861.201 387.5 858.701 387.6 855.801 387.3C852.101 386.9 850.901 387 851.401 387.8C851.801 388.5 851.601 388.8 850.701 388.4C850.001 388.2 848.101 388.4 846.601 389C845.101 389.5 844.101 389.6 844.501 389.1C845.301 387.7 841.801 387.2 839.701 388.4C838.301 389.3 837.601 389.1 836.601 387.8C835.901 386.9 834.501 386.3 833.401 386.5C827.601 387.7 824.601 387.9 825.801 387.1C826.901 386.4 826.901 386.2 825.801 385.8C825.001 385.5 823.601 385.8 822.701 386.5Z",
+p1d49a200: "M262 272.1L258.5 275.1L262.3 272.5C265.6 270.1 266.6 269 265.7 269C265.6 269 263.9 270.4 262 272.1Z",
+p1ee76e10: "M766.101 277.2C765.601 278.5 765.601 280.5 766.101 281.6C766.501 282.8 766.701 284 766.501 284.2C766.301 284.4 766.901 284.6 767.901 284.6C769.901 284.6 770.201 281.2 768.201 279.1C767.501 278.4 767.101 277.1 767.401 276.4C767.701 275.6 767.701 275 767.401 275C767.201 275 766.601 276 766.101 277.2Z",
+p1ff45600: "M328.301 278.1C327.101 278.5 325.601 279.8 325.001 280.9C323.901 283.1 321.001 283.8 321.001 281.9C321.001 281.1 320.601 281 319.701 281.9C318.901 282.5 318.001 282.7 317.701 282.3C317.301 282 317.001 282.1 317.001 282.7C317.001 284.4 313.901 285.2 312.301 283.9C311.601 283.2 310.701 283 310.301 283.3C310.001 283.7 309.101 283.5 308.301 282.8C307.501 282.2 307.001 282.1 307.101 282.6C307.401 284.6 306.901 286.1 306.101 285.5C305.601 285.2 304.901 285.4 304.501 285.9C304.201 286.5 303.301 286.7 302.601 286.4C301.801 286.1 300.901 286.4 300.501 286.9C300.201 287.5 299.401 287.7 298.801 287.4C298.201 287 298.001 287.2 298.301 287.7C298.901 288.7 296.801 290.2 294.501 290.4C294.001 290.5 293.601 291.5 293.801 292.8C294.001 294 293.601 295 293.001 295C292.401 295 292.201 295.4 292.501 296C292.801 296.5 292.601 297 292.001 297C291.401 297 291.101 297.4 291.501 297.9C291.801 298.4 290.801 299 289.301 299.2C287.901 299.4 286.401 300.2 286.201 301C285.901 301.8 286.001 302.2 286.401 301.9C287.501 300.9 293.301 306.7 292.601 307.9C292.201 308.5 292.401 309 293.001 309C293.601 309 293.801 309.4 293.501 310C293.201 310.5 293.401 311 294.101 311C294.801 311 294.501 311.7 293.401 312.6C292.401 313.4 292.101 313.9 292.701 313.5C293.601 313.1 293.801 313.4 293.401 314.4C293.101 315.3 292.401 316 291.901 316C291.501 316 291.401 316.7 291.701 317.7C292.101 318.7 291.901 319.1 291.301 318.7C289.601 317.6 288.101 320.3 288.301 324.2C288.501 327.4 288.901 327.9 291.401 328.4C294.101 329 294.201 329.1 292.701 330.8C291.701 331.9 291.401 333.5 291.701 335.2C292.201 337.9 293.801 338.5 299.801 338.3C300.501 338.2 300.901 338.5 300.601 338.8C299.901 339.4 303.901 342.4 306.001 342.7C306.801 342.8 308.001 343.6 308.601 344.4C309.201 345.3 310.001 345.7 310.301 345.3C310.701 345 311.901 345.9 313.001 347.3C314.201 348.8 315.701 349.7 316.501 349.3C317.301 349 318.001 349.2 318.001 349.6C318.001 350.1 321.501 350.5 325.701 350.5C330.901 350.5 333.501 350.9 333.801 351.8C334.001 352.4 334.601 352.8 335.101 352.4C335.601 352.1 336.001 352.4 336.001 353C336.001 353.6 336.501 353.8 337.001 353.5C337.601 353.2 338.001 353.3 338.001 353.9C338.001 354.4 339.201 356.1 340.601 357.7C342.301 359.5 343.001 361.2 342.701 362.7C342.501 364 342.901 365.5 343.601 366.1C344.401 366.7 345.001 368.2 345.101 369.4C345.101 371.5 345.201 371.5 346.101 369.5C346.801 367.9 346.901 368.2 346.501 370.7C346.001 374.1 346.701 377.3 347.901 376.6C348.201 376.4 348.601 377.3 348.701 378.7C348.701 380.1 350.101 382.4 351.601 383.9L354.401 386.5L352.001 383.5L349.501 380.5L352.301 383C353.801 384.3 354.801 386 354.601 386.6C354.301 387.3 354.501 388 355.001 388.2C355.501 388.4 356.101 390.2 356.301 392.3C356.501 394.5 357.501 396.6 358.601 397.4C359.601 398.2 360.501 399.2 360.501 399.7C360.601 401.6 363.601 405 365.201 405C366.101 405 367.201 405.9 367.501 407C367.901 408.1 368.501 408.8 369.001 408.5C369.501 408.2 370.201 408.5 370.601 409.1C371.001 409.8 370.901 410 370.301 409.7C369.701 409.3 369.001 409.7 368.601 410.5C368.301 411.3 368.501 412.2 369.001 412.5C369.501 412.8 369.601 413.8 369.301 414.6C368.901 415.7 369.301 416.1 370.601 415.8C371.701 415.6 372.501 416.1 372.601 417C372.801 419.5 374.201 422 375.101 421.4C375.601 421.1 376.301 421.6 376.601 422.4C377.001 423.4 378.501 424 380.901 424.1C384.101 424.2 384.301 424.3 382.001 425C379.501 425.8 379.501 425.8 381.801 425.9C383.101 426 385.001 426.5 386.101 427C387.601 427.9 388.001 427.7 388.001 426.5C388.001 425.6 388.601 424.7 389.401 424.4C390.201 424.1 391.101 423.1 391.501 422.2C391.801 421.3 391.801 420.9 391.401 421.2C391.101 421.6 390.101 421.3 389.301 420.5C388.201 419.4 388.101 418.6 389.101 416.9C389.801 415.4 389.901 415 389.101 415.4C388.501 415.8 388.001 415.7 388.001 415.2C388.001 414.6 388.701 414 389.501 413.6C390.301 413.3 391.001 412.5 391.001 411.8C391.001 410.9 390.701 411 390.001 412C389.301 413.1 389.001 413.1 389.001 412.2C389.001 411.4 388.101 411 386.901 411.2C385.301 411.4 384.601 410.9 384.401 409.3C384.201 408.1 384.401 406.9 384.901 406.5C385.401 406.2 385.601 405.1 385.301 404C385.001 402.9 385.301 401.4 385.901 400.7C386.701 399.7 386.601 399.3 385.501 399.3C384.701 399.3 384.301 399.7 384.601 400.2C385.501 401.7 384.001 401 381.901 399.1C379.301 396.7 380.301 394.6 383.701 395.3C385.901 395.7 386.001 395.5 385.501 392.9C385.101 391 385.201 390 386.001 390C386.601 390 386.801 389.5 386.501 389C385.901 388.1 386.401 387.9 389.801 387.6C390.501 387.5 391.701 386.2 392.501 384.7C393.301 383.2 393.501 382.2 393.001 382.5C391.901 383.2 388.801 380.6 389.501 379.6C389.801 379.3 389.701 379.2 389.301 379.5C388.501 380.1 386.001 378.1 386.001 376.8C386.001 376.2 388.001 376 390.501 376.2C393.001 376.4 395.001 376.1 395.001 375.7C395.001 375.2 395.401 375.2 396.001 375.5C396.601 375.8 396.701 375.4 396.401 374.6C396.101 373.7 396.201 373 396.801 373C397.301 373 397.501 372 397.301 370.7C397.101 369.5 397.601 367.6 398.701 366.5C399.701 365.4 400.401 363.4 400.201 362.1C399.901 360.6 400.501 359.1 401.601 358.3C402.701 357.5 402.901 357 402.101 357C401.301 357 401.001 356.4 401.401 355.5C401.701 354.7 401.501 354 401.101 354C399.001 354 399.001 350.4 401.001 348.8C402.201 347.8 402.901 347 402.501 347C402.101 347 402.301 346.3 403.001 345.5C403.701 344.6 404.901 344.1 405.701 344.4C406.401 344.7 407.001 344.3 407.001 343.5C407.001 342.7 407.301 342.1 407.801 342.1C409.901 342.5 411.001 341.9 410.401 340.8C409.901 340 410.201 339.9 411.301 340.3C412.301 340.6 413.001 340.5 413.001 340C413.001 339.4 413.501 339.1 414.201 339.3C415.001 339.4 415.301 338.4 415.101 336.1C415.001 334.3 415.201 333 415.701 333.3C416.101 333.6 416.501 330.5 416.501 326.5C416.501 322.3 416.101 319.4 415.601 319.8C415.101 320.1 414.901 319.6 415.301 318.7C415.601 317.7 415.501 317 415.001 317C413.501 317 413.801 315.6 415.801 313.4C416.801 312.3 417.501 310.9 417.201 310.2C417.001 309.6 417.301 309 417.901 309C418.501 309 418.901 308.7 418.801 308.2C418.501 307.3 421.501 302.9 422.101 303.4C422.301 303.6 422.501 302.6 422.501 301C422.501 299.5 422.101 298.4 421.601 298.8C421.101 299.1 420.901 298.6 421.301 297.7C421.601 296.7 421.501 296 420.901 296C420.301 296 420.101 295.6 420.501 295.1C420.801 294.5 419.201 294.3 416.501 294.5C413.501 294.7 412.201 294.5 412.601 293.8C413.001 293.2 412.501 293 411.001 293.5C409.801 293.9 409.001 293.8 409.301 293.4C409.601 292.9 406.501 292.4 402.401 292.3C398.301 292.2 395.001 292.5 395.001 293.1C395.001 294.5 393.001 294.2 391.201 292.4C390.201 291.3 389.501 291.1 389.201 291.9C389.001 292.5 388.401 293 387.901 293C387.301 293 387.201 292.5 387.501 292C388.501 290.4 383.001 290.8 381.401 292.4C380.201 293.7 379.501 293.7 376.801 292.5C375.001 291.8 373.401 290.6 373.101 289.8C372.901 289.1 371.601 287.6 370.301 286.5C369.101 285.4 368.001 283.9 368.001 283.3C368.001 282.7 367.101 282.4 366.001 282.7C364.901 283 364.001 282.8 364.001 282.4C364.001 281.1 356.701 280.9 355.901 282.2C355.001 283.6 346.001 284.3 346.001 282.9C346.001 282.3 345.601 282.2 345.001 282.5C344.501 282.8 344.001 282.6 344.001 282.1C344.001 281.5 342.401 281 340.501 281C338.601 281 337.001 280.5 337.001 279.9C337.001 279.3 336.101 279 335.001 279.3C333.901 279.6 332.401 279.3 331.701 278.6C330.901 277.8 329.701 277.6 328.301 278.1ZM306.001 289.4C306.001 290.2 305.201 290.8 304.101 290.7C303.001 290.7 302.401 290.1 302.701 289.3C303.401 287.5 306.001 287.6 306.001 289.4ZM336.301 345.5C337.001 347.3 335.701 348.2 333.601 347.4C332.401 346.9 332.301 346.5 333.301 345.4C334.901 343.7 335.701 343.7 336.301 345.5Z",
+p2377de00: "M662 309C661.2 309.5 660.1 309.6 659.5 309.3C659 308.9 658.8 309 659.1 309.4C659.5 309.8 658.7 311.3 657.4 312.7C655.7 314.5 654.3 315.1 652.5 314.8C651.1 314.5 650 314.7 650 315.2C650 315.8 649.4 316 648.7 315.7C647.8 315.4 647.5 316.1 647.8 318.5C648.1 321 647.6 322.3 645.6 324.3C643.7 326.3 643 327.9 643 331C643 334.5 643.3 335 645.3 335.1C647.4 335.1 647.4 335.2 645.5 336C643.7 336.8 643.7 336.9 646.1 336.9C647.5 337 649.5 336.3 650.6 335.4C651.6 334.6 651.9 334.2 651.2 334.5C649.3 335.5 651.5 331.4 653.4 330.3C654.8 329.5 655 329.1 655 327.1C655 326.6 656.5 324.7 658.3 322.9C660 321.1 660.9 319.9 660.3 320.4C659.4 320.9 659.2 320.6 659.6 319.6C659.9 318.7 660.5 318.2 661 318.5C661.4 318.7 661.5 317.8 661.2 316.3C660.9 314.5 661.1 313.9 661.9 314.4C663.2 315.3 664.3 313 663.8 310.1C663.6 308.6 663.1 308.3 662 309Z",
+p257393c0: "M275 135.9C275 136.6 274.6 136.8 274 136.5C273.5 136.2 273 136.4 273 137C273 137.6 272.6 137.8 272 137.5C271.5 137.2 271 137.4 271 138C271 138.6 270.6 138.8 270 138.5C269.5 138.2 269 138.4 269 138.9C269 139.5 268.3 140 267.4 140C266 140 266 140.3 267 141.5C268.1 142.8 268.4 142.8 269.7 141.3C270.6 140.2 270.9 140.1 270.4 141C270.1 141.8 271.2 141.1 273.1 139.3C274.9 137.5 276.1 135.7 275.7 135.4C275.3 135 275 135.2 275 135.9Z",
+p25f81000: "M931.2 279.4C931.9 280.2 932.8 280.6 933.3 280.3C933.7 280.1 934 280.3 934 280.9C934 281.5 934.7 281.7 935.5 281.3C936.7 280.9 936.5 280.4 934.4 279.4C931 277.6 929.6 277.6 931.2 279.4Z",
+p26986180: "M923.501 280.4C924.701 281.2 925.101 282.4 924.701 283.9C924.101 286.2 925.401 286.7 927.401 284.8C928.501 283.7 928.501 283.3 927.101 282.2C925.901 281.2 925.901 281.1 927.001 281.6C928.301 282.3 928.301 282.1 927.101 280.7C926.401 279.8 924.801 279 923.701 279C921.701 279 921.701 279.1 923.501 280.4Z",
+p276b4c32: "M836.3 350C836.9 351 837.7 351.7 838 351.5C838.4 351.2 839.6 352 840.8 353C843.6 355.7 844.2 355.5 842.8 352.5C841.8 350.3 839.8 349 836.3 348.4C835.4 348.2 835.4 348.6 836.3 350Z",
+p27a94080: "M921.4 486.9C921.7 487.3 920.8 488.2 919.4 488.9C916.1 490.3 914.7 490.3 915.5 488.7C915.9 488.1 915.6 488.2 914.8 489C914.1 489.8 912.4 490.7 911 490.8C906 491.5 907.7 492.2 913.7 491.8C917 491.7 919.6 491.8 919.4 492.1C918.8 493.1 922 494.1 923.2 493.4C923.9 492.9 923.6 492.2 922.5 491.3C920.9 490.2 920.9 490 922.2 490C923.3 490 923.7 489.4 923.3 488C923 486.9 922.3 486 921.8 486C921.3 486 921.1 486.4 921.4 486.9Z",
+p27d46c00: "M299.6 265.1C299.9 265.6 299.4 266 298.6 266C297.7 266 297.3 266.6 297.6 267.3C298.3 269.1 301 269 301 267.2C301 266.4 301.6 266 302.5 266.4C303.3 266.7 304 266.6 304 266.1C304 265.6 302.9 265 301.5 264.8C300.2 264.5 299.3 264.7 299.6 265.1Z",
+p2829f080: "M901 366.6C901.1 368 903.4 370.5 904.8 370.7C905.4 370.9 906 370.1 906 369C906 367.9 905.6 367 905.1 367C904.6 367 903.5 366.7 902.6 366.4C901.7 366.1 901 366.2 901 366.6Z",
+p28324000: "M272 268.3C272 268.8 271.1 269 270 268.7C268.9 268.4 268.2 268.6 268.5 269C268.8 269.5 268.4 270.1 267.8 270.4C267.1 270.7 267.9 270.7 269.5 270.3C271.2 270 272.9 269.3 273.5 268.9C274.8 267.6 277.8 267.8 278.2 269.2C278.5 270 279.1 270 280.5 269.3C282.3 268.3 282.2 268.2 280.3 267.6C277.5 266.7 272 267.2 272 268.3Z",
+p28edb500: "M393 423.9C393.1 426.9 399.5 428.8 402.4 426.7C404 425.5 403.8 425.4 400.5 425.8C397.9 426.1 396.9 425.9 397.4 425.1C397.9 424.4 397.5 424.2 396.4 424.7C395.4 425.1 394.9 424.9 395.3 424.3C395.6 423.8 395.3 423.3 394.5 423.3C393.7 423.3 393 423.6 393 423.9Z",
+p2a04f000: "M367.4 93.6C368.1 95.3 366.8 95.4 365.2 93.8C364.3 92.9 364 92.9 364 93.9C364 94.7 363.3 95 362 94.7C360.9 94.4 360 94.7 360 95.2C360 95.8 358.8 96 357 95.6C355.1 95.3 354 95.5 354 96.1C354 96.7 353.3 97 352.5 96.6C351.7 96.3 351 96.5 351 97C351 97.5 350.4 97.7 349.6 97.4C348.9 97.1 347.6 97.6 346.7 98.4C345.8 99.4 344.4 99.7 343.4 99.3C342.2 98.8 341.9 99 342.5 99.9C343.1 100.9 342.7 101 341 100.5C339.4 100 339 100.1 339.5 100.9C340 101.7 339.4 101.9 337.4 101.4C335.5 100.9 334.9 101 335.4 101.9C335.8 102.6 335.4 102.9 334.3 102.8C330.8 102.5 328.9 103 329.5 104C329.8 104.6 329.4 104.7 328.5 104.4C327.7 104 326.4 104.3 325.6 104.9C324.9 105.5 324 105.7 323.7 105.3C323.3 105 323 105.2 323 105.9C323 106.5 322.2 107 321.3 106.8C319.9 106.6 319.6 107.1 319.8 108.7C320.1 110.5 319.6 111 318 111C316.8 111 315 110.5 313.9 110C312.9 109.4 312 109.3 312 109.8C312 111.1 307 113.1 305.8 112.4C305.1 111.9 305 112.2 305.5 113C306.1 114 305.9 114.2 304.6 113.7C303.5 113.2 303.1 113.4 303.6 114.2C304.1 114.9 303.8 115.1 302.7 114.7C301.6 114.3 301.3 114.5 301.7 115.6C302.1 116.7 303 117 304.4 116.5C305.5 116.2 307 115.8 307.5 115.7C308.1 115.5 309.5 114.9 310.7 114.2C311.9 113.5 313.6 113.3 314.4 113.6C315.3 113.9 316 113.7 316 113.1C316 112.5 316.5 112 317 112C318.4 112 318.2 114.8 316.8 115.3C316.1 115.5 315.8 116.1 316.2 116.4C316.5 116.8 318.9 116.3 321.3 115.2C324.2 113.9 326.1 113.5 326.8 114.2C327.4 114.8 328.3 114.6 329.2 113.6C330.1 112.8 331.1 112.4 331.5 112.8C332 113.2 332.1 113 331.7 112.5C331.4 111.9 331.4 111 331.8 110.5C332.9 109 340 105.9 341 106.5C341.5 106.8 342.3 106.3 342.8 105.5C343.3 104.6 344.4 103.8 345.4 103.6C346.4 103.5 347.5 102.8 348 102.1C348.4 101.3 349.3 101.1 350 101.5C350.9 102.1 351.1 101.9 350.5 101C350 100.1 350.3 100 351.9 100.5C353.2 100.9 354 100.7 354 100C354 99.3 354.8 99.1 356.1 99.5C357.7 100 358 99.9 357.5 98.9C356.9 98 357.2 97.8 358.3 98.3C359.3 98.6 360 98.5 360 98C360 97.5 360.7 97.4 361.7 97.7C362.9 98.2 363.1 98 362.5 97C361.9 96.1 362.1 95.8 363.2 96.2C364 96.6 366.4 96 368.6 95.1L372.5 93.3L369.7 92.8C367.6 92.4 367 92.6 367.4 93.6Z",
+p2b41fc80: "M86.9004 273.6C84.6004 276.1 84.6004 276.2 86.7004 275.1C89.0004 273.9 90.5004 272.2 89.8004 271.4C89.5004 271.2 88.3004 272.2 86.9004 273.6Z",
+p2b9cb700: "M826.1 341.9C825.1 342.5 825.2 342.9 826.5 343.4C827.4 343.7 827.9 344.3 827.7 344.7C827.4 345.2 828.5 345.5 830 345.5C832.2 345.5 832.6 345.2 831.7 344.2C830 342.1 827.5 341.1 826.1 341.9Z",
+p2e7355f0: "M323.9 121.7C326.4 122.7 317.5 126.1 314.8 125.1C313.3 124.6 311.4 124.8 309.5 125.5C307.9 126.2 305.9 126.5 305.1 126.2C304.2 125.9 303.9 126.1 304.3 126.7C304.7 127.3 304.3 128.6 303.4 129.4C302.6 130.3 302.1 131 302.5 131C302.9 131 302.4 131.7 301.5 132.6C299.4 134.8 298.4 133.6 299.8 130.5C300.5 129 300.6 128 300 128C299.4 128 299 128.5 299 129.1C299 129.6 298.5 129.8 297.8 129.4C297 128.9 296.9 129.2 297.3 130.4C297.7 131.4 297.6 131.9 297 131.5C296.5 131.2 294.9 132 293.5 133.4C292.1 134.8 291 135.5 291 134.9C291 134.3 290.6 134.2 290 134.5C288.4 135.5 291.3 137.8 293.7 137.4C294.9 137.2 296.1 137.4 296.4 137.9C297.1 138.9 291.2 145 289.6 145C289 145 289.2 144.5 290 143.9C291 143.2 291.1 143 290.2 143.2C289.4 143.4 288.9 143.9 288.9 144.3C289 144.7 289 145.8 289 146.7C289 148.2 289.2 148.3 290 147C290.6 146 291 145.9 291 146.7C291 147.4 291.5 148 292.1 148C292.6 148 292.9 147.6 292.6 147.2C292.4 146.8 292.4 146 292.8 145.5C293.9 144 300 140.8 300 141.7C300.1 142.1 300.8 141.1 301.8 139.5C303.4 136.5 303.6 135.9 303.9 133.9C303.9 133.2 305.1 133 306.5 133.2C307.9 133.5 309 133.3 309 132.8C309 132.4 310.1 132.2 311.4 132.4C313.2 132.7 313.7 132.5 313.4 131.5C313.1 130.7 313.8 129.9 315.1 129.5C316.9 128.9 317.9 129.4 319.6 131.4C321.8 133.9 323.7 135 322.5 133C322.2 132.4 322.4 132 323 132C323.6 132 323.8 131.6 323.5 131C323.2 130.4 323.6 130.3 324.5 130.6C326.8 131.5 326 135.2 323.1 137.2C321.7 138.1 320.3 138.7 319.9 138.4C318.9 137.8 317.9 141 318.7 142.3C319.1 143 318.6 142.9 317.7 142.1C316.7 141.3 316 141.2 316 141.8C316 142.9 319.1 144.2 322.2 144.5C323.1 144.6 323.7 144.3 323.4 143.8C323.1 143.4 325 143 327.7 142.9C331.3 142.9 332 142.6 330.5 142C329 141.3 329.6 141.1 333.1 141.1C336.4 141 338.2 140.4 339.5 139C341.3 137.1 341.2 137 339.2 137C337.9 137 337 136.4 337 135.5C337 134.7 336.5 134 335.9 134C335.3 134 335.5 133.3 336.4 132.5C338.1 130.7 340 130.5 340 132.2C340 132.8 340.3 133 340.6 132.7C341 132.4 342.1 132.5 343.1 133.1C344.4 133.8 345 133.7 345 133C345 132.4 345.5 132.2 346 132.5C346.6 132.8 347.3 132.4 347.6 131.6C347.9 130.7 348.8 130 349.6 130C350.4 130 351 129.6 351 129.1C351 128.5 348.9 128 346.3 127.8C342.5 127.6 341.5 127.1 341.6 125.8C341.7 124.7 341.2 124.4 340.2 124.7C339.3 125.1 338.9 124.9 339.3 124.3C339.8 123.6 339.2 123.4 337.8 123.7C335.9 124.1 335.8 124 337 123.1C338.2 122.2 338 122 335.7 122C334.1 122 333.1 122.4 333.5 123C334.3 124.2 332.7 124.3 331.5 123.1C330.9 122.6 328.7 122 326.5 121.7C324.3 121.3 323.1 121.3 323.9 121.7ZM331.2 133.2C332 135.3 331 137 328.9 137C327.9 137 327 136.3 327 135.5C327 134.7 327.7 134 328.6 134C329.4 134 329.8 133.5 329.5 133C329.2 132.4 329.3 132 329.8 132C330.4 132 331 132.6 331.2 133.2Z",
+p2fb199f0: "M874.401 147.1C874.501 147.8 875.801 148.4 877.301 148.6C879.001 148.8 879.801 148.5 879.401 147.8C879.101 147.3 877.901 147 876.901 147.3C875.901 147.6 874.901 147.4 874.601 146.9C874.401 146.4 874.301 146.5 874.401 147.1Z",
+p30248b40: "M286.3 151.5C284.7 152.6 282.5 154.3 281.5 155.3C279.8 157.1 279.8 157.1 281.5 156.8C282.5 156.6 284.5 155.5 285.8 154.3C287.1 153 288.6 152.3 289 152.5C289.5 152.8 290.1 152.4 290.3 151.8C290.7 150.8 291.1 150.9 291.9 152C292.5 152.9 293 153 293 152.3C293 151.7 293.8 151 294.8 150.8C295.7 150.5 294.9 150.2 292.9 149.9C290.3 149.6 288.4 150 286.3 151.5Z",
+p32aed480: "M295 123C293.1 123.4 292.1 123.8 292.8 123.9C293.4 123.9 294.2 123.9 294.3 123.7C294.5 123.6 295.4 124.1 296.3 124.9C297.8 126.1 298 126 298 124.6C298 123.2 298.4 123.1 300 124C301.6 124.9 302 124.8 302 123.5C302 121.9 300.7 121.8 295 123Z",
+p33c9b880: "M410.201 414.7C409.001 414.9 408.201 415.6 408.501 416.1C408.901 416.6 409.801 416.6 410.901 416C411.901 415.5 413.001 415.4 413.401 415.7C413.701 416 414.001 415.8 414.001 415.2C414.001 414.5 413.701 414.1 413.301 414.1C412.801 414.2 411.501 414.5 410.201 414.7Z",
+p342268f2: "M548.901 162.4C549.801 163.4 549.701 163.9 548.501 164.4C546.501 165.1 546.601 166.7 548.801 167.2C550.501 167.7 550.701 167 550.101 161.7C550.001 161.3 549.501 161 548.901 161C548.101 161 548.101 161.4 548.901 162.4Z",
+p34e60000: "M276 131C274.8 131.8 275 131.9 276.7 131.7C277.9 131.5 279.3 131.1 279.6 130.7C280.7 129.6 277.7 129.9 276 131Z",
+p381e6500: "M809 303.3C809 303.8 809.9 305.5 811.1 307.1C812.2 308.7 812.9 310 812.5 310C812.2 310 812.7 311.1 813.6 312.5C814.4 313.8 814.9 315.3 814.6 315.9C814.3 316.4 814.4 317 814.9 317.2C815.4 317.3 816 318.2 816.2 319C816.4 319.8 817 320.9 817.7 321.5C818.4 322 819 324.6 819.1 327.2C819.3 330.1 819.9 332.1 820.7 332.5C821.5 332.7 821.9 333.4 821.6 333.9C821.3 334.4 821.7 335 822.5 335.4C823.3 335.7 824 336.6 824 337.5C824 339.7 825.8 339.4 828.6 336.7C831.5 334 831.8 331.6 829.1 332.5C827.6 333 827.3 332.6 827.6 330.3C828 328 827.9 327.8 827.1 329.5L826.3 331.5L825.8 329.5C825.6 328.4 825.7 326.5 826.2 325.2C826.6 323.9 826.6 323.1 826.1 323.4C825.6 323.7 824.9 323.3 824.6 322.4C824.2 321.4 824.4 321.1 825.3 321.6C825.9 322 824.9 320.8 823 319.1C821.1 317.3 820.2 316.2 821 316.5C821.8 316.9 821.4 316.2 820.2 315.1C818.9 314 817.7 312.4 817.6 311.6C817.4 310 812 304.2 812 305.6C812 306 811.3 305.5 810.5 304.4C809.7 303.4 809 302.9 809 303.3Z",
+p38ed0800: "M950.601 274.7C950.201 275.6 950.501 276.7 951.201 277.2C952.201 277.8 952.101 278 950.801 278C949.901 278 948.801 278.5 948.401 279.2C947.901 279.9 948.201 280.1 949.101 279.6C949.901 279.2 949.401 279.7 948.001 280.9L945.501 282.9L943.801 280.7C942.301 278.8 942.001 278.8 942.001 280.2C942.001 281.4 941.201 282 939.501 282C936.601 282 936.601 282 938.401 285.4C939.601 287.8 939.901 287.9 941.301 286.5C943.201 284.6 944.001 284.6 944.001 286.4C944.001 287.2 944.501 288.2 945.201 288.6C945.901 289.1 946.001 288.9 945.501 287.9C944.901 286.9 945.201 287 946.601 288.1C947.601 289 949.001 289.5 949.701 289.3C950.301 289.1 951.101 289.4 951.501 289.9C951.801 290.5 952.601 291 953.101 291C954.101 291 953.701 286 952.601 284.1C952.201 283.6 952.801 282.9 953.901 282.5C955.001 282.2 955.701 281.2 955.501 280.2C955.301 279.3 955.101 278.1 955.101 277.7C955.001 277.2 954.601 277.2 954.001 277.5C953.101 278 952.501 276 952.901 273.7C953.101 272.3 951.201 273 950.601 274.7Z",
+p39749580: "M506.1 124.9C505.5 125.8 505.2 125.9 505.6 125.1C506.1 124.2 505.9 123.9 505.2 124.4C504.5 124.8 504 125.9 504 127C504 128.4 504.5 128.7 506.2 128.2C507.8 127.8 508.1 128 507.5 129C506.9 130 507.4 130.2 510.1 129.7C512 129.4 512.9 129.4 512.3 129.6C511.4 130 511.3 130.7 512 132.1C512.8 133.4 512.7 134 512 134C511.4 134 511.2 134.4 511.5 135C511.8 135.5 511.4 136 510.5 136C509.5 136 509 136.7 509.2 137.7C509.4 138.7 508.9 140.1 508 140.8C506.7 142 506.7 142.1 508.3 141.6C509.3 141.3 511.6 140.9 513.3 140.9L516.5 140.8L513.5 139.9C511.2 139.3 511.9 139.2 516 139.5C520.1 139.8 521.1 139.7 520 138.9C518.8 138 518.9 137.9 520.7 138.3C521.9 138.6 523.4 138.2 524.1 137.4C525 136.3 524.9 136 523.6 136C522.7 136 522 135.3 522 134.4C522 133.6 521.6 133.2 521 133.5C520.5 133.8 520 133.7 520 133.1C520 132.6 518.6 132.2 517 132.2C515.3 132.3 513.6 131.9 513.2 131.5C512.8 131.1 513.5 131 514.8 131.3C517.3 131.9 517.5 131.5 515.8 129.4C511.1 123.8 508 122.3 506.1 124.9Z",
+p3c3d9a00: "M1081 363C1081 526.476 847.069 659 558.5 659C269.931 659 36 526.476 36 363C36 199.524 269.931 67 558.5 67C847.069 67 1064 197 1081 363Z",
+p3cb03700: "M463.5 77.1C465.4 77.6 463.4 77.8 458.3 77.5C453.3 77.2 449.8 77.5 449.4 78.1C449.1 78.7 447.5 78.8 445.8 78.5C443.7 78 443 78.1 443.4 78.9C443.9 79.6 443.1 79.8 440.9 79.3C438.7 78.9 437.9 79 438.4 79.8C438.8 80.5 437.9 80.7 435.5 80.3C433.2 79.9 432 80.1 432 80.9C432 81.5 431.5 82 430.9 82C430.4 82 430.1 81.6 430.4 81.1C430.7 80.6 429.1 80.7 426.7 81.2C424.4 81.8 421.7 82.2 420.8 82.2C419.9 82.2 418.9 82.8 418.6 83.7C418.2 84.6 417.3 85 416.4 84.6C415.5 84.3 413.3 84.7 411.5 85.6C409.6 86.5 405.6 87.2 402.6 87.3C399.5 87.4 397 87.9 397 88.4C397 88.8 396.1 89 395 88.7C393.9 88.4 393 88.6 393 89.2C393 89.8 392.1 90 391 89.7C389.9 89.4 389.2 89.6 389.6 90.1C389.9 90.6 389.6 91 389.1 91C388.5 91 388 90.4 388 89.7C387.9 89.1 387.1 89.6 386 90.9C384.9 92.2 382.9 93.3 381.6 93.4C380.3 93.4 379.4 93.9 379.7 94.4C380.1 94.9 379.1 95 377.6 94.6C376 94.2 375 94.4 375 95.1C375 95.7 374.3 96 373.5 95.6C372.2 95.1 371.6 96.1 371.9 98.2C371.9 98.6 371.2 98.6 370.3 98.3C369.2 97.9 368.9 98 369.4 98.8C370.2 100.1 365.7 101.6 364.1 100.5C363.5 100.2 361.2 100.5 359 101.1C356.1 102 355.3 102.6 356.2 103.2C357.1 103.9 356.6 104 354.7 103.7C353 103.4 352.1 103.7 352.3 104.3C352.8 105.8 358 107.1 358 105.8C358 105.2 358.7 105 359.5 105.4C360.3 105.7 361 105.5 361 104.9C361 104.2 362 104 363.6 104.4C365.4 104.9 366 104.7 365.4 103.9C364.9 103.1 365.5 102.9 367.3 103.2C368.9 103.5 369.7 103.3 369.3 102.7C368.9 102.1 370.2 101.9 373.1 102.3C377.8 102.9 380 105 380 108.7C380 110.4 380.6 111 382.1 111C383.2 111 383.8 110.5 383.5 110C383.2 109.4 383.6 109 384.6 109C385.8 109 386.1 109.6 385.7 111.1C385.4 112.3 385.7 113.3 386.5 113.6C387.5 114 387.4 114.6 385.9 116.1C384.8 117.2 383.4 118 382.7 117.7C382.1 117.5 380.9 117.8 380.2 118.4C374.9 122.7 373.6 125 376.6 125C377.5 125 378 125.5 377.8 126.2C377.6 126.8 378.4 128.4 379.5 129.6C382 132.2 387 134.5 387 133C387 132.4 387.7 132 388.6 132C389.4 132 389.9 132.3 389.7 132.7C389.4 133.2 390.6 133.5 392.3 133.5C395.2 133.5 400.4 129.8 401.2 127.2C401.3 126.8 402.3 125.6 403.3 124.5C404.4 123.4 404.9 123.2 404.5 124C403.6 125.5 406.3 123.5 410.6 119.2C411.9 118 413.6 117 414.5 117C415.3 117 416 116.6 416 116.1C416 115.6 416.9 115.4 417.9 115.7C418.9 116 420.9 115.5 422.2 114.6C423.6 113.7 425 113.3 425.5 113.7C425.9 114.2 426 114 425.7 113.4C425 112.2 436.6 106.3 437.6 107.3C438 107.7 438.9 107.5 439.6 106.9C440.4 106.3 441.7 106 442.5 106.4C443.4 106.7 443.8 106.6 443.5 106C442.9 105.1 443.9 104.8 448.8 104.6C449.7 104.5 450.8 104.1 451.1 103.6C451.5 103.1 453.2 102.7 454.9 102.6C457.3 102.5 457.9 102.1 457.4 100.7C457 99.5 457.4 99 458.7 98.9C459.7 98.8 461.6 98.7 463 98.7C464.4 98.6 465.5 98 465.5 97.3C465.5 96.6 466.1 95.5 466.8 94.8C467.4 94.2 468 93 468 92.3C468 91.6 468.5 91 469 91C469.6 91 470 91.5 470 92.2C470 92.8 470.9 92.5 472 91.5C473.1 90.5 474 90.1 474 90.6C474 91.1 474.4 90.9 474.9 90.1C475.5 89.3 475.5 87.7 474.9 86.3C474.2 84.3 474.4 84 476.3 84C477.5 84 478.1 83.6 477.5 83.2C475.3 81.6 475.9 79.7 478.5 80.2C480.3 80.6 481.4 80.2 482 79C483 77.1 481.7 76.8 479.2 78.3C478.5 78.8 477.8 78.6 477.5 77.8C477.1 76.9 474.5 76.5 468.7 76.4C462.9 76.4 461.4 76.6 463.5 77.1Z",
+p3d523500: "M580.6 77.2C580.9 77.6 582.1 78 583.2 78C584.4 78 585 77.7 584.6 77.3C583.6 76.3 580 76.2 580.6 77.2Z",
+p3e02a100: "M587.8 95.6C587.4 95.9 583.9 96.4 579.9 96.6C573 97 569.4 97.9 573.6 98.1C574.8 98.1 574.4 98.5 572.5 99.1C570.5 99.7 569.3 99.6 568.8 98.7C568.2 97.8 568 97.9 568 99C568 100.3 567.9 100.3 567 99C566.2 97.7 566 97.8 566 99.2C566 100.2 565.5 101 564.9 101C564.4 101 564.2 101.5 564.6 102.2C565 102.8 564.9 103 564.3 102.7C563.7 102.3 562.7 102.7 562 103.5C561.3 104.3 560.1 105 559.3 105C558.6 105 557.7 105.6 557.4 106.3C557.2 107 555.8 107.7 554.3 107.8C552.9 107.9 551.2 108.7 550.5 109.6C549.9 110.5 548.5 111 547.4 110.8C546.4 110.6 545 111 544.5 111.7C543.9 112.5 542 113.1 540.3 113.3C537.1 113.5 535.9 114.5 538 115.2C538.5 115.3 539.1 116.7 539.2 118.1C539.4 120 539.9 120.6 540.9 120.2C541.8 119.9 542.1 120.1 541.6 120.8C541.1 121.6 541.8 122 543.7 122C545.9 122 546.2 121.8 545 120.9C543.8 120.1 544.3 120 546.8 120.3C548.5 120.5 550 120.3 550 119.8C550 119.4 551.1 119 552.5 119C553.9 119 555 119.5 555 120.1C555 120.6 555.5 120.8 556 120.5C556.6 120.2 557 120.7 557 121.6C557 122.6 557.3 123 557.6 122.7C558.4 121.9 562.1 126 561.6 126.9C561.3 127.3 562 127.6 563 127.6C564 127.6 564.7 127.3 564.4 126.9C563.9 126 568.8 124.8 570 125.5C570.9 126 571.5 124 571.1 121.7C571.1 121.3 571.7 121 572.6 121C573.4 121 573.8 120.5 573.5 120C573.1 119.3 573.8 119.2 575.6 119.6C578.1 120.2 578.2 120.1 576.9 118.8C576.2 117.9 575 117.4 574.4 117.7C573 118.2 571.8 114.2 573.1 113.4C573.6 113.1 573.7 112.4 573.4 111.8C573 111.1 573.2 111 573.8 111.4C574.5 111.8 575 111.7 575 111.1C575 110.6 576.7 109.6 578.8 108.9C580.8 108.3 583.3 106.9 584.3 105.9C585.4 104.7 587.5 104 590 104C593.6 104 594 104.3 594 106.4C594 108.8 591.7 110.5 589.9 109.4C589.4 109.1 589 109.3 589 109.9C589 110.4 588.2 111.1 587.2 111.4C585.1 112.1 584.7 114.9 586.4 116.5C587 117.1 589.8 117.7 592.5 117.8C596.1 118 597.1 117.8 596 117C594.9 116.3 595.9 116.1 599.5 116.1C604.2 116.3 604.3 116.3 601 117C597.6 117.7 597.6 117.7 602.3 117.9C604.9 117.9 607 118.4 607 119C607 119.5 606.4 120 605.8 120C604.9 120 605 120.4 606 121C607.1 121.7 606.4 122 603.5 122C600.6 122 599.9 121.7 601 121C602.1 120.3 601.4 120 598.3 120C595.1 120 594 120.4 594 121.5C594 122.3 594.5 123 595.2 123C596 123 595.8 123.6 594.7 124.7C593.3 126.2 592.7 126.2 590.5 125C588.6 124 587.7 123.9 586.8 124.8C586 125.6 586.3 125.8 588.1 125.4C590.2 125 590.2 125.1 587.8 126.1C586.3 126.7 585.3 127.7 585.6 128.4C586.4 130.4 581.8 131.9 577.2 131C574.6 130.6 573 130.6 573 131.3C573 131.8 571.9 132 570.5 131.8C569.1 131.5 568 131.7 568 132.3C568 132.8 566.8 133 565.3 132.6C560.6 131.5 557.1 131.4 557.6 132.2C557.9 132.6 557.6 133 557.1 133C556.5 133 556 132.1 556 130.9C556 129.6 556.4 129.1 557.2 129.6C557.9 130 558 129.9 557.6 129.1C557.2 128.5 556.4 128.2 555.9 128.5C555.4 128.9 555 128.6 555 128.1C555 127.5 554.2 127 553.3 127C551.6 126.9 551.6 126.9 553.3 125.9C555.1 124.8 555.6 123 554.1 123C553.6 123 552.5 123.7 551.7 124.5C550.9 125.3 550 125.6 549.7 125.3C548.5 124.2 546 125.9 546.6 127.5C546.9 128.3 547.7 128.7 548.3 128.3C549 127.9 549.1 128.3 548.7 129.4C548.3 130.4 548 131.6 548 132.2C548 132.8 547.3 133 546.5 132.6C545.7 132.3 545 132.5 545 133C545 133.6 543.6 134 542 134C538.2 134 533.5 136.3 532.6 138.6C532.2 139.6 531.3 140 530 139.7C528.7 139.4 528.2 139.6 528.7 140.3C529.1 141 528.7 141.1 527.6 140.7C526.3 140.2 525.9 140.4 526.3 141.4C527 143.1 524.7 144.2 522.3 143.3C521.3 142.9 520.9 143.1 521.3 143.7C521.7 144.3 521.3 145.1 520.4 145.4C518 146.3 517.3 146.1 519 145C519.9 144.4 520 144 519.3 144C518.7 144 517.8 144.4 517.5 145C517.2 145.5 515.4 146 513.7 146.1C511 146.1 510.8 146.3 512.5 147C513.6 147.5 514.1 147.9 513.7 147.9C513.3 148 514.3 149.3 516 151C518.9 153.9 520 155.7 518 154.5C517.4 154.2 517.3 154.6 517.6 155.5C518.5 157.7 515.2 161 512.3 161C510.9 161 510.2 160.6 510.5 160C510.9 159.4 509.6 159 507.3 159C504.4 159 503.9 159.3 505 160.1C506.1 160.8 504.7 161 500 160.8C493.9 160.5 493.5 160.6 493.5 162.7C493.5 163.8 493.8 164.6 494.3 164.3C495.5 163.5 495.1 166.8 493.7 168.2C491.5 170.4 491.2 172.5 492.7 174.5C493.8 175.9 494.4 176.1 494.7 175.2C495.2 173.9 497.8 173.6 500.4 174.6C501.3 174.9 501.8 175.5 501.5 175.9C501.3 176.3 501.7 176.7 502.5 176.7C503.3 176.7 503.6 176.2 503.3 175.7C502.9 175.1 503.6 174.9 504.8 175.2C506 175.6 507 175.4 507 174.9C507 174.4 508.1 174 509.5 174C510.9 174 512.8 173.6 513.8 173.1C514.7 172.6 516.3 171.9 517.3 171.6C518.2 171.3 519 170.1 519 169C519 167.9 519.5 167 520.1 167C520.6 167 520.8 166.5 520.4 165.8C520 165.2 520.1 165 520.7 165.3C521.9 166.1 524.3 163.7 523.4 162.7C523 162.4 524 162.2 525.6 162.3C527.9 162.5 528.6 162 528.8 160.2C529 159 529.6 158.2 530.1 158.5C530.6 158.9 531 158.6 531 158C531 157.3 532.9 157 535.8 157C541.1 157.2 542.5 156.9 545.7 155.2C549.1 153.3 550.2 153.7 555 158C557.5 160.3 560.2 161.9 561 161.7C561.9 161.5 563.1 161.9 563.8 162.7C564.5 163.4 566.2 164 567.6 164C569 164 569.9 164.4 569.6 164.9C569.3 165.4 569.7 166 570.5 166.4C571.9 166.9 572.1 166.3 572 163.2C571.9 162.8 570.8 162.7 569.3 162.8C567.7 163.1 567 162.8 567.4 162.1C567.8 161.5 567.5 161.2 566.7 161.6C565.9 161.9 564.9 161.6 564.4 160.9C563.9 160.1 564.1 159.9 565 160.5C565.9 161 566.1 160.9 565.6 160.1C565.2 159.5 564.4 159.3 563.8 159.6C563 160.1 562.9 159.7 563.3 158.6C563.7 157.6 563.6 157.1 563 157.5C560.3 159.1 557.7 152.5 560.4 150.8C562.3 149.5 564 149.9 564 151.6C564 152.5 564.9 153.4 566 153.7C567.1 154 568 154.6 568 155.1C568 155.6 568.5 156 569 156C569.6 156 571.9 156.9 574.1 157.9C576.2 159 577.8 159.5 577.5 159C577.2 158.6 577.9 158.4 579 158.7C580.1 159 580.8 159.6 580.5 160C580.2 160.4 580.7 161.1 581.6 161.4C582.4 161.7 582.8 162.4 582.5 163C582.2 163.5 582.4 164 583 164C583.6 164 583.9 164.4 583.6 164.9C583.3 165.4 583.7 166 584.5 166.4C585.3 166.7 586 168 586 169.2C586 170.9 586.3 171.1 586.9 170.1C587.9 168.6 590 169.4 590 171.3C590 172 589.6 171.9 589 171C588.5 170.2 588 169.9 588 170.5C588 173.6 591.5 174.8 594.1 172.4C595.1 171.5 596.5 171.1 597.2 171.5C597.9 171.8 597.6 171.5 596.6 170.6C595.6 169.8 594.4 169.3 593.9 169.5C593.5 169.8 592.8 169.5 592.4 168.9C591.9 168.1 592.2 167.9 593.1 168.4C593.9 168.8 593.7 168.5 592.8 167.7C590.3 165.7 590.6 164.9 593.4 166C595.2 166.6 596.2 166.5 597 165.4C598 164.3 598 164 597 164C596.2 164 596 163.7 596.3 163.4C596.7 163 597.6 163.2 598.3 163.9C599.1 164.5 600.9 165.1 602.4 165.2C604.3 165.4 605 166 605 167.6C605 170.6 607 176 608.2 176C608.7 176 608.9 175.6 608.6 175.1C608.3 174.7 609.2 174.5 610.5 174.8C611.9 175 612.7 175.6 612.4 176.1C612.1 176.6 612.6 176.7 613.4 176.4C614.4 176 615 176.3 615 177.1C615 177.9 615.6 177.6 616.4 176.5C617.6 174.8 618.2 174.7 620.4 175.8C621.8 176.4 623 177.4 623 178C623 178.6 623.4 178.9 623.9 178.5C624.5 178.2 627.3 177.7 630.3 177.4C635.4 176.9 635.8 177 636.4 179.2C636.7 180.5 636.9 182.4 636.9 183.5C636.8 184.8 636.5 184.5 636 182.5C635.3 179.6 635.2 179.7 635.1 183.5C635 187.5 632.5 191 629.7 191C628.9 191 629 191.4 630 192.1C631.1 192.9 630.7 193 628.5 192.4C626.9 192 624 191.6 622.2 191.6C620.2 191.6 619.4 191.3 620.2 190.8C621.2 190.2 621.1 190 619.8 190C618.9 190 617.5 190.7 616.6 191.5C615.8 192.3 614.3 193 613.3 192.9C611.7 192.9 611.7 192.8 613.5 192.1C615.1 191.4 614.8 191.2 611.5 190.6C609.3 190.2 605.7 189.8 603.6 189.7C601.4 189.5 599.5 188.9 599.2 188.2C599 187.5 597.1 187 594.9 187C592.5 187 591.1 186.6 591.5 186C592.5 184.4 590.3 184.8 588.6 186.6C587.4 187.8 587 187.8 586.9 186.8C586.9 186.1 586.5 186.5 586 187.7C585.5 189 584.5 190 583.8 190.1C583.1 190.1 581.3 190.3 579.8 190.4C578.4 190.5 577.4 190.1 577.7 189.6C578.1 189.1 576.7 189 574.4 189.4C572 189.8 571 189.7 571.8 189.2C572.9 188.5 572.5 188.1 570.6 187.6C569.2 187.3 568 186.6 568 186.2C568 185.7 566.6 185.6 564.9 185.8C562.5 186.1 561.9 185.9 562.5 185C563.1 184.1 562.5 184 560.3 184.4C558.1 184.9 557.1 184.7 556.7 183.6C556.3 182.7 555.3 182.4 554.2 182.7C551.7 183.3 550.2 181.1 552.2 179.6C553.8 178.4 555.4 173.6 553.9 174.6C553.4 174.9 553 174.8 553 174.3C553 173.9 551.9 173.5 550.5 173.5C549.1 173.5 548 173.9 548 174.3C548 174.8 545.7 175 543 174.8C540.2 174.7 537.8 174.9 537.6 175.5C537.3 176.2 536.9 176.2 536.3 175.5C535.1 174.1 533 173.8 533 175.1C533 175.8 532 176 530.3 175.6C528.9 175.2 527.4 175.3 527.1 175.8C526.8 176.3 523.3 177.7 519.3 178.8C511.6 181.2 504 181.7 504 179.9C504 179.1 503.4 179.2 502.3 180.1C500.9 181.3 500.7 181.3 501.4 180C501.8 179.2 501.5 179.4 500.6 180.4C499.8 181.4 499.3 182.7 499.7 183.3C500 183.9 499.8 184 499.2 183.6C498.5 183.2 498 183.4 498 184C498 184.7 497.3 184.9 496.4 184.6C495.4 184.2 495.1 184.4 495.6 185.2C496.1 186 495.8 186.1 494.6 185.7C493.7 185.3 493.2 185.4 493.5 185.9C493.8 186.4 493.1 187.1 492 187.5C490.9 187.8 490.1 188.4 490.1 188.8C490.5 191.3 489.8 194 489 193.5C488.5 193.2 488.3 193.5 488.6 194.3C489.2 196 484 200.3 480 201.5C476.7 202.5 473 205.9 473 208.1C473 210.8 471.9 213 470.9 212.4C470.4 212.1 470.1 212.2 470.2 212.7C470.3 213.1 469.8 214.6 469.1 215.9C467.9 218 468 218.5 469.2 219.4C470 220 470.7 221.2 470.8 222C470.9 222.8 471.2 224.8 471.6 226.4C472.1 228.6 472 229.1 471 228.5C470.1 228 469.9 228.1 470.4 228.9C471.2 230.2 470.2 234.1 469.2 233.7C468.8 233.6 468.5 233.9 468.5 234.5C468.5 235 468.9 235.4 469.3 235.2C469.8 235.1 469.9 235.7 469.6 236.7C469.1 238.6 471.2 242.2 472.6 241.9C474.7 241.5 476.1 242.1 475.5 243C475 243.9 476.2 244.4 478.1 244.2C478.5 244.1 479.3 245.4 480 247.1C480.7 248.7 481.7 250.3 482.3 250.7C482.9 251.1 483 250.8 482.6 249.9C482.1 249.1 482.4 249.1 483.2 250.1C483.9 251 485.1 251.5 485.9 251.2C486.7 251 487 251.2 486.7 251.8C486.3 252.3 487.2 253 488.7 253.3C491.3 253.8 491.3 253.7 489.5 252.4C488.5 251.6 488.1 251 488.8 251C489.4 251 490.6 252 491.5 253.2C492.3 254.5 493.3 255.4 493.5 255.2C494.6 254.7 496.1 255 495.7 255.7C495.4 256.2 496.9 256.5 499 256.5C501.1 256.5 502.6 256.2 502.4 255.9C501.8 254.8 504.6 254.1 507.2 254.7C509 255.1 509.2 255 508 254.1C506.8 253.3 507.2 253 509.8 253C511.6 253 512.9 253.4 512.6 253.8C512.3 254.3 513.6 254.6 515.5 254.6C517.3 254.5 518.5 254.1 518.2 253.6C517.9 253.1 518.4 253 519.4 253.3C520.3 253.7 520.9 253.6 520.6 253.1C520.3 252.6 520.7 251.9 521.6 251.6C524 250.7 524.7 250.9 523 252.1C521.8 253 521.8 253.1 523.3 252.6C524.3 252.3 525.6 252 526.1 252C526.7 252 526.9 251.6 526.6 251.2C526.3 250.7 528.7 250.4 532 250.4C535.3 250.5 537.8 250.9 537.7 251.5C537.6 252 538.1 252.4 538.8 252.3C539.4 252.1 540 252.6 540 253.3C540 254.1 541.4 254.4 544.6 254.2C547.9 253.9 549.6 254.3 551 255.5C552.1 256.5 552.7 257.6 552.5 258C552.2 258.5 552.6 259 553.2 259.3C554.2 259.6 553.9 260.9 552.3 264.2C550.3 268.3 550.3 269 551.6 270.6C552.5 271.7 552.8 271.9 552.4 271.1C551.9 270.2 552.1 269.9 552.8 270.4C553.5 270.8 554 271.7 554 272.5C554 273.3 554.5 274.2 555.2 274.6C555.9 275.1 556.1 274.8 555.6 273.9C555.2 273.1 556 273.8 557.4 275.3C558.9 276.9 559.8 278.6 559.5 279.1C559.1 279.6 559.4 280 560 280C561.4 280 563 284.4 563.2 289.1C563.3 291.2 563.7 292.7 564.2 292.4C564.6 292.1 565 293.1 565 294.6C565 296.1 564.7 297.1 564.4 296.7C563.4 295.7 561.2 298.4 561.8 299.9C562.1 300.8 561.9 301.1 561.3 300.7C560.6 300.2 560.4 300.8 560.8 302.2C561.1 303.6 560.9 304.1 560.2 303.6C559.4 303.1 559.2 303.4 559.6 304.4C559.9 305.3 559.8 306 559.4 306C558.9 306 558.5 307.3 558.5 308.9C558.5 310.5 558.7 311.7 558.9 311.4C559.3 311.1 564 316.9 564 317.8C564 318 563.4 317.8 562.8 317.5C562.1 317.1 562.3 317.5 563.4 318.4C564.4 319.2 564.9 320.4 564.4 321.1C564 321.9 564.1 322.1 564.8 321.6C566.1 320.8 566.3 321.7 566.2 327.5C566.1 331.1 566.2 331.2 567 329C567.8 326.9 567.9 327.1 567.5 330.3C567.3 332.4 567.5 333.8 568 333.5C568.6 333.2 568.7 333.5 568.5 334.2C568.2 335 568.8 336.5 569.9 337.7C571 338.8 571.6 340.1 571.3 340.4C570.9 340.7 571.2 341 571.9 341C572.6 341 572.9 341.4 572.6 341.9C572.2 342.4 572.4 343 572.9 343.2C574.2 343.7 575.3 348 574.1 348C573.6 348 573.9 349.3 574.8 350.9C575.8 352.7 576.9 353.5 577.5 353C578.9 351.9 587.4 350.6 586.7 351.6C586.1 352.6 591.3 352.9 592 351.9C592.3 351.5 593.6 351 594.9 350.9C596.3 350.7 598.7 349.3 600.4 347.8C602 346.3 603.8 345.2 604.4 345.3C605 345.4 605.4 344.7 605.2 343.7C605 342.8 605.3 342 605.7 342.1C607.7 342.4 609.1 341.9 608.5 341C608.2 340.4 608.6 340 609.5 340C610.4 340 610.9 339.6 610.6 339.2C609.7 337.8 613.2 331.9 614.6 332.4C615.4 332.7 616 332.5 616 331.9C616 331.3 616.7 331 617.5 331.4C618.3 331.7 619 331.5 619 330.9C619 330.3 619.4 330.1 620 330.5C620.5 330.8 620.8 329.8 620.7 328C620.6 326.4 620.2 325 619.8 325C618.5 325 618.9 322 620.6 319.5C621.5 318.1 622.6 317.3 623.1 317.6C624.1 318.2 628.9 315.4 630.8 313.1C631.8 311.8 632.2 311.8 632.9 312.8C633.6 313.9 633.8 313.8 634.3 312.6C634.7 311.7 635.5 311.1 636.1 311.2C636.9 311.4 637.5 309.8 637.8 307C638 304.5 638.6 302.3 639.1 302C639.5 301.7 639.3 300.2 638.6 298.8C637.8 297.3 637.4 295.9 637.8 295.6C638.1 295.3 637.8 295 637.2 295C635.6 295 635.7 292.3 637.3 291.7C638.2 291.4 638.1 290.9 637 289.5C636 288.2 635.9 287.9 636.8 288.4C637.9 289.1 637.9 288.8 636.9 287.2C635.8 285.4 635.9 284.8 637.4 283.1C638.5 281.9 639.9 281 640.7 281C641.5 281 641.9 280.7 641.7 280.2C641.4 279.8 641.8 278.9 642.6 278.2C643.4 277.5 644 277.2 644 277.7C644 278.1 644.7 277.5 645.6 276.4C646.4 275.4 646.9 275.2 646.5 276C646.1 276.8 647.1 276.1 648.7 274.5C650.3 272.8 652.5 271.3 653.6 271.2C654.6 271 655.8 270.4 656.1 269.8C656.4 269.3 657.1 269 657.6 269.1C659.7 269.5 661.1 268.8 664.5 265.9C666.4 264.2 668 263.1 668 263.4C668 263.8 669.2 262.7 670.8 261.1C675.3 256.3 677.9 253 677.2 253C676.9 253 677.5 252.4 678.5 251.6C680.3 250.3 680.3 250.2 678.1 249C676.6 248.2 676 248.2 676.4 248.9C676.8 249.5 676.4 250 675.5 250C674.6 250 674.1 249.6 674.5 249.1C675.3 247.8 666.7 248.2 665.8 249.5C665.3 250.1 665 250.1 665 249.4C665 248.8 663.4 248.4 661.3 248.5C656.8 248.7 654 246.7 654 243.2C654 240.1 646.5 232.6 644.3 233.4C643.3 233.8 643 233.4 643.2 231.7C643.4 230.5 642.8 228.9 642 228.2C640.9 227.2 640.9 227.1 641.9 227.6C642.8 228.1 643.1 227.9 642.6 227.1C642.2 226.5 641.5 226.2 641 226.5C640 227.1 637.8 224.5 638.7 223.7C639 223.3 638.9 223 638.3 223C637.7 223 637 221.1 636.7 218.8C636.4 216.4 635.8 214.4 635.3 214.3C633 213.4 632 212.1 631.8 209.6C631.7 208.1 630.7 206.4 629.7 205.9C628.8 205.3 628.2 204.5 628.5 204C629.4 202.5 627.1 198.9 625.7 199.6C625 200 624.8 200 625.2 199.5C625.6 199.1 625.5 198.1 624.8 197.3C624.2 196.6 624 195.6 624.4 195.3C624.8 194.9 625.5 195.2 626 196C626.6 196.8 627 197 627 196.5C627 195.9 627.5 196.3 628.1 197.2C628.6 198.2 630.2 199 631.5 199C633 199 634.1 199.7 634.5 201C634.9 202.1 635.6 202.7 636.2 202.4C636.9 202 637 202.2 636.6 202.8C636.2 203.5 637.6 205.6 639.7 207.6C641.8 209.7 643.4 211.7 643.3 212.2C643.1 212.6 643.5 213 644.1 213C644.7 213 645 214 644.8 215.2C644.6 216.5 645.2 218.1 646 218.8C647.1 219.8 647.1 219.9 646.1 219.4C645.2 218.9 644.9 219.1 645.4 219.9C645.8 220.5 646.5 220.8 646.9 220.6C647.9 219.9 652.4 225 651.6 225.8C651.2 226.1 652 227.5 653.2 228.8C654.8 230.5 655.1 231.4 654.3 231.7C653.3 232.1 653.3 232.4 654.3 233.5C655 234.2 655.7 234.6 656 234.5C656.3 234.3 656.5 235.8 656.3 237.8C656.1 241 656.2 241.2 656.9 239C657.7 236.8 657.8 236.8 657.9 238.5C658 240.4 658.6 240.6 666.4 240.5C671 240.5 674.6 240.2 674.4 239.8C673.8 238.9 680.6 237.6 682.4 238.3C683.2 238.6 684.1 238.2 684.4 237.3C684.8 236.5 685.7 236 686.5 236.4C687.3 236.7 688 236.5 688 236C688 235.4 688.7 235 689.5 235C690.3 235 691 235.4 691 236C691 237.6 693.7 237.2 694.4 235.5C694.7 234.6 696.2 234 698 234C699.8 234 700.9 233.6 700.5 233C700.2 232.5 701.1 231.8 702.5 231.4C703.9 231.1 705 230.4 705 229.9C705 229.4 705.9 229 706.9 229C709.8 229 710.4 227.3 708 226C706.9 225.4 706.2 224.5 706.5 224C706.8 223.4 706.5 223.3 705.7 223.5C704.2 224.1 698.7 220.3 699.4 219.1C699.7 218.7 699 217.9 698 217.2C696.6 216.3 696.1 216.4 695.6 217.5C695.3 218.5 693.6 218.8 690 218.7C684.5 218.4 682.7 216.9 683.6 213.5C684.1 211.6 684 211.6 682.6 213.4C681.2 215.1 678.4 214.8 679.5 213C680.3 211.6 678.1 207.8 676.9 208.5C676.4 208.9 676.1 208.6 676.2 207.8C676.4 207.1 676 206.6 675.4 206.7C674.7 206.8 674.4 206.1 674.7 204.7C675.1 202.9 675 202.7 674 204C673 205.3 672.9 205.2 673.4 203.7C673.7 202.7 674 201.5 674 201C674 198.9 679.9 200.8 683 203.9C684.9 205.8 685.6 206.7 684.5 205.9C682.7 204.6 682.6 204.6 683.8 206.2C684.6 207.1 685.8 207.6 686.5 207.4C687.2 207.1 688.6 208 689.5 209.4C690.5 210.9 691.7 211.7 692.7 211.3C693.5 211 694.6 211.3 695.1 212.1C695.7 213.2 696.2 213.2 697.2 212.2C698.6 210.8 702.4 210.5 701.5 211.9C701.2 212.4 701.4 213.1 702 213.5C702.6 213.9 702.8 214.6 702.4 215.1C702.1 215.6 702.2 216 702.7 215.8C704.2 215.5 712 218.1 712 218.9C712 219.4 712.6 219.8 713.3 219.7C717.1 219.6 720.1 220.1 719.6 220.8C719.3 221.3 720.4 221.4 722.1 221.2C723.7 221 725 221.2 725 221.8C725 222.4 725.9 222.6 727 222.3C728.1 222 729 222.2 729 222.8C729 223.3 729.6 223.7 730.4 223.6C731.2 223.6 731.9 223.9 731.9 224.4C731.8 224.9 732.5 225.7 733.4 226.2C734.3 226.7 734.7 227.7 734.4 228.3C734 229 734 229.2 734.5 228.8C734.9 228.4 735.9 228.8 736.7 229.8C737.6 230.8 737.8 230.9 737.4 230C736.7 228.7 736.8 228.7 738.6 230C742.3 232.9 743.1 234 742.4 235.1C742 235.9 741.5 235.8 740.8 234.9C740 233.8 739.9 233.8 740.3 235C740.5 235.8 741.9 236.9 743.4 237.5C745.7 238.3 746.4 238.1 747.6 236.5C748.9 234.8 749.2 234.7 750 236C751.2 237.8 751.3 244.3 750.2 243.6C749.8 243.4 749.4 244 749.4 245C749.4 246 749.8 246.6 750.3 246.3C750.8 246 751.1 247.5 750.8 249.8C750.6 252.1 750.9 253.6 751.4 253.3C751.9 252.9 752.1 253.4 751.7 254.3C751.4 255.3 751.5 256 752.1 256C752.7 256 752.8 256.4 752.5 257C752.2 257.5 752.4 258 753.1 258C753.8 258 754.1 259.3 753.8 261.4C753.6 263.3 753.7 264.7 754.1 264.5C755 263.9 757.3 271.6 756.6 272.9C756.2 273.5 756.4 274 757 274C757.6 274 757.9 274.4 757.5 274.9C757.2 275.5 757.9 275.7 759.2 275.5C760.5 275.2 761.6 274.6 761.8 274C762 273.4 762.6 273.2 763.1 273.6C763.6 273.9 764.4 273 765 271.6C765.5 270.2 766.2 269 766.5 269C766.9 269 766.8 269.6 766.4 270.2C765.9 271.2 766 271.2 767.1 270.2C767.9 269.5 768.3 267.4 768.1 265.2C767.8 260.4 769.7 258.6 774.5 259.2C776.8 259.5 778.1 259.1 778.5 258.2C778.8 257.3 779.8 257 781 257.3C782.3 257.6 782.8 257.4 782.3 256.7C781.9 256.1 782.5 255.9 783.8 256.2C785.2 256.6 785.8 256.4 785.4 255.8C784.9 255.1 785.6 254.9 787.3 255.2C788.9 255.5 789.7 255.3 789.3 254.7C788.9 254.1 789.5 253.9 790.8 254.2C792 254.6 792.8 254.5 792.5 254C792.2 253.6 794.7 253.2 798 253.2C801.3 253.2 803.8 253.6 803.5 254C803.2 254.5 803.8 254.7 804.7 254.5C807.2 254.1 809 255.8 809 258.7C809 260 809.4 260.8 810 260.5C810.6 260.2 810.7 260.6 810.4 261.4C810 262.4 810.5 263.2 811.5 263.6C812.4 264 812.9 264.8 812.6 265.5C812.3 266.3 812.8 267.1 813.6 267.4C815.3 268.1 815.5 272.6 813.8 273.3C812.8 273.7 812.8 273.9 813.8 273.9C814.5 274 814.9 274.4 814.6 274.8C814.3 275.3 815.4 275.7 817.1 275.7C819.1 275.7 819.7 275.4 818.8 274.8C817.9 274.2 818.1 274 819.5 274.2C820.7 274.4 821.6 275.4 821.8 276.8C822 278 822.6 279 823.2 279C823.8 279 824 280.5 823.8 282.5C823.6 284.4 823.9 286.1 824.5 286.3C825.1 286.6 824.7 287.6 823.7 288.8C822.3 290.3 822.2 290.9 823.2 291.3C824 291.6 823.8 291.9 822.7 291.9C821.4 292 821 292.5 821.4 293.7C821.7 294.7 821.6 296.1 821.1 296.9C820.5 297.8 820.7 298.8 821.6 299.7C822.4 300.5 822.7 301.6 822.4 302.2C822 302.9 822.2 303 822.8 302.6C823.5 302.2 823.9 300.8 823.8 299.5C823.7 298.2 823.2 297.4 822.8 297.6C821.3 298.6 822 296.7 824.3 293.6C827.8 288.9 828.5 287.5 827 288.5C826.1 289 825.9 288.9 826.4 288.2C827.4 286.5 831 286.7 831 288.5C831 289.3 830.9 290.3 830.8 290.6C830.6 290.9 831.8 291.9 833.3 292.7C835.2 293.6 836 294.8 835.8 295.8C835.5 296.7 836.2 298.4 837.3 299.5C838.4 300.6 838.9 300.8 838.5 300C837.7 298.7 837.8 298.7 839.4 299.9C840.3 300.7 840.8 302 840.5 302.8C840.1 304 841 304.1 846.7 303.5C850.5 303.1 854 302.3 854.5 301.8C855.2 301 855.1 300.9 854.3 301.4C853.4 301.9 853 301.4 853 300.1C853 298.9 853.5 298 854 298C854.6 298 855 297.3 855 296.4C855 295.6 854.5 295.2 853.9 295.6C853.2 296 853 295.4 853.2 294.2C853.4 293 852.6 291.4 851.5 290.5C850.4 289.6 850.2 289.1 851 289.5C851.8 289.9 851.6 289.4 850.5 288.3C847.8 285.9 847.6 278.4 850.2 278.6C851.2 278.7 851.7 278.4 851.4 277.9C850.7 276.7 856.7 276.8 859 278C860 278.5 861.1 280.2 861.5 281.7C862.1 284.4 862.2 284.4 863.6 282.5C864.5 281.3 865.3 280.9 865.8 281.5C866.2 282.1 867.8 282.7 869.3 282.8C870.9 282.9 872.6 283.3 873.2 283.6C873.8 284 877 284.5 880.3 284.7C883.7 284.9 886.6 285.2 886.9 285.2C889.3 285.4 892 284.9 891.7 284.2C891.4 283.8 892.2 282.6 893.3 281.5C894.4 280.4 894.9 280.2 894.5 281C893.9 282.1 894.2 282 895.7 280.7C896.8 279.8 897.9 279.2 898.1 279.5C898.4 279.7 899.1 279 899.8 278C900.5 276.9 900.7 276 900.3 276.1C898.3 276.4 897.3 275.9 897.3 274.5C897.3 273.7 898 273 898.7 273C899.5 273 899.8 272.5 899.5 272C899.1 271.4 898.3 271.3 897.7 271.7C897 272.1 897.1 271.7 897.9 270.7C899 269.3 899 268.9 897.7 268.4C896.8 268.1 896.4 267.2 896.7 266.3C897.2 265.1 897 264.9 896 265.5C895.2 266 894.9 265.8 895.2 264.9C895.5 264.1 894.7 262.7 893.4 261.8C890.4 259.4 891.3 256 894.9 256C896.4 256 898 255.7 898.3 255.3C899.5 254.1 896.8 252 894 252C892 252 891.1 251.4 890.7 249.9C890.4 248.7 889.7 248.1 889.2 248.4C888 249.1 884.4 245.2 885.4 244.2C885.8 243.8 888.8 243.5 892.1 243.5C898 243.4 900.4 245 898 247.4C896 249.4 897 250.2 900.9 249.8C903.2 249.6 904.8 249.9 904.7 250.5C904.6 251 905.3 251.4 906.2 251.4C907.2 251.3 907.7 251.6 907.5 252.1C907.2 252.5 907.7 253.3 908.7 253.8C910.1 254.6 910.2 255.1 909.2 256.3C908.2 257.5 908.3 257.9 910.1 258.3C911.2 258.6 912.4 259.8 912.7 260.9C913 262 913.5 262.8 913.9 262.6C914.2 262.4 914.6 263.5 914.7 265.1C914.8 266.7 914.5 268 914 268C913.4 268 913 268.7 913 269.6C913 270.7 913.6 271.1 915 270.7C916.1 270.4 916.8 270.5 916.5 271C915.8 272.2 920.3 273.1 921.5 271.9C922.2 271.2 922 271.1 920.9 271.5C919.7 271.9 919.4 271.4 919.6 269.1C919.7 267.2 919.2 265.9 918.3 265.6C917.4 265.2 917 264.3 917.4 263.4C917.8 262.4 917.6 262.1 916.8 262.6C916.1 263.1 915.9 262.8 916.3 261.8C916.6 260.9 916.4 259.8 915.8 259.2C914.1 257.5 915.7 254.7 917.9 255.3C919.3 255.6 919.7 255.4 919.3 254.4C919 253.4 919.5 253 921.1 253C923 253 923.2 252.8 922 252C920.9 251.3 921.3 251.1 923.7 251.3C925.4 251.4 926.6 251.8 926.3 252.2C926.1 252.7 926.6 253 927.5 253C928.4 253 928.8 253.4 928.5 254C928.1 254.6 928.6 254.7 929.6 254.3C930.9 253.8 931.1 254 930.5 255C929.9 256 930.1 256.2 931.6 255.6C932.6 255.2 934.2 254.7 935 254.6C935.8 254.4 937.3 253 938.5 251.4C939.6 249.8 941.1 248.1 941.8 247.7C942.4 247.3 943 246.4 943 245.9C943 245.3 942.5 245.2 941.8 245.6C941.1 246.1 940.9 245.8 941.3 244.8C941.6 243.9 941.3 242.7 940.7 242C940 241.3 940 241 940.6 241.3C941.3 241.7 941.5 240.8 941.2 238.9C940.9 237.2 940.2 235.6 939.4 235.3C938.7 235.1 938.4 234.2 938.7 233.4C939.4 231.6 937.1 228.8 935.7 229.7C935.2 230 935 229.8 935.3 229.3C935.7 228.7 935.3 227.7 934.5 227C933.7 226.3 933 226.1 933 226.6C933 227.1 932.5 226.8 932 226C931.1 224.7 930.9 224.7 930 226C929.3 227.1 929 227.1 929 226.2C929 225.5 928.6 225.2 928 225.5C927.4 225.9 927.3 225.4 927.7 224.4C928.1 223.2 928 222.9 927.2 223.4C926.5 223.8 925.2 223.6 924.3 223.1C923.3 222.5 922.8 222 923.3 222C923.7 222 923.1 221.1 922 220C919.1 217.1 919.4 214.8 922.6 215.4C924.2 215.7 925.3 215.4 925.7 214.4C926 213.6 926.9 213 927.7 213C928.5 213 928.9 212.6 928.6 212.1C928.3 211.6 929.9 211.3 932.1 211.4C935 211.6 936.8 212.3 938.1 213.9C939.1 215.1 940.2 216 940.5 215.9C941.9 215.6 946.9 218.3 946.4 219.1C946.1 219.6 946.6 219.7 947.5 219.4C948.4 219 949.7 219.5 950.6 220.6C951.5 221.7 951.9 221.8 951.5 221C951.1 220 951.3 220.1 952.3 221.2C953.1 222.2 954 222.7 954.3 222.3C955 221.7 955.4 223.6 955 225.5C954.9 226 955.2 226.2 955.6 225.8C956 225.4 956.9 225.5 957.7 226.1C958.7 227 959 226.9 959 225.9C959 224.8 959.2 224.8 959.8 225.8C960.4 226.7 961 226.3 962 224.5C963.4 221.9 965 221.2 965 223.2C965 223.8 965.3 224.1 965.6 223.7C965.9 223.4 967 224 968.1 225.1C969.1 226.1 970.7 227 971.5 227C972.5 227 973 227.7 972.8 228.7C972.6 230 973.1 230.4 974.4 230.2C975.4 230 976.7 230.4 977.2 231.2C977.9 232.2 978 232.1 977.6 230.8C977.2 229.4 977.6 229.1 979.4 229.2C981.2 229.4 981.6 229.9 981.2 231.9C980.9 233.4 981.1 234.1 981.8 233.6C982.4 233.3 983.2 233.5 983.6 234.1C984 234.8 983.9 235 983.3 234.7C982.7 234.3 981.9 234.7 981.6 235.6C981.2 236.5 980.7 237.1 980.4 236.8C979.8 236.1 974.5 241.4 973.7 243.5C973.3 244.3 973.6 245 974.2 245C974.8 245 975.1 245.3 974.8 245.6C974.4 245.9 975 247 976.1 248.1C977.2 249.2 977.8 250.5 977.5 251C977.2 251.5 978.1 252.7 979.5 253.6C981.2 254.7 981.9 255.8 981.5 257.1C981.1 258.2 981.7 259.7 982.9 260.9C983.9 261.9 984.6 263 984.4 263.3C984.1 263.5 984.6 264 985.4 264.3C986.3 264.7 986.9 264.6 986.9 264.2C986.5 261.6 987.2 259 988.3 259C989.1 259 989.7 258.3 989.7 257.5C989.7 256.7 989.3 256.3 988.8 256.6C988.4 256.9 988 256.6 988 256.1C988 255 989.3 254.6 991.5 254.9C992.1 255 991.5 254.2 990.3 253.1C989.1 252.1 988.4 251 988.7 250.6C989.1 250.3 988.8 250 988.2 250C987.5 250 987 249.4 987 248.6C987 247.9 986.2 246.6 985.3 245.9C983.6 244.6 983.6 244.7 984.9 246.5C986.3 248.4 986.3 248.4 984.5 246.8C983 245.4 982.9 244.8 984 243.6C985 242.3 985 242 983.9 241.9C983.1 241.9 983.4 241.5 984.5 241C987.3 239.8 988.2 239.8 987.4 241.2C987 241.9 987.1 242 987.9 241.6C989.1 240.8 992.3 243.4 991.3 244.4C990.9 244.7 991.2 245 991.7 245C992.3 245 993 244.4 993.3 243.7C993.5 243 995.1 243.9 997.5 246.3C1000.6 249.4 1001.9 250.1 1004.1 249.6C1005.6 249.3 1008.3 249.5 1010 250C1013.2 250.9 1013.2 250.9 1011.4 248.9C1010.4 247.8 1009.6 245.7 1009.6 244.2C1009.6 242.7 1009.2 241.2 1008.7 240.9C1008.2 240.6 1008.5 240 1009.3 239.7C1010.2 239.4 1013.1 241.5 1017.1 245.5C1020.6 249.1 1024.1 251.9 1024.8 252C1025.5 252 1025.8 252.5 1025.5 253C1025.1 253.6 1025.4 253.9 1026.1 253.8C1026.8 253.6 1027.4 254.1 1027.5 254.7C1027.5 256.6 1029.4 256.8 1029.8 255C1029.9 254.1 1028.2 251.7 1025.9 249.5C1023.6 247.3 1022 246.2 1022.4 247C1022.8 247.8 1021.7 246.9 1019.9 245C1018.1 243.1 1016.2 241.6 1015.8 241.7C1015.4 241.9 1013.2 239.7 1010.9 237C1008.6 234.3 1006.4 232.2 1006 232.3C1005.6 232.4 1004.3 231.4 1003.1 230C1001.8 228.6 1001.1 228.2 1001.5 229C1001.9 229.8 1000.6 228.9 998.7 226.8C996.7 224.8 994.9 223.4 994.7 223.6C994.5 223.9 993.1 222.7 991.6 221C990.2 219.3 989 218.2 989 218.6C989 219.1 987.3 217.7 985.2 215.7C983.1 213.6 981.1 212.3 980.7 212.6C980.3 213 979.8 212.6 979.4 211.7C979.1 210.8 978.2 210.4 977.3 210.7C976.3 211.1 975.9 210.9 976.4 210.2C976.7 209.6 976.6 208.8 976 208.5C975.4 208.1 975.1 208.4 975.2 209.1C975.6 210.8 973.4 211.3 971.9 209.7C971.1 209 969.9 208.5 969.1 208.8C968.3 209.1 968 208.8 968.4 208.1C968.8 207.5 968.6 207 968.1 207C967.5 207 967 206.5 967 205.9C967 205.4 967.5 205.2 968.2 205.6C968.8 206 969 205.9 968.7 205.3C968.4 204.8 966.7 204.5 964.9 204.8C962.5 205.2 961.9 205 962.5 204C963 203.2 962.9 202.9 962.2 203.3C960.7 204.3 957.9 203 958.7 201.6C959 201 959 200.8 958.5 201.2C958.1 201.6 956.8 201.4 955.6 200.8C954.5 200.1 953.1 199.7 952.7 199.8C952.2 199.9 952.1 199.6 952.5 199C952.8 198.5 952 197.5 950.6 196.8C949.2 196.2 948 195.3 948 194.8C948 194.3 947.6 194.2 947 194.5C946.5 194.8 946 194.7 946 194.1C946 192.3 940 187.1 938.5 187.6C937.7 188 936.7 187.5 936.4 186.6C936.1 185.7 935.4 185.3 934.9 185.6C934.4 185.9 934 185.6 934 185.1C934 184.5 933.7 184.1 933.3 184.1C931.5 184.4 930.2 183.9 928.2 182C927 180.9 925.9 180 925.8 180.1C924.8 180.7 921.1 178.6 921.6 177.8C922 177.1 921.8 177 921.2 177.4C920.6 177.8 919.2 177.2 918.1 176.1C917 175 915.9 174.4 915.6 174.7C915.3 175.1 915 174.8 915 174.2C915 173.5 914.7 173.1 914.3 173.1C912.3 173.4 910.9 172.9 911.5 172C911.8 171.4 911.2 171 910 171C908.8 171 908.1 170.6 908.4 170.1C908.7 169.7 907.8 168.8 906.4 168.1C904.4 167.2 904 167.2 904.6 168.2C905 168.9 904.2 168.3 902.7 166.7C900 163.9 898.4 163.1 899.5 165.2C899.9 165.9 899.5 165.7 898.7 164.8C897.9 163.8 897 163.3 896.7 163.7C896.3 164 896 163.7 896 163C896 162.3 895.7 162 895.4 162.3C895 162.6 893.8 162.4 892.7 161.9C889.9 160.3 885.9 160 886.6 161.4C886.9 162 886.6 161.8 885.8 160.9C885.1 160 883.9 159.5 883.3 159.7C882.6 160 882 159.7 882 159C882 158.4 881.5 158.2 881 158.5C879.7 159.3 871.9 155 872.6 153.8C873.4 152.5 872 152.9 870.4 154.5C868.7 156.1 868.9 156.2 859.9 147.7C857 144.9 854.2 143.1 853.4 143.4C851.7 144.1 848.8 143.1 849.5 142.1C849.7 141.7 849.4 141.3 848.7 141.2C848 141.1 846.2 140.8 844.6 140.4C842.6 139.9 841.9 140 842.4 140.8C842.9 141.6 842.6 141.8 841.6 141.4C840.7 141.1 840 140.4 840 139.8C840 139.3 839.6 139.2 839 139.5C838.5 139.8 838 139.7 838 139.1C838 138.5 837.3 138.3 836.5 138.6C835.7 139 835 138.7 835 138C835 137.4 834.6 137.1 834.1 137.4C833.6 137.7 832.7 137.4 832.1 136.6C831.5 135.9 828.9 134.7 826.5 134C824 133.3 822 132.3 822 131.8C822 131.3 821.6 131.1 821.1 131.4C820.6 131.7 818.7 131 816.9 129.7C814.5 128.1 812.2 127.5 808.8 127.6C804.7 127.8 804.2 127.5 804.3 125.8C804.4 124.4 805 124 806.7 124.3C807.9 124.5 809.5 124.3 810.2 123.9C811.1 123.3 810.8 123 809.2 123C807.9 123 807.2 122.6 807.5 122C807.9 121.4 807.4 121.3 806.4 121.7C805.2 122.1 804.9 122 805.4 121.2C805.9 120.4 805.6 120.2 804.6 120.6C803.7 120.9 803 120.8 803 120.2C803 119.6 802 119.4 800.8 119.8C799.4 120.1 798.9 119.9 799.4 119.2C799.8 118.5 798.9 118.3 796.5 118.7C793.9 119.1 793 118.9 793.2 118C793.4 117.3 792.1 116.3 790.3 115.8C788.5 115.3 787 114.6 787 114.1C787 113.3 786.3 113.1 781 112.6C779.1 112.4 777.2 112.8 776.8 113.4C776.2 114.2 776 114.2 776 113.4C776 112.7 774.9 112.5 773.5 112.8C772.1 113 771 112.8 771 112.1C771 111.5 770.3 111.3 769.3 111.7C768.4 112.1 767.9 111.9 768.3 111.4C768.7 110.7 767.7 110.5 765.8 110.8C764.1 111.1 763 110.9 763.3 110.4C763.6 109.9 761.7 109.5 759.2 109.5C756.6 109.5 752.8 109.2 750.8 108.8C747.8 108.3 747 108.4 747 109.6C747 110.4 746.3 111 745.4 111C744.6 111 744.2 110.6 744.5 110C744.8 109.4 744.4 109.3 743.6 109.6C742.7 109.9 742 111.1 742 112.1C742 114.1 740.1 114.6 738.5 113.1C737.9 112.7 736 111.8 734.3 111.2C731.6 110.3 731 110.4 731 111.6C731 113.3 728.6 113.4 726.8 111.7C724.8 109.9 722.3 109.5 723.8 111.3C724.5 112.1 724.6 113 724.2 113.4C723.8 113.8 724 114.1 724.5 114C725.1 113.9 726.5 113.8 727.8 113.9C729.7 114 730 114.5 729.8 116.7C729.3 121 727.4 122.5 724.3 121.1C721.8 120 721.8 119.9 723.6 118.4C725.2 117.1 725.2 116.9 723.8 117.4C722.6 117.7 722.3 117.5 722.6 116.5C722.9 115.8 722.2 114.6 721 114C719.8 113.3 719.1 112.2 719.4 111.4C719.7 110.7 719.6 110.1 719.2 110.1C717.4 110.4 715.9 109.9 716.4 109.2C717.1 108.1 716 106.8 712.6 104.6C710.5 103.3 709.5 103.1 709.2 103.9C709 104.5 708.5 104.8 708.1 104.6C707.7 104.3 706.8 105 706.2 106.1C705.1 107.9 705.3 108.2 708 109.1C711.5 110.4 713.7 113.5 711.8 114.6C711.2 115 710.4 114.8 710.2 114.2C710 113.5 709.4 113.2 708.9 113.6C708.4 113.9 708 113.7 708 113.2C708 112.6 707.4 112.2 706.8 112.3C703.7 112.4 701.9 111.9 702.4 111.2C702.6 110.8 701.9 110.3 700.7 110.3C699.5 110.2 698.4 109.7 698.2 109.2C698 108.6 697 108.5 695.8 108.7C694.7 109 693.5 108.8 693.1 108.1C692.6 107.3 691.7 107.5 690 109C687.2 111.4 686.1 111.5 685.4 109.5C684.9 108.3 683.5 108.1 678.4 108.6C674.4 109 672 108.8 672 108.2C672 106.6 663.1 105.7 661.5 107C660.7 107.7 659.3 108 658.5 107.6C657.7 107.3 657 107.5 657 108C657 108.6 655.4 109 653.5 109C650.4 109 650 108.7 650 106.5C650 104.9 649.4 104 648.4 104C647.2 104 647 104.4 647.7 105.2C650.2 108.7 646.7 111.5 643.7 108.5C641.8 106.7 641.2 106.8 638.6 109.1C637.6 110.1 635.4 111.2 633.9 111.5C632.3 111.9 631 112.6 631 113.2C631 114.6 624.8 113.3 623.8 111.7C623.4 111.1 623 110.8 623 111.2C623 111.6 621.9 110.8 620.5 109.4C617.7 106.6 617.2 104 619.5 104C620.3 104 621 104.4 621 104.9C621 105.4 621.9 105.6 623 105.3C624.1 105 625 105.2 625 105.6C625 106.1 627.7 106.3 631 106.2C634.3 106 637 105.5 637 105.2C637 103.9 626.5 101.1 624 101.6C622 102.1 621.8 101.9 623 101.1C624.1 100.2 623.4 100.1 620 100.5C616.5 100.9 615.9 100.8 617.5 100C619.2 99.1 619 99 616.3 99.5C614.5 99.7 613 99.6 613 99.1C613 98.7 610.7 98 607.8 97.7C605 97.3 602.4 96.7 602.1 96.3C601.3 95.3 598 95 598 96C598 96.4 596.1 96.4 593.8 95.9C588.4 94.9 588.5 94.9 587.8 95.6ZM654.8 110.7C653.8 110.9 652 110.9 650.8 110.7C649.5 110.5 650.3 110.3 652.5 110.3C654.7 110.2 655.7 110.4 654.8 110.7ZM622.8 152.1C624.3 152.1 624.9 152.4 624.4 153.2C623.9 153.9 624.2 154.1 625.2 153.8C626.3 153.3 626.6 153.7 626.3 155.4C625.9 157.1 626.3 157.6 627.9 157.6C629.4 157.6 630 156.9 630 155.2C630 153.9 630.4 153.2 631 153.5C631.6 153.8 632 153.6 632 153.1C632 152.5 633.5 152 635.4 152C638.1 152 639 152.5 639.5 154.1C639.9 155.3 639.7 156.5 639.1 156.9C638.5 157.3 639.3 158.3 641.2 159.4C642.9 160.5 644 160.8 643.6 160.2C643.1 159.4 643.4 159.2 644.4 159.6C645.3 159.9 645.8 160.5 645.5 160.9C645.3 161.3 646.6 162.4 648.5 163.3C652 164.9 653 167.3 650.9 168.5C649.5 169.4 640.1 169.7 640.6 168.9C640.8 168.5 639.3 167.9 637.2 167.5C635.2 167.1 633.2 166.6 632.7 166.3C631.5 165.5 620.9 165.1 621.4 165.8C621.6 166.2 618.5 166.6 614.4 166.7C610.1 166.8 607 166.5 607 166C607 165.4 607.5 165 608 165C608.6 165 609 164.3 609 163.5C609 162.7 608.6 162 608 162C607.5 162 608.1 160.9 609.3 159.5C610.5 158.2 612.8 155.7 614.3 154C616.3 151.7 617.6 151 618.8 151.5C619.7 151.9 621.5 152.2 622.8 152.1ZM685.1 159C686.3 159.7 686.9 161 686.8 162.5C686.6 164.5 686 165 683.8 165C681.3 165 681.1 165.2 682.2 167C682.9 168 683.6 168.7 683.8 168.5C684.6 167.7 686.7 170.5 686.3 171.7C686 172.4 686.2 173 686.8 173C687.4 173 688 172.5 688.2 171.8C688.8 170.2 693 174.5 693 176.6C693 177.8 692.3 178.1 690.3 177.7C687.7 177.2 687.6 177.3 689.5 178.7C690.6 179.5 691.4 180.8 691.2 181.6C691 182.4 691.4 183 692 183C692.5 183 693 183.6 693 184.4C693 185.4 691.5 185.9 688 186.2C682.3 186.5 680.7 186.2 681.5 184.9C681.9 184.4 681.5 184.3 680.7 184.6C679.9 184.9 678 184 676.4 182.6L673.5 180.1L675.8 178C678.6 175.4 678.6 174.7 675.8 173.5C674.6 172.9 672.9 171.2 672 169.5C671.2 167.9 669.6 165.7 668.5 164.7C666.9 163.2 666.8 162.7 668 162C668.8 161.4 669.9 161 670.3 161C670.8 161 670.9 160.6 670.5 160.1C670.2 159.6 671.2 159.3 672.8 159.5C674.3 159.7 676.3 159.4 677.1 158.9C679 157.7 682.7 157.8 685.1 159ZM709.5 167.8C709.8 168.5 710.4 168.8 711 168.5C711.5 168.2 712 168.2 712 168.6C712 169.3 708 173 707.3 173C706.3 173 704.2 170.3 703.6 168.2C702.9 166.2 703.2 166 705.9 166.2C707.6 166.3 709.2 167 709.5 167.8ZM755.6 175.8C755.7 177.7 755.5 177.8 754.2 176.8C753.2 176 752.9 176 753.3 176.6C753.7 177.3 753.1 178 752 178.3C750.9 178.6 750.2 178.4 750.6 177.9C750.9 177.4 750.4 177 749.6 177C748.7 177 748 176.5 748 176C748 175.4 748.7 175 749.5 175C750.3 175 751 174.5 751 173.9C751 173.3 752 173 753.3 173.2C754.8 173.4 755.5 174.2 755.6 175.8ZM763.6 178C763.6 179.1 763.1 180 762.5 180C761.9 180 761.4 179.1 761.3 178C761.2 176.9 761.7 176 762.3 176C763 176 763.6 176.9 763.6 178ZM848.6 183.6C848.3 184.5 848 186 848 187C848 188.4 846.9 188.9 842.9 189.4C836.8 190.2 834.3 188.8 839 187.2C841.3 186.3 841.9 186.4 841.5 187.3C841.1 188 841.5 187.7 842.3 186.8C843.1 185.8 844 185.3 844.3 185.7C844.7 186 845 185.4 845 184.2C845 182.6 845.6 182 847.1 182C848.6 182 849 182.4 848.6 183.6ZM689.8 187.7C688.8 187.9 687.2 187.9 686.3 187.7C685.3 187.4 686.1 187.2 688 187.2C689.9 187.2 690.7 187.4 689.8 187.7ZM534.8 249.7C533.8 249.9 532.2 249.9 531.3 249.7C530.3 249.4 531.1 249.2 533 249.2C534.9 249.2 535.7 249.4 534.8 249.7ZM624.8 269.8C626.5 270.1 626.3 272.9 624.5 273.6C623.7 274 623.3 274.7 623.6 275.2C624 275.8 623.6 276.6 622.9 277.1C621 278.3 619.7 278.2 620.5 277C620.8 276.4 620.2 276 619.1 276C616.7 276 615.4 272.6 617.1 270.7C618.2 269.6 620.5 269.3 624.8 269.8ZM609 280.5C609.1 278.8 609.4 278.1 609.7 278.9C610.2 280 610.4 280 611.2 278.9C611.9 277.9 612 278.4 611.5 280.3C611.2 282.1 611.3 282.9 611.9 282.6C612.5 282.2 612.7 283 612.4 284.6C612.1 286 612.3 286.9 612.7 286.7C613.1 286.4 613.6 287.3 613.6 288.6C613.7 289.9 613.4 291 612.9 291C612.4 291 612 290.5 612 289.9C612 289.4 611.5 289.2 610.8 289.6C610.1 290.1 609.9 289.8 610.2 288.8C610.6 288 610 286.8 608.9 286.2C607.5 285.3 607 283.9 607.1 281.2C607.2 277.5 607.2 277.5 608 280.5L608.8 283.5L609 280.5ZM624.4 297.1C624.7 298.8 624.5 301.1 623.9 302.2C623.1 303.7 623.1 304.1 623.9 303.6C624.5 303.2 625 303.5 625 304.4C625 306.3 622.7 307.7 622.2 306.2C622 305.5 621.4 305.2 620.9 305.6C620.4 305.9 620 303.5 620 300.1C620 294.8 620.2 294 621.9 294C623.2 294 623.9 295 624.4 297.1Z",
+p3f9a7400: "M346.9 167.8C346.8 168.2 346.8 168.8 346.9 169.2C346.9 169.5 345.4 171.2 343.5 172.8L340.1 175.9L343.5 175.7C345.4 175.6 347 175.1 347 174.6C347 174.2 347.9 174 349 174.3C350.1 174.6 351 174.4 351 173.9C351 173.4 351.7 173 352.6 173C353.4 173 353.9 173.4 353.6 173.8C353.4 174.2 353.9 174.6 354.9 174.6C355.9 174.6 356.7 174 356.7 173.4C356.7 172.7 356.1 172.4 355.3 172.7C354.2 173.1 354.2 172.7 354.9 170.7C355.9 168.2 355.8 168.1 353.5 169C352.1 169.5 351 169.6 351 169.1C351 168.1 347.1 166.9 346.9 167.8Z",
+p5c2d40: "M942 234.8C942 235.3 942.6 236.5 943.4 237.5C944.7 239.3 944.8 239.3 944.3 236.7C943.8 234.3 942 232.8 942 234.8Z",
+p6caa600: "M852.6 456.6C852.3 457.4 851.6 457.8 851 457.5C850.5 457.2 850 457.1 850 457.4C850 457.7 851.2 458.6 852.8 459.4C855 460.5 855.7 460.5 856.7 459.5C857.7 458.4 857.4 457.9 855.6 456.6C853.4 455.2 853.1 455.2 852.6 456.6Z",
+p6f0b0c0: "M256.5 138C256.8 138.4 256.4 139.1 255.8 139.3C255.1 139.6 255 139.9 255.6 139.9C256.1 140 257.4 139.4 258.4 138.7C260 137.5 260 137.4 258 137.3C256.9 137.2 256.2 137.5 256.5 138Z",
+p771dd00: "M262.2 142.5C263.2 143.5 267.1 143.9 266.5 142.9C266.1 142.4 264.9 142 263.8 142C262.6 142 261.9 142.2 262.2 142.5Z",
+p8602c00: "M953.1 264C953 264.8 952.7 266.6 952.3 268C952 269.4 952.1 270.2 952.5 269.8C952.9 269.4 954 270 954.9 271.1C955.8 272.2 958.1 273.3 960 273.5C961.9 273.7 962.9 273.6 962.2 273.3C961.6 273.1 961.3 272.3 961.6 271.8C962 271.1 961.8 271 961.2 271.4C960.5 271.8 960 271.6 960 271C960 270.4 959.5 270.2 958.8 270.6C958.1 271 958 270.9 958.4 270.2C958.8 269.6 958 268.4 956.6 267.5C955.2 266.6 953.9 265.1 953.7 264.2C953.3 262.9 953.2 262.8 953.1 264Z",
+p879600: "M380 114.5C378.3 115.5 378 115.9 379.1 116C380 116 381.3 115.3 382 114.5C383.5 112.7 383.2 112.7 380 114.5Z",
+p8f6c300: "M238 142.8C237.5 143 237 143.6 237 144.1C237 144.5 237.7 144.6 238.7 144.3C239.8 143.9 240.1 144 239.6 144.8C239.1 145.6 239.7 145.9 241.5 145.8C243.1 145.6 243.9 145.1 243.6 144.3C243 142.8 244.6 142.5 245.3 144C245.6 144.6 245.7 144.5 245.6 143.8C245.4 142.6 240.5 142 238 142.8Z",
+p9306800: "M675.7 93.2C675.9 93.7 674.5 94 672.6 94C670.4 94 668.1 94.9 666.3 96.4L663.5 98.8L667.4 99.5C671.3 100.3 673.6 98.9 672.3 96.6C671.9 96.1 672.4 95.9 673.3 96.3C674.3 96.6 675 96.5 675 96C675 95.5 675.8 95.3 676.8 95.6C678.2 96.1 678.3 96 677 95.1C675.8 94.2 676.4 94 679.5 94.4C681.7 94.7 682.7 94.7 681.7 94.4C680.8 94.1 680.2 93.5 680.5 93.1C680.7 92.6 679.6 92.3 678.1 92.4C676.5 92.5 675.4 92.8 675.7 93.2Z",
+p949c280: "M902.7 374.6C903 375.3 903.6 376 904.2 376C904.7 376 904.9 376.4 904.6 376.9C904.3 377.4 904.7 378 905.5 378.4C906.6 378.8 906.9 378.3 906.7 376.8C906.5 375.6 905.4 374.3 904.2 373.9C902.6 373.3 902.2 373.4 902.7 374.6Z",
+pa4d0e00: "M858 284.8C858 285.5 858.7 286.8 859.5 287.6C860.4 288.5 861 288.7 861 288C861 287.4 861.4 287.2 862 287.5C862.6 287.8 862.7 287.4 862.4 286.6C862.1 285.7 861.3 285.3 860.8 285.6C860.2 286 859.4 285.6 858.9 284.9C858.2 283.8 858 283.8 858 284.8Z",
+pd89e980: "M868 350.1C868 350.6 867 351 865.8 351.1C864.5 351.1 864.1 351.4 864.8 351.7C866.2 352.3 866.4 355.6 865 356.5C864.5 356.8 864 357.6 864 358.1C864 359.4 867.5 358.8 867.5 357.5C867.8 353.3 871 350 871 353.9C871 355 871.4 356.1 871.9 356.4C872.4 356.8 872.7 358.1 872.6 359.4C872.4 361.1 872.7 361.7 873.6 361.3C874.4 361 874.7 360.3 874.3 359.6C873.9 359 873.7 357.7 873.9 356.6C874.1 355.4 873.8 355 872.9 355.6C872 356.1 871.9 355.8 872.3 354.7C873.2 352.3 871.8 349.5 869.8 349.4C868.8 349.3 868 349.6 868 350.1Z",
+pe58fe70: "M890.5 305C890.8 305.5 890.7 306 890.1 306C889.5 306 889.1 307.7 889.3 309.9C889.4 312 889.8 313.6 890.3 313.3C890.7 313.1 891 313.6 891 314.4C891 315.4 890.1 316 888.8 316C887.1 316 886.8 316.3 887.9 316.9C889 317.6 888.9 317.9 887.4 318.3C886.1 318.6 886.3 318.8 888.3 318.9C889.8 318.9 891 319.4 891 319.9C891 320.4 891.8 320.7 892.8 320.6C893.8 320.6 894.5 321.2 894.5 322.2C894.5 323.2 895 324 895.5 324C896.1 324 896.5 323.5 896.4 323C896.3 322.4 896.2 321.3 896.2 320.5C896.1 319.7 895.7 319.1 895.3 319.1C892.3 319.6 891.1 318.8 891.5 316.7C892.8 310 893.3 308.8 894 310C894.5 310.8 894.9 310.5 895.3 309.1C895.6 307.9 895.4 307.2 894.9 307.5C894.5 307.8 893.5 307.2 892.8 306C892.1 304.9 891.2 304 890.7 304C890.3 304 890.2 304.4 890.5 305Z",
+pe648700: "M495.8 133.3C495.1 134.1 493.8 134.9 493 135.3C491.7 135.8 491.7 135.9 493 135.9C494.1 136 494.2 136.2 493.3 136.8C492.5 137.3 492.4 138.1 493 139C493.8 140.3 494.2 140.2 495.5 138.5C496.4 137.4 496.9 137.1 496.5 137.7C496.1 138.6 496.4 138.8 497.4 138.4C498.3 138.1 499 137.3 499 136.8C499 136.2 499.7 136.3 500.5 137C501.8 138.1 501.9 138 501.4 136.6C501.1 135.7 501.3 134.3 502 133.5C503.1 132.2 502.8 132 500.2 132C498.5 132 496.5 132.6 495.8 133.3Z",
+pf1a6500: "M71.3004 288.3C67.8004 292.2 67.6004 293.6 71.1004 290.3C72.9004 288.5 74.2004 286.8 73.9004 286.5C73.6004 286.2 72.4004 287 71.3004 288.3Z",
+pfec7180: "M279.001 135.5C278.301 136.3 278.101 137 278.501 137C278.901 137 278.401 137.8 277.301 138.7C276.301 139.7 276.101 140 277.001 139.5C278.301 138.6 278.301 138.7 277.101 140.2C276.401 141.2 275.401 141.7 274.901 141.5C273.901 140.8 271.701 144.7 271.401 148C271.201 149.4 270.601 150.6 270.001 150.8C269.401 151 267.601 152.3 265.901 153.7C263.501 155.8 262.601 156 261.701 155C260.801 154 260.801 153.9 261.801 154.4C263.501 155.4 263.301 153.5 261.501 152C260.301 151 260.001 151.1 260.001 152.8C260.001 155 255.501 158.4 254.001 157.5C253.401 157.2 253.001 157.4 253.001 158C253.001 158.6 252.601 158.8 252.001 158.5C251.501 158.2 251.001 158.4 251.001 159C251.001 159.7 250.301 159.9 249.401 159.6C248.401 159.2 248.101 159.4 248.601 160.2C249.101 160.9 248.601 161.1 247.201 160.8C246.001 160.4 245.001 160.5 245.001 161C245.001 161.9 238.001 163 236.701 162.3C235.501 161.6 237.901 158.1 239.801 158.1C244.301 157.9 246.001 157.5 246.001 156.8C246.001 156.4 246.901 156 248.001 156C249.101 156 250.001 155.6 250.001 155C250.001 154.5 251.201 153.7 252.701 153.4L255.401 152.7L253.101 151.8C251.201 151.2 250.901 150.5 251.401 148.5C252.101 145.7 251.801 145.5 248.901 147C247.901 147.6 247.001 149 247.001 150.1C247.001 151.2 246.601 151.8 246.001 151.5C245.501 151.2 245.001 151.4 245.001 152.1C245.001 152.8 244.401 152.5 243.601 151.4C242.301 149.7 242.101 149.6 241.501 151.2C240.501 153.7 235.101 155.2 231.201 154.1C229.401 153.5 228.201 153.5 228.401 153.9C229.101 154.9 222.001 157.1 220.701 156.3C220.101 156 220.001 156.2 220.401 156.8C221.101 157.9 219.701 158.4 216.301 158.3C215.601 158.2 215.301 158.7 215.701 159.3C216.101 160 215.701 160.1 214.401 159.6C213.401 159.2 212.901 159.2 213.201 159.6C213.901 160.2 209.301 164.5 208.001 164.5C206.901 164.6 199.601 170 200.701 170C201.401 170 202.101 169.6 202.501 169.1C202.801 168.5 203.901 168.3 205.001 168.5C206.301 168.7 206.701 168.4 206.401 167.5C206.001 166.6 206.501 166.3 207.701 166.4C208.701 166.6 209.801 166.2 210.201 165.6C210.601 165 211.301 164.5 211.701 164.5C213.001 164.5 217.001 161.4 216.501 160.8C216.201 160.5 216.701 159.9 217.701 159.6C218.601 159.2 219.101 159.2 218.801 159.6C218.401 160 218.601 161.2 219.201 162.3C220.101 164 220.001 164.2 218.401 163.6C217.001 163.1 216.801 163.2 217.601 164C218.801 165.2 222.301 164.3 221.401 162.9C221.101 162.4 221.701 162.3 222.601 162.7C223.801 163.1 224.101 163 223.601 162.2C223.101 161.4 223.501 161.2 224.601 161.7C225.801 162.1 226.101 162 225.601 161.2C225.101 160.4 225.401 160.2 226.401 160.6C228.301 161.3 228.501 162.7 226.801 163.2C226.101 163.5 226.301 163.9 227.401 164.3C228.401 164.7 228.901 164.6 228.501 164C228.201 163.4 228.201 163 228.701 162.9C233.801 162.4 234.801 162.5 233.901 163.6C233.401 164.2 233.401 165.1 233.801 165.5C234.201 166 234.001 166 233.401 165.7C232.701 165.3 231.901 165.7 231.601 166.6C231.201 167.6 230.301 167.9 228.901 167.5C227.301 167 227.001 167.1 227.501 168C228.001 168.8 227.901 169.1 227.201 168.7C225.701 167.7 222.901 169 223.701 170.3C224.101 170.9 223.701 171.1 222.701 170.7C221.701 170.4 221.001 170.5 221.001 171C221.001 171.6 220.701 171.9 220.301 171.9C218.301 171.6 216.901 172.1 217.501 173C217.801 173.5 217.701 174 217.201 174C215.601 174 215.001 172.7 216.101 171.4C216.601 170.7 215.401 171 213.301 172.1C211.201 173.2 209.001 173.8 208.301 173.5C207.601 173.3 207.001 173.6 207.001 174.1C207.001 174.7 206.101 175 205.001 174.7C204.001 174.4 203.001 174.5 202.801 174.9C202.601 175.3 200.101 177 197.101 178.8C192.101 181.9 191.701 182 190.301 180.3C189.501 179.3 189.101 179 189.401 179.6C189.701 180.3 189.201 181.4 188.301 182.1C186.901 183.3 186.701 183.3 187.501 182.1C188.401 180.5 186.701 181.3 183.801 183.8C182.801 184.6 182.001 184.9 182.001 184.5C182.001 184 181.301 184.5 180.401 185.6C179.601 186.6 179.101 186.8 179.501 186C179.901 185.2 179.201 185.6 178.001 187C176.801 188.4 176.101 188.8 176.501 188C176.901 187 176.601 187.1 175.701 188.2C174.901 189.2 173.501 190 172.601 190C171.601 190 171.101 190.4 171.501 190.9C171.801 191.4 171.001 192.2 169.801 192.6C168.501 193 166.901 194.2 166.101 195.2C165.401 196.3 164.201 196.9 163.401 196.6C162.601 196.3 162.001 196.5 162.001 197.1C162.001 197.7 161.301 198 160.501 197.6C159.701 197.3 159.001 197.4 159.001 197.9C159.001 198.7 154.901 200.3 152.501 200.4C152.001 200.5 150.901 201.1 150.101 201.8C149.401 202.5 148.101 202.9 147.401 202.6C146.601 202.3 146.001 202.4 146.001 202.9C146.001 203.8 140.401 206.4 139.601 205.9C139.301 205.7 138.401 206.4 137.501 207.5C136.601 208.6 136.101 208.8 136.501 208C136.901 207 136.701 207.1 135.701 208.2C134.901 209.2 134.001 209.7 133.701 209.3C133.301 209 133.001 209.2 133.001 209.9C133.001 210.6 132.401 211 131.801 210.7C129.701 210.1 124.701 212.6 120.501 216.4C118.401 218.4 116.501 219.8 116.301 219.6C116.101 219.5 114.201 221.1 111.901 223.2C109.701 225.3 107.501 226.8 107.101 226.6C106.701 226.3 104.801 227.7 102.901 229.8L99.5009 233.5L103.001 230.5L106.501 227.5L103.601 230.7C102.001 232.5 100.301 233.7 99.9009 233.4C98.9009 232.8 91.0009 241 91.0009 242.6C91.0009 243.2 91.7009 244 92.5009 244.4C93.8009 244.9 93.8009 245.2 92.4009 246.9C91.5009 248 90.1009 248.6 89.4009 248.3C88.8009 248.1 86.0009 249.9 83.4009 252.4C80.8009 254.9 78.3009 257 77.8009 257C77.4009 257 77.0009 257.7 77.0009 258.5C77.0009 260.4 78.9009 260.4 79.6009 258.5C80.0009 257.7 80.6009 257.3 81.1009 257.6C81.6009 257.9 82.3009 257.4 82.6009 256.6C82.9009 255.7 83.6009 255.3 84.1009 255.6C84.6009 255.9 84.9009 255.8 84.8009 255.3C84.6009 254.9 84.9009 254.4 85.4009 254.3C85.9009 254.2 86.6009 253.6 87.0009 253C87.5009 252.2 87.9009 252.5 88.2009 253.8C88.6009 255.2 88.0009 256.2 86.4009 257.1C85.1009 257.8 84.0009 258.9 84.0009 259.6C84.0009 260.3 82.1009 262.3 79.7009 264.1C74.5009 268.2 73.0009 269.5 75.0009 268.6C75.8009 268.2 74.9009 269.3 73.1009 271.1C69.7009 274.2 68.4009 277.5 70.2009 278.6C70.7009 278.9 70.9009 278.8 70.8009 278.3C70.5009 277.6 71.5009 276.8 72.3009 277.1C74.8009 277.9 76.8009 277.6 78.3009 276.3C79.6009 275.1 80.3009 274.9 81.2009 275.8C82.0009 276.6 81.9009 277.1 80.7009 277.6C79.8009 277.9 79.0009 278.7 79.0009 279.3C79.0009 280.8 83.8009 276.1 84.5009 273.8C84.9009 272.8 87.2009 269.9 89.8009 267.4C92.4009 264.8 93.8009 263 93.0009 263.5C92.2009 263.9 93.2009 262.6 95.2009 260.6C99.4009 256.5 100.501 256.1 99.0009 259.2C98.4009 260.5 100.501 258.8 103.601 255.5C106.801 252.2 109.101 250.1 108.701 250.7C108.101 251.6 108.401 251.8 109.401 251.4C110.301 251.1 111.001 250.2 111.001 249.4C111.001 247.8 114.701 245.2 117.601 244.7C118.701 244.6 120.601 243.4 121.901 242.1C123.101 240.9 124.801 240.1 125.601 240.4C126.401 240.7 126.901 240.6 126.601 240.1C126.301 239.6 126.701 239 127.501 238.6C128.301 238.3 129.001 238.5 129.001 239.1C129.001 239.6 130.101 239.8 131.501 239.4C133.501 238.9 134.001 239.2 134.601 241.4C134.901 242.8 135.801 244 136.501 244C137.401 244 137.601 244.8 137.301 246.2L136.701 248.5L138.801 246.2C139.901 244.9 141.201 243.9 141.601 243.8C142.901 243.8 143.901 246.4 142.901 247.6C142.301 248.4 142.501 249.2 143.701 250.1C145.201 251.3 145.301 251.3 144.501 250C144.001 249 144.001 248.8 144.701 249.5C146.201 250.9 147.301 255 146.201 255C145.701 255 145.301 255.7 145.301 256.4C145.301 257.2 145.601 257.9 145.901 257.8C147.801 257.6 151.301 258.2 150.401 258.6C149.801 258.9 149.401 261 149.601 263.6C149.801 266.3 149.501 267.8 149.001 267.5C148.401 267.2 148.001 267.3 148.001 267.9C148.001 268.4 147.701 269.7 147.401 270.7C146.901 272.2 147.001 272.3 148.001 271C149.001 269.7 149.101 269.8 148.501 271.5C148.101 272.6 147.501 274.3 147.301 275.2C147.001 276.2 146.501 276.8 146.101 276.6C145.701 276.3 145.601 277.7 145.801 279.6C146.101 281.6 145.801 283 145.101 283C144.401 283 144.301 283.8 145.001 285.5C145.501 286.9 145.901 288.4 145.701 288.8C145.301 290.1 151.201 297 152.701 297C153.501 297 153.901 296.6 153.601 296.2C153.401 295.8 154.801 295.5 156.801 295.7C160.001 295.9 160.201 295.8 158.001 295.1C156.101 294.4 155.901 294.2 157.401 294.1C159.301 294 164.001 298.3 164.001 300.1C164.001 300.6 165.301 301.3 166.901 301.6C169.901 302.2 172.101 305.1 170.101 305.8C169.501 306 169.001 306.6 169.001 307.1C169.001 307.7 169.801 307.7 170.901 307C173.601 305.6 175.901 305.7 177.501 307.4C178.601 308.4 178.601 309 177.701 310C176.801 310.9 177.101 310.9 178.701 309.9C180.801 308.7 180.801 308.4 179.301 306.8C178.401 305.8 177.101 305 176.301 305C175.601 305 175.001 304.6 175.001 304.1C175.001 303.6 173.401 302.5 171.501 301.6C168.601 300.2 168.001 299.4 168.201 297.1C168.401 294.8 168.801 294.4 170.501 294.8C171.601 295.1 173.101 296.2 173.801 297.2C174.701 298.4 175.801 298.8 177.501 298.4C178.801 298.1 180.701 298.3 181.701 298.9C183.201 299.8 183.001 299.9 180.501 299.5C178.201 299.1 178.001 299.2 179.501 299.9C180.601 300.3 183.901 301.1 186.801 301.5C189.701 301.9 192.601 302.8 193.301 303.5C193.901 304.1 195.301 304.5 196.401 304.2C197.601 303.9 198.101 304.1 197.601 304.8C197.301 305.4 197.901 306.4 199.001 307C200.201 307.6 200.901 308.8 200.601 309.5C200.301 310.4 201.401 310.9 204.601 311.2C207.001 311.4 209.001 311.1 209.001 310.6C209.001 310.2 210.601 310 212.501 310.2C214.401 310.4 216.001 310.2 216.001 309.7C216.001 309.2 216.901 309 218.001 309.3C219.101 309.6 219.801 309.4 219.401 308.9C218.901 308.1 221.901 307.6 227.201 307.7C228.201 307.7 228.801 307.5 228.601 307.2C227.601 306.2 234.001 302 236.501 302C237.901 302 238.901 302.4 238.601 302.9C238.201 303.4 238.901 303.6 240.001 303.3C241.301 303 242.001 303.3 242.001 304.1C242.001 305.3 242.201 305.3 242.901 304.1C243.401 303.3 244.501 303 245.401 303.3C246.301 303.7 247.001 303.4 247.001 302.9C247.001 302.3 247.901 302 249.001 302.3C250.301 302.6 250.801 302.4 250.301 301.7C249.901 301.1 250.501 300.9 251.801 301.2C253.001 301.6 254.001 301.4 254.001 300.8C254.001 300.3 254.601 300.2 255.301 300.7C255.901 301.1 257.301 301.3 258.401 301.1C259.501 301 260.001 301.3 259.601 301.9C259.201 302.5 259.601 303 260.501 303C261.401 303 261.801 302.5 261.501 302C261.101 301.4 262.001 301 263.401 301C266.401 301 266.701 301.8 264.401 303.5C262.801 304.6 262.801 304.7 264.401 305.3C265.301 305.7 266.001 305.5 266.001 305C266.001 304.4 266.501 304 267.101 304C267.601 304 267.801 304.4 267.501 305C267.201 305.5 267.401 306 267.901 306C268.501 306 269.001 305.5 269.001 304.9C269.001 304.1 269.401 304.1 270.301 304.8C271.001 305.4 272.901 305.8 274.501 305.6C276.201 305.4 278.401 305.2 279.401 305.1C280.501 305.1 281.001 304.7 280.701 304.3C280.301 304 280.601 303 281.201 302.1C282.001 301.1 281.601 301.2 280.201 302.4C279.001 303.5 278.001 303.9 278.001 303.4C278.001 302.9 277.501 303.2 277.001 304C276.301 305.1 275.801 305.2 274.901 304.3C274.301 303.7 273.101 303.4 272.401 303.7C271.601 304 271.001 303.7 271.001 303.1C271.001 302.5 270.701 302.1 270.301 302.1C267.601 302.5 266.901 301.8 267.401 299C267.601 297.3 267.401 296.2 266.901 296.6C266.401 296.9 266.001 296 266.001 294.7C266.001 292.7 265.401 292.1 263.101 291.8C261.301 291.5 260.301 291.8 260.701 292.4C261.101 292.9 260.601 293.1 259.701 292.7C258.601 292.3 257.701 292.7 257.001 293.9C256.001 295.9 252.801 297.1 251.401 296.1C250.301 295.3 249.701 289 250.801 289C251.201 289 251.301 286.9 251.101 284.4C250.901 281.8 250.501 280.1 250.101 280.6C249.801 281.1 247.801 282.8 245.701 284.4C242.301 286.9 242.001 287.5 242.501 290.2C243.001 292.1 242.801 293 242.201 292.6C241.701 292.3 240.401 293 239.401 294.3C238.101 295.7 238.001 296.1 239.001 295.5C239.901 294.9 239.501 295.5 238.101 296.7C236.801 297.8 235.001 298.6 234.201 298.2C233.301 297.9 232.901 298.1 233.301 298.6C233.601 299.2 232.401 299.4 230.301 299.2C227.701 298.9 226.901 299.1 227.501 300C228.601 301.7 224.201 299.3 221.301 296.6C219.501 294.8 219.201 293.8 219.701 290.1C220.101 286.9 220.001 285.9 219.201 286.4C218.501 286.8 218.001 286.5 218.001 285.5C218.001 284.6 218.401 284.1 218.801 284.4C219.301 284.7 219.701 284.3 219.701 283.5C219.701 282.7 219.301 282 218.801 282C218.401 282 218.001 281.1 218.001 280C218.001 277.5 229.601 265.6 231.001 266.5C231.601 266.8 232.001 266.6 232.001 266C232.001 265.3 232.701 265.1 233.601 265.4C234.601 265.8 234.901 265.6 234.401 264.8C233.901 264.1 234.501 263.9 236.401 264.2C237.901 264.5 238.801 264.5 238.601 264.2C238.301 263.9 239.301 262.6 240.801 261.2C242.301 259.9 242.801 259.1 242.001 259.5C241.201 259.8 241.401 259.4 242.501 258.6C243.601 257.7 245.001 257.2 245.801 257.5C246.601 257.8 246.801 257.5 246.401 256.8C245.901 256.1 246.401 255.9 247.801 256.2C249.001 256.6 250.001 256.4 250.001 255.9C250.001 255.5 250.701 255.3 251.601 255.7C253.401 256.4 258.201 254.1 257.401 252.8C257.101 252.4 257.601 252 258.501 252C259.401 252 259.801 252.4 259.501 253C259.201 253.5 259.501 254 260.301 254C261.101 254 262.101 255.1 262.401 256.5C262.801 257.9 263.501 259 264.101 259C264.701 259 264.901 259.4 264.601 259.8C263.901 261 268.401 260.8 269.201 259.6C269.601 259.1 269.401 257.8 268.901 256.8C268.401 255.8 268.201 255 268.601 255C268.901 255 268.401 254.2 267.301 253.2C266.301 252.3 265.901 251.7 266.501 252C267.101 252.3 266.701 251.7 265.701 250.8C263.001 248.3 264.101 245.1 269.001 240.6C271.201 238.6 273.001 236.7 273.001 236.2C273.001 235.8 274.601 234.6 276.501 233.6C280.101 231.6 283.001 227.4 282.201 225.2C282.001 224.5 281.501 224.2 281.101 224.5C280.601 224.7 280.501 223.8 280.801 222.4C281.101 220.6 281.701 220.1 283.101 220.5C284.601 221 284.801 220.7 284.401 218.5C284.101 216.9 284.401 216 285.201 216C285.901 216 287.601 214.6 289.001 212.9C291.501 209.9 296.001 206.6 294.601 208.9C294.201 209.5 295.401 209 297.301 207.7C300.201 205.8 300.601 205.2 299.901 203.2C299.401 201.9 299.401 201.1 299.901 201.4C300.401 201.7 301.001 201 301.301 199.9C301.601 198.7 302.301 198.1 302.901 198.5C303.501 198.8 304.001 198.7 304.001 198.2C304.001 197.3 311.601 192 313.001 192C313.501 192 314.001 191.6 314.201 191.1C314.401 190.6 315.201 190 316.001 189.8C316.801 189.6 317.901 189 318.301 188.5C318.701 187.9 318.901 189.1 318.601 191L318.101 194.4L321.101 191.2C322.801 189.4 324.601 188 325.301 188C326.001 188 325.901 187.6 325.001 187C323.701 186.2 323.701 186 325.201 186C326.101 186 327.101 186.5 327.301 187C327.601 187.6 327.701 187.5 327.601 186.8C327.401 186 326.001 185.6 324.001 185.7C320.901 185.8 320.801 185.7 321.301 182.4C321.801 179.3 321.701 179.1 320.301 180.5C319.401 181.4 318.101 181.9 317.301 181.6C316.501 181.3 316.201 181.5 316.501 182C317.001 182.9 316.401 183.2 314.401 182.9C314.101 182.9 313.201 183.7 312.301 184.7C311.501 185.8 311.101 185.9 311.501 185C311.901 184.2 311.301 184.5 310.301 185.8L308.401 188.1V185.6C308.401 184.3 308.801 183.4 309.201 183.6C309.601 183.9 310.001 183.7 310.001 183.2C310.001 182.7 310.901 182 312.001 181.7C313.101 181.4 314.001 180.4 314.001 179.5C314.001 178.4 314.501 178 315.501 178.4C316.301 178.7 317.001 178.5 317.001 177.9C317.001 176.6 323.801 173.7 325.001 174.5C325.601 174.9 326.001 174.6 326.001 174C326.001 173.3 326.601 173 327.401 173.3C328.201 173.6 329.001 173.4 329.201 172.8C329.401 172.2 331.001 171.7 332.701 171.6C334.401 171.6 335.601 171.3 335.401 171.1C334.901 170.5 341.201 167.6 342.301 167.9C342.701 167.9 343.301 167.4 343.601 166.6C343.901 165.7 344.801 165.4 345.701 165.7C346.801 166.1 347.101 165.9 346.601 165.2C346.201 164.5 346.401 164 346.901 164C347.501 164 348.001 164.7 348.001 165.6C348.001 168.8 350.401 166.2 350.601 162.7C351.001 158.8 350.301 158.4 344.301 158.9C342.801 159 342.001 158.5 342.001 157.5C342.001 156.6 341.501 156.2 340.901 156.6C340.201 157 340.001 156.4 340.201 154.9C340.401 153.3 339.701 151.9 338.201 150.7C337.001 149.7 336.301 148.3 336.601 147.7C337.001 147 335.501 148.1 333.401 150.1C328.801 154.4 326.001 156 323.001 156C321.101 156 320.801 155.5 321.201 153.2C321.601 150.6 321.401 150.4 319.201 150.8C317.301 151.2 316.901 151 317.501 150C318.001 149.1 317.901 148.9 317.201 149.4C316.601 149.8 315.101 149.6 314.001 149C312.401 148.1 312.201 148.2 312.601 149.5C313.201 151 312.801 151.1 306.301 151.4C304.201 151.5 302.601 152.8 301.701 155.2C301.401 156.2 300.601 157 300.101 157C299.601 157 299.301 157.9 299.501 159C299.701 160.1 299.401 161.3 298.801 161.6C298.101 162.1 298.001 161.8 298.501 160.9C299.201 159.7 299.101 159.7 297.801 160.8C296.901 161.5 296.301 162.9 296.501 163.8C296.701 164.7 296.901 165.9 296.901 166.3C297.001 166.8 297.501 166.8 298.001 166.5C300.101 165.2 296.801 170.6 294.601 172C293.301 172.8 290.701 174.6 288.601 175.9C286.301 177.3 285.101 178.8 285.401 179.6C286.001 181.3 284.101 186 282.801 186C282.301 186 282.201 186.4 282.501 187C282.901 187.6 281.701 188 279.601 188C276.601 188 276.201 187.7 276.501 186C277.001 183.6 273.101 179.1 272.101 180.8C271.801 181.4 269.101 181.7 266.301 181.6C263.101 181.4 261.301 181.7 261.701 182.3C262.001 182.9 261.001 183.1 259.201 182.8C257.201 182.5 255.901 182.8 255.601 183.7C254.601 186.2 252.101 185.2 252.601 182.5C252.801 181.1 252.601 180 252.001 180C251.401 180 251.201 180.4 251.501 181C251.801 181.5 251.501 182 250.701 182C246.901 182 248.401 178.7 255.301 171.8C259.301 167.8 262.801 164.7 263.301 164.8C263.701 164.9 264.001 164.5 264.001 163.9C264.001 163.3 264.601 163 265.401 163.3C267.101 164 269.301 161.7 268.201 160.5C267.801 160 268.101 160 268.801 160.4C269.501 160.8 270.001 160.6 270.001 159.9C270.001 159.2 270.301 158.9 270.601 159.3C270.901 159.6 272.101 159 273.301 158C274.401 156.9 275.701 156.3 276.201 156.6C276.601 156.9 277.001 156.6 277.001 156C277.001 155.4 277.501 155.2 278.201 155.6C278.801 156 279.001 155.9 278.701 155.3C278.101 154.4 282.701 149.2 283.601 149.7C283.801 149.9 285.001 150 286.301 150C287.901 150 288.101 149.7 287.101 149.1C286.401 148.6 286.001 147.8 286.401 147.2C286.701 146.6 286.101 145.8 284.901 145.5C283.201 144.9 283.001 144.6 284.101 143.9C285.201 143.2 285.201 143 283.901 143C283.001 143 281.901 144 281.501 145.2C281.101 146.6 280.701 147 280.301 146.2C280.101 145.6 279.401 145.2 279.001 145.5C278.501 145.8 278.501 144.6 279.001 142.9C279.501 141.2 279.901 139.5 279.801 139.1C279.801 138.8 279.901 138.3 280.001 138C280.401 136.9 280.801 134 280.501 134C280.401 134 279.701 134.7 279.001 135.5ZM201.601 185.7C201.201 186.5 200.401 187 199.701 186.7C198.901 186.4 197.801 187.1 197.201 188.1C196.501 189.1 195.301 190 194.501 190C193.701 190 192.201 190.9 191.301 192C189.201 194.5 186.801 194.7 187.701 192.3C188.201 191.2 188.001 190.9 187.101 191.4C186.301 192 186.401 191.2 187.401 189.1C188.301 187.4 189.301 186 189.601 186C189.901 186 189.801 186.4 189.501 187C189.201 187.6 189.601 187.7 190.401 187.4C191.301 187.1 191.801 186.4 191.501 186C190.901 185 193.901 183.8 195.101 184.6C195.601 184.9 195.901 184.6 195.801 183.9C195.601 183 196.501 182.6 198.301 182.6C199.801 182.7 201.101 182.2 201.101 181.6C201.201 181 201.401 181.3 201.701 182.3C202.001 183.3 201.901 184.8 201.601 185.7ZM210.501 190.1C210.501 190.9 209.901 191.4 209.201 191.2C208.501 191.1 207.701 191.7 207.401 192.5C207.101 193.3 206.401 193.7 205.901 193.4C205.401 193.1 205.001 193.6 205.001 194.4C205.001 195.3 204.401 196 203.801 196C203.101 196.1 200.901 197.4 199.001 199C195.001 202.5 193.001 202.8 193.001 200C193.001 198.2 194.001 197.5 196.301 197.9C196.701 197.9 197.001 197.3 197.001 196.4C197.001 195.6 197.401 195.2 198.001 195.5C198.501 195.8 198.701 195.5 198.401 194.7C197.701 192.8 200.001 191.1 203.801 190.8C205.501 190.7 207.201 190 207.501 189.2C208.101 187.5 210.501 188.2 210.501 190.1ZM233.001 204.3C233.001 205.2 232.501 206 231.901 206.2C231.001 206.5 231.001 207.2 231.901 208.8C234.101 212.8 230.701 210.9 228.301 206.6C226.101 202.9 225.401 201 226.601 202.3C227.001 202.6 227.901 202.3 228.701 201.5C229.901 200.2 230.301 200.2 231.601 201.4C232.401 202.2 233.001 203.5 233.001 204.3ZM260.401 203.2C260.101 203.6 260.801 204 262.001 204C263.201 204 263.801 204.4 263.501 205C263.201 205.5 263.501 206 264.201 206.1C264.901 206.1 264.601 206.5 263.501 207C261.901 207.7 261.801 207.9 263.201 207.9C264.101 208 265.101 207.6 265.501 207C265.801 206.5 266.701 206.3 267.501 206.6C268.201 206.9 269.301 206.2 270.001 205.1C270.601 203.9 271.501 203 272.101 203C272.701 203 272.801 203.4 272.501 204C272.201 204.5 272.601 205 273.401 205C274.301 205 275.001 205.4 275.001 205.9C275.001 207.2 278.901 207 281.701 205.7C283.001 205.1 284.301 204.9 284.601 205.3C285.601 206.3 282.601 208.7 281.101 208.2C280.301 207.9 280.001 208.2 280.401 208.9C280.901 209.6 280.501 209.8 279.401 209.3C278.201 208.9 277.901 209 278.401 209.8C278.801 210.6 278.601 210.8 277.701 210.4C276.901 210.1 275.901 210.4 275.401 211.1C274.901 211.9 275.101 212.1 276.101 211.5C276.901 211.1 276.601 211.6 275.501 212.7C274.401 213.7 273.101 214.7 272.701 214.8C272.301 214.8 271.001 215.9 270.001 217.2C268.901 218.5 268.101 219.2 268.001 218.7C268.001 218.3 267.101 218.9 266.001 220C264.401 221.6 263.701 221.8 262.601 220.8C261.601 219.8 261.501 219.3 262.601 218.3C263.301 217.6 264.301 217 264.901 217C265.501 217 266.501 216 267.101 214.7C268.201 212.8 268.101 212.7 266.801 213.7C266.001 214.4 265.001 214.7 264.601 214.3C264.201 213.9 263.601 214.1 263.201 214.7C262.701 215.5 262.001 215.6 261.001 214.9C259.701 214.1 259.801 213.7 261.701 212.1C263.801 210.3 263.901 210.2 262.001 209.7C260.601 209.4 260.001 209.8 259.801 211.4C259.601 212.5 258.901 213.5 258.101 213.5C257.301 213.5 256.601 214.4 256.401 215.4C256.301 216.4 255.601 217.6 254.901 218C254.201 218.5 254.001 219.8 254.401 221.3C255.101 224.3 253.301 226.1 250.201 225.3C248.001 224.8 247.001 221 249.101 221C249.601 221 249.901 220.6 249.601 220.1C249.301 219.7 249.901 218.2 251.001 217C252.101 215.7 253.001 213.9 253.001 213C253.001 211.8 254.101 211 256.201 210.6C260.501 209.7 259.401 209.2 254.301 209.8C251.901 210 250.301 210.6 250.501 211.1C250.801 211.6 249.901 212.2 248.501 212.6C247.201 212.9 246.301 213.6 246.601 214.1C246.901 214.6 245.801 215 244.101 215C240.401 215 239.401 213.7 241.801 211.9C243.301 210.7 243.401 210.7 242.501 212C242.001 212.9 242.301 212.7 243.301 211.7C244.201 210.6 245.001 210.2 245.001 210.6C245.001 211.1 245.701 210.5 246.501 209.3C247.401 208 248.701 207.3 249.501 207.6C250.801 208.1 251.501 207 251.101 204.8C251.101 204.4 251.701 204.3 252.501 204.6C253.301 205 254.001 204.7 254.001 204C254.001 203.4 254.501 203.2 255.001 203.5C255.601 203.8 256.001 203.6 256.001 203.1C256.001 202.5 257.101 202.1 258.401 202.2C259.801 202.3 260.601 202.8 260.401 203.2ZM139.601 239.3C141.101 238.8 141.601 240.5 140.201 241.4C138.601 242.4 135.001 240.8 135.001 239.1C135.001 237.7 135.201 237.7 136.001 239C136.801 240.3 137.001 240.2 137.101 238.5C137.201 236.9 137.301 236.8 137.701 238.2C137.901 239.2 138.701 239.7 139.601 239.3ZM153.401 252.6C155.101 253.3 155.401 254.8 154.201 256.8C153.501 257.7 152.701 257.8 150.901 257C148.701 256 148.601 256 150.801 256.4C152.001 256.6 153.001 256.4 153.001 255.9C153.001 255.4 152.301 255 151.501 255C149.901 255 149.501 253.8 150.701 252.7C151.501 251.9 151.501 251.9 153.401 252.6Z",
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..653066c
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,9455 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-rotate-x: rotateX(0);
+      --tw-rotate-y: rotateY(0);
+      --tw-rotate-z: rotateZ(0);
+      --tw-skew-x: skewX(0);
+      --tw-skew-y: skewY(0);
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --angle: 0deg;
+    }
+  }
+}
+
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --color-red-50: oklch(.971 .013 17.38);
+    --color-red-100: oklch(.936 .032 17.717);
+    --color-red-400: oklch(.704 .191 22.216);
+    --color-red-500: oklch(.637 .237 25.331);
+    --color-red-600: oklch(.577 .245 27.325);
+    --color-red-700: oklch(.505 .213 27.518);
+    --color-orange-50: oklch(.98 .016 73.684);
+    --color-orange-100: oklch(.954 .038 75.164);
+    --color-orange-200: oklch(.901 .076 70.697);
+    --color-orange-300: oklch(.837 .128 66.29);
+    --color-orange-400: oklch(.75 .183 55.934);
+    --color-orange-500: oklch(.705 .213 47.604);
+    --color-orange-600: oklch(.646 .222 41.116);
+    --color-orange-700: oklch(.553 .195 38.402);
+    --color-amber-50: oklch(.987 .022 95.277);
+    --color-amber-500: oklch(.769 .188 70.08);
+    --color-amber-600: oklch(.666 .179 58.318);
+    --color-amber-700: oklch(.555 .163 48.998);
+    --color-amber-800: oklch(.473 .137 46.201);
+    --color-yellow-100: oklch(.973 .071 103.193);
+    --color-yellow-200: oklch(.945 .129 101.54);
+    --color-yellow-300: oklch(.905 .182 98.111);
+    --color-yellow-400: oklch(.852 .199 91.936);
+    --color-yellow-500: oklch(.795 .184 86.047);
+    --color-yellow-600: oklch(.681 .162 75.834);
+    --color-yellow-800: oklch(.476 .114 61.907);
+    --color-green-50: oklch(.982 .018 155.826);
+    --color-green-100: oklch(.962 .044 156.743);
+    --color-green-200: oklch(.925 .084 155.995);
+    --color-green-400: oklch(.792 .209 151.711);
+    --color-green-500: oklch(.723 .219 149.579);
+    --color-green-600: oklch(.627 .194 149.214);
+    --color-green-700: oklch(.527 .154 150.069);
+    --color-green-900: oklch(.393 .095 152.535);
+    --color-emerald-100: oklch(.95 .052 163.051);
+    --color-emerald-500: oklch(.696 .17 162.48);
+    --color-emerald-600: oklch(.596 .145 163.225);
+    --color-teal-500: oklch(.704 .14 182.503);
+    --color-cyan-500: oklch(.715 .143 215.221);
+    --color-blue-50: oklch(.97 .014 254.604);
+    --color-blue-100: oklch(.932 .032 255.585);
+    --color-blue-200: oklch(.882 .059 254.128);
+    --color-blue-300: oklch(.809 .105 251.813);
+    --color-blue-400: oklch(.707 .165 254.624);
+    --color-blue-500: oklch(.623 .214 259.815);
+    --color-blue-600: oklch(.546 .245 262.881);
+    --color-blue-700: oklch(.488 .243 264.376);
+    --color-indigo-100: oklch(.93 .034 272.788);
+    --color-indigo-500: oklch(.585 .233 277.117);
+    --color-indigo-600: oklch(.511 .262 276.966);
+    --color-purple-50: oklch(.977 .014 308.299);
+    --color-purple-100: oklch(.946 .033 307.174);
+    --color-purple-200: oklch(.902 .063 306.703);
+    --color-purple-300: oklch(.827 .119 306.383);
+    --color-purple-400: oklch(.714 .203 305.504);
+    --color-purple-500: oklch(.627 .265 303.9);
+    --color-purple-600: oklch(.558 .288 302.321);
+    --color-purple-700: oklch(.496 .265 301.924);
+    --color-pink-50: oklch(.971 .014 343.198);
+    --color-pink-100: oklch(.948 .028 342.258);
+    --color-pink-200: oklch(.899 .061 343.231);
+    --color-pink-300: oklch(.823 .12 346.018);
+    --color-pink-400: oklch(.718 .202 349.761);
+    --color-pink-500: oklch(.656 .241 354.308);
+    --color-pink-600: oklch(.592 .249 .584);
+    --color-rose-500: oklch(.645 .246 16.439);
+    --color-rose-600: oklch(.586 .253 17.585);
+    --color-gray-50: oklch(.985 .002 247.839);
+    --color-gray-100: oklch(.967 .003 264.542);
+    --color-gray-200: oklch(.928 .006 264.531);
+    --color-gray-300: oklch(.872 .01 258.338);
+    --color-gray-400: oklch(.707 .022 261.325);
+    --color-gray-500: oklch(.551 .027 264.364);
+    --color-gray-600: oklch(.446 .03 256.802);
+    --color-gray-700: oklch(.373 .034 259.733);
+    --color-gray-800: oklch(.278 .033 256.848);
+    --color-gray-900: oklch(.21 .034 264.665);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: .025em;
+    --tracking-wider: .05em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-relaxed: 1.625;
+    --radius-xs: .125rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --drop-shadow-2xl: 0 25px 25px #00000026;
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(--font-sans--font-variation-settings);
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+  }
+}
+
+@layer base {
+  *, :after, :before, ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+    color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    ::placeholder {
+      color: color-mix(in oklab, currentColor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  h1, h2, h3, h4, h5, h6, .font-poppins {
+    font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  .heading-dynamic {
+    font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  .text-medium-semibold .medium {
+    font-weight: 500;
+  }
+
+  .text-medium-semibold .semibold {
+    font-weight: 600;
+  }
+
+  .text-gradient-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    -webkit-text-fill-color: transparent;
+    color: #0000;
+    background-clip: text;
+  }
+
+  .text-emphasis {
+    font-style: italic;
+    position: relative;
+  }
+
+  .text-emphasis:after {
+    content: "";
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    opacity: .6;
+    transform-origin: 0;
+    width: 100%;
+    height: 2px;
+    transition: transform .3s;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: scaleX(0);
+  }
+
+  .text-emphasis:hover:after {
+    transform: scaleX(1);
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
+    font-size: var(--text-2xl);
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
+    font-size: var(--text-xl);
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
+    font-size: var(--text-base);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.6;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
+    font-size: var(--text-base);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+}
+
+@layer utilities {
+  .\@container\/card-header {
+    container: card-header / inline-size;
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .static {
+    position: static;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  .-inset-4 {
+    inset: calc(var(--spacing) * -4);
+  }
+
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
+  .inset-0\.5 {
+    inset: calc(var(--spacing) * .5);
+  }
+
+  .inset-1 {
+    inset: calc(var(--spacing) * 1);
+  }
+
+  .inset-3 {
+    inset: calc(var(--spacing) * 3);
+  }
+
+  .inset-5 {
+    inset: calc(var(--spacing) * 5);
+  }
+
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
+
+  .-top-2 {
+    top: calc(var(--spacing) * -2);
+  }
+
+  .-top-3 {
+    top: calc(var(--spacing) * -3);
+  }
+
+  .-top-4 {
+    top: calc(var(--spacing) * -4);
+  }
+
+  .-top-6 {
+    top: calc(var(--spacing) * -6);
+  }
+
+  .-top-8 {
+    top: calc(var(--spacing) * -8);
+  }
+
+  .-top-px {
+    top: -1px;
+  }
+
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+
+  .top-0\.5 {
+    top: calc(var(--spacing) * .5);
+  }
+
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
+
+  .top-1\/2 {
+    top: 50%;
+  }
+
+  .top-1\/3 {
+    top: 33.3333%;
+  }
+
+  .top-1\/4 {
+    top: 25%;
+  }
+
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
+
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+
+  .top-3\/4 {
+    top: 75%;
+  }
+
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
+
+  .top-6 {
+    top: calc(var(--spacing) * 6);
+  }
+
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
+
+  .top-10 {
+    top: calc(var(--spacing) * 10);
+  }
+
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
+  .top-16 {
+    top: calc(var(--spacing) * 16);
+  }
+
+  .top-20 {
+    top: calc(var(--spacing) * 20);
+  }
+
+  .top-24 {
+    top: calc(var(--spacing) * 24);
+  }
+
+  .top-32 {
+    top: calc(var(--spacing) * 32);
+  }
+
+  .top-40 {
+    top: calc(var(--spacing) * 40);
+  }
+
+  .top-48 {
+    top: calc(var(--spacing) * 48);
+  }
+
+  .top-\[-1px\] {
+    top: -1px;
+  }
+
+  .top-\[-6rem\] {
+    top: -6rem;
+  }
+
+  .top-\[17px\] {
+    top: 17px;
+  }
+
+  .top-\[49px\] {
+    top: 49px;
+  }
+
+  .top-\[50\%\] {
+    top: 50%;
+  }
+
+  .top-\[65px\] {
+    top: 65px;
+  }
+
+  .top-\[100px\] {
+    top: 100px;
+  }
+
+  .top-\[110px\] {
+    top: 110px;
+  }
+
+  .top-\[120px\] {
+    top: 120px;
+  }
+
+  .top-full {
+    top: 100%;
+  }
+
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
+
+  .-right-2 {
+    right: calc(var(--spacing) * -2);
+  }
+
+  .-right-3 {
+    right: calc(var(--spacing) * -3);
+  }
+
+  .-right-6 {
+    right: calc(var(--spacing) * -6);
+  }
+
+  .-right-8 {
+    right: calc(var(--spacing) * -8);
+  }
+
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+
+  .right-0\.5 {
+    right: calc(var(--spacing) * .5);
+  }
+
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
+
+  .right-1\/3 {
+    right: 33.3333%;
+  }
+
+  .right-1\/4 {
+    right: 25%;
+  }
+
+  .right-1\/6 {
+    right: 16.6667%;
+  }
+
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+
+  .right-5 {
+    right: calc(var(--spacing) * 5);
+  }
+
+  .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
+
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
+
+  .right-10 {
+    right: calc(var(--spacing) * 10);
+  }
+
+  .right-12 {
+    right: calc(var(--spacing) * 12);
+  }
+
+  .right-16 {
+    right: calc(var(--spacing) * 16);
+  }
+
+  .right-20 {
+    right: calc(var(--spacing) * 20);
+  }
+
+  .right-32 {
+    right: calc(var(--spacing) * 32);
+  }
+
+  .right-\[calc$50\%-100px-8\.25rem$\] {
+    right: calc(50% - 100px - 8.25rem);
+  }
+
+  .-bottom-0\.5 {
+    bottom: calc(var(--spacing) * -.5);
+  }
+
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
+
+  .-bottom-2 {
+    bottom: calc(var(--spacing) * -2);
+  }
+
+  .-bottom-3 {
+    bottom: calc(var(--spacing) * -3);
+  }
+
+  .-bottom-4 {
+    bottom: calc(var(--spacing) * -4);
+  }
+
+  .-bottom-8 {
+    bottom: calc(var(--spacing) * -8);
+  }
+
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+
+  .bottom-1 {
+    bottom: calc(var(--spacing) * 1);
+  }
+
+  .bottom-1\/2 {
+    bottom: 50%;
+  }
+
+  .bottom-1\/3 {
+    bottom: 33.3333%;
+  }
+
+  .bottom-1\/4 {
+    bottom: 25%;
+  }
+
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+
+  .bottom-8 {
+    bottom: calc(var(--spacing) * 8);
+  }
+
+  .bottom-10 {
+    bottom: calc(var(--spacing) * 10);
+  }
+
+  .bottom-12 {
+    bottom: calc(var(--spacing) * 12);
+  }
+
+  .bottom-20 {
+    bottom: calc(var(--spacing) * 20);
+  }
+
+  .bottom-32 {
+    bottom: calc(var(--spacing) * 32);
+  }
+
+  .bottom-\[-6rem\] {
+    bottom: -6rem;
+  }
+
+  .-left-1 {
+    left: calc(var(--spacing) * -1);
+  }
+
+  .-left-6 {
+    left: calc(var(--spacing) * -6);
+  }
+
+  .-left-8 {
+    left: calc(var(--spacing) * -8);
+  }
+
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .left-0\.5 {
+    left: calc(var(--spacing) * .5);
+  }
+
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
+
+  .left-1\/2 {
+    left: 50%;
+  }
+
+  .left-1\/3 {
+    left: 33.3333%;
+  }
+
+  .left-1\/4 {
+    left: 25%;
+  }
+
+  .left-1\/6 {
+    left: 16.6667%;
+  }
+
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+
+  .left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+
+  .left-3\/4 {
+    left: 75%;
+  }
+
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+
+  .left-6 {
+    left: calc(var(--spacing) * 6);
+  }
+
+  .left-8 {
+    left: calc(var(--spacing) * 8);
+  }
+
+  .left-10 {
+    left: calc(var(--spacing) * 10);
+  }
+
+  .left-12 {
+    left: calc(var(--spacing) * 12);
+  }
+
+  .left-20 {
+    left: calc(var(--spacing) * 20);
+  }
+
+  .left-40 {
+    left: calc(var(--spacing) * 40);
+  }
+
+  .left-\[50\%\] {
+    left: 50%;
+  }
+
+  .left-\[calc$50\%-100px-8\.25rem$\] {
+    left: calc(50% - 100px - 8.25rem);
+  }
+
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
+
+  .z-0 {
+    z-index: 0;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-15 {
+    z-index: 15;
+  }
+
+  .z-20 {
+    z-index: 20;
+  }
+
+  .z-30 {
+    z-index: 30;
+  }
+
+  .z-40 {
+    z-index: 40;
+  }
+
+  .z-50 {
+    z-index: 50;
+  }
+
+  .order-1 {
+    order: 1;
+  }
+
+  .order-2 {
+    order: 2;
+  }
+
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  .row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  @media (width >= 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (width >= 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
+  .-m-2 {
+    margin: calc(var(--spacing) * -2);
+  }
+
+  .m-0\.5 {
+    margin: calc(var(--spacing) * .5);
+  }
+
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
+  .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
+
+  .-mx-5 {
+    margin-inline: calc(var(--spacing) * -5);
+  }
+
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+
+  .mx-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
+
+  .mx-auto {
+    margin-inline: auto;
+  }
+
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+
+  .my-20 {
+    margin-block: calc(var(--spacing) * 20);
+  }
+
+  .-mt-3 {
+    margin-top: calc(var(--spacing) * -3);
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
+
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
+
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+
+  .mt-48 {
+    margin-top: calc(var(--spacing) * 48);
+  }
+
+  .mt-auto {
+    margin-top: auto;
+  }
+
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * .5);
+  }
+
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
+
+  .mb-20 {
+    margin-bottom: calc(var(--spacing) * 20);
+  }
+
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
+  .ml-auto {
+    margin-left: auto;
+  }
+
+  .box-border {
+    box-sizing: border-box;
+  }
+
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .field-sizing-content {
+    field-sizing: content;
+  }
+
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4 / 3;
+  }
+
+  .aspect-square {
+    aspect-ratio: 1;
+  }
+
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
+
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+
+  .size-\[28px\] {
+    width: 28px;
+    height: 28px;
+  }
+
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
+
+  .h-0\.5 {
+    height: calc(var(--spacing) * .5);
+  }
+
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
+
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
+  .h-18 {
+    height: calc(var(--spacing) * 18);
+  }
+
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
+
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
+
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
+
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
+
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
+  .h-72 {
+    height: calc(var(--spacing) * 72);
+  }
+
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
+
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
+
+  .h-120 {
+    height: calc(var(--spacing) * 120);
+  }
+
+  .h-\[14px\] {
+    height: 14px;
+  }
+
+  .h-\[17\.5px\] {
+    height: 17.5px;
+  }
+
+  .h-\[20px\] {
+    height: 20px;
+  }
+
+  .h-\[32px\] {
+    height: 32px;
+  }
+
+  .h-\[35px\] {
+    height: 35px;
+  }
+
+  .h-\[40px\] {
+    height: 40px;
+  }
+
+  .h-\[41px\] {
+    height: 41px;
+  }
+
+  .h-\[44px\] {
+    height: 44px;
+  }
+
+  .h-\[48px\] {
+    height: 48px;
+  }
+
+  .h-\[49px\] {
+    height: 49px;
+  }
+
+  .h-\[50px\] {
+    height: 50px;
+  }
+
+  .h-\[70px\] {
+    height: 70px;
+  }
+
+  .h-\[85vh\] {
+    height: 85vh;
+  }
+
+  .h-\[214px\] {
+    height: 214px;
+  }
+
+  .h-\[380px\] {
+    height: 380px;
+  }
+
+  .h-\[400px\] {
+    height: 400px;
+  }
+
+  .h-\[420px\] {
+    height: 420px;
+  }
+
+  .h-\[480px\] {
+    height: 480px;
+  }
+
+  .h-\[500px\] {
+    height: 500px;
+  }
+
+  .h-\[510px\] {
+    height: 510px;
+  }
+
+  .h-\[520px\] {
+    height: 520px;
+  }
+
+  .h-\[555px\] {
+    height: 555px;
+  }
+
+  .h-\[600px\] {
+    height: 600px;
+  }
+
+  .h-\[767px\] {
+    height: 767px;
+  }
+
+  .h-\[calc$100\%-1px$\] {
+    height: calc(100% - 1px);
+  }
+
+  .h-\[var$--radix-select-trigger-height$\] {
+    height: var(--radix-select-trigger-height);
+  }
+
+  .h-auto {
+    height: auto;
+  }
+
+  .h-fit {
+    height: fit-content;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .h-px {
+    height: 1px;
+  }
+
+  .max-h-$--radix-select-content-available-height$ {
+    max-height: var(--radix-select-content-available-height);
+  }
+
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
+
+  .max-h-full {
+    max-height: 100%;
+  }
+
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
+
+  .min-h-\[2\.5rem\] {
+    min-height: 2.5rem;
+  }
+
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
+
+  .min-h-\[48px\] {
+    min-height: 48px;
+  }
+
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
+
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
+  .w-0\.5 {
+    width: calc(var(--spacing) * .5);
+  }
+
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
+
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+
+  .w-1\/2 {
+    width: 50%;
+  }
+
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
+
+  .w-2\/3 {
+    width: 66.6667%;
+  }
+
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+
+  .w-3\/4 {
+    width: 75%;
+  }
+
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
+
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
+
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
+
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
+
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
+
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
+
+  .w-120 {
+    width: calc(var(--spacing) * 120);
+  }
+
+  .w-\[13\.703px\] {
+    width: 13.703px;
+  }
+
+  .w-\[35px\] {
+    width: 35px;
+  }
+
+  .w-\[38px\] {
+    width: 38px;
+  }
+
+  .w-\[86\.047px\] {
+    width: 86.047px;
+  }
+
+  .w-\[180px\] {
+    width: 180px;
+  }
+
+  .w-\[202px\] {
+    width: 202px;
+  }
+
+  .w-\[244px\] {
+    width: 244px;
+  }
+
+  .w-\[280px\] {
+    width: 280px;
+  }
+
+  .w-\[480px\] {
+    width: 480px;
+  }
+
+  .w-auto {
+    width: auto;
+  }
+
+  .w-fit {
+    width: fit-content;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .w-px {
+    width: 1px;
+  }
+
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
+
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
+
+  .max-w-\[calc$100\%-2rem$\] {
+    max-width: calc(100% - 2rem);
+  }
+
+  .max-w-full {
+    max-width: 100%;
+  }
+
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+
+  .max-w-none {
+    max-width: none;
+  }
+
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
+
+  .min-w-\[16px\] {
+    min-width: 16px;
+  }
+
+  .min-w-\[44px\] {
+    min-width: 44px;
+  }
+
+  .min-w-\[80px\] {
+    min-width: 80px;
+  }
+
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
+
+  .min-w-\[280px\] {
+    min-width: 280px;
+  }
+
+  .min-w-\[var$--radix-select-trigger-width$\] {
+    min-width: var(--radix-select-trigger-width);
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .flex-shrink-0, .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .flex-grow, .grow {
+    flex-grow: 1;
+  }
+
+  .border-collapse {
+    border-collapse: collapse;
+  }
+
+  .origin-$--radix-popover-content-transform-origin$ {
+    transform-origin: var(--radix-popover-content-transform-origin);
+  }
+
+  .origin-$--radix-select-content-transform-origin$ {
+    transform-origin: var(--radix-select-content-transform-origin);
+  }
+
+  .-translate-x-0\.5 {
+    --tw-translate-x: calc(var(--spacing) * -.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-x-12 {
+    --tw-translate-x: calc(var(--spacing) * -12);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-x-48 {
+    --tw-translate-x: calc(var(--spacing) * -48);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-x-16 {
+    --tw-translate-x: calc(var(--spacing) * 16);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-x-48 {
+    --tw-translate-x: calc(var(--spacing) * 48);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-16 {
+    --tw-translate-y: calc(var(--spacing) * -16);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-48 {
+    --tw-translate-y: calc(var(--spacing) * -48);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-0\.5 {
+    --tw-translate-y: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-1\/2 {
+    --tw-translate-y: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-8 {
+    --tw-translate-y: calc(var(--spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-12 {
+    --tw-translate-y: calc(var(--spacing) * 12);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-48 {
+    --tw-translate-y: calc(var(--spacing) * 48);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .scale-105 {
+    --tw-scale-x: 105%;
+    --tw-scale-y: 105%;
+    --tw-scale-z: 105%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .scale-110 {
+    --tw-scale-x: 110%;
+    --tw-scale-y: 110%;
+    --tw-scale-z: 110%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .scale-125 {
+    --tw-scale-x: 125%;
+    --tw-scale-y: 125%;
+    --tw-scale-z: 125%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .scale-150 {
+    --tw-scale-x: 150%;
+    --tw-scale-y: 150%;
+    --tw-scale-z: 150%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .-rotate-1 {
+    rotate: -1deg;
+  }
+
+  .-rotate-6 {
+    rotate: -6deg;
+  }
+
+  .rotate-12 {
+    rotate: 12deg;
+  }
+
+  .rotate-45 {
+    rotate: 45deg;
+  }
+
+  .rotate-90 {
+    rotate: 90deg;
+  }
+
+  .rotate-180 {
+    rotate: 180deg;
+  }
+
+  .rotate-\[0\.5deg\] {
+    rotate: .5deg;
+  }
+
+  .-skew-x-12 {
+    --tw-skew-x: skewX(calc(12deg * -1));
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
+
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+
+  .cursor-default {
+    cursor: default;
+  }
+
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .touch-none {
+    touch-action: none;
+  }
+
+  .resize {
+    resize: both;
+  }
+
+  .resize-none {
+    resize: none;
+  }
+
+  .scroll-my-1 {
+    scroll-margin-block: calc(var(--spacing) * 1);
+  }
+
+  .auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .grid-cols-27 {
+    grid-template-columns: repeat(27, minmax(0, 1fr));
+  }
+
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .content-stretch {
+    align-content: stretch;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .justify-around {
+    justify-content: space-around;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
+
+  .gap-16 {
+    gap: calc(var(--spacing) * 16);
+  }
+
+  .gap-\[4px\] {
+    gap: 4px;
+  }
+
+  .gap-\[8px\] {
+    gap: 8px;
+  }
+
+  .gap-\[51px\] {
+    gap: 51px;
+  }
+
+  .gap-px {
+    gap: 1px;
+  }
+
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-8 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-10 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-12 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-16 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-40 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 40) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 40) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.-space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-1 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-1\.5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-3 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-4 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.space-x-6 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+
+  :where(.divide-gray-100 > :not(:last-child)) {
+    border-color: var(--color-gray-100);
+  }
+
+  .self-start {
+    align-self: flex-start;
+  }
+
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .overflow-clip {
+    overflow: clip;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-visible {
+    overflow: visible;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+
+  .rounded {
+    border-radius: .25rem;
+  }
+
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+
+  .rounded-\[0\.5px\] {
+    border-radius: .5px;
+  }
+
+  .rounded-\[2\.5rem\] {
+    border-radius: 2.5rem;
+  }
+
+  .rounded-\[2rem\] {
+    border-radius: 2rem;
+  }
+
+  .rounded-\[3\.35544e\+07px\] {
+    border-radius: 33554400px;
+  }
+
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
+
+  .rounded-\[3rem\] {
+    border-radius: 3rem;
+  }
+
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
+
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
+
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
+
+  .rounded-\[35px\] {
+    border-radius: 35px;
+  }
+
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .rounded-md {
+    border-radius: calc(var(--radius)  - 2px);
+  }
+
+  .rounded-sm {
+    border-radius: calc(var(--radius)  - 4px);
+  }
+
+  .rounded-xl {
+    border-radius: calc(var(--radius)  + 4px);
+  }
+
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+
+  .rounded-t-\[2\.5rem\] {
+    border-top-left-radius: 2.5rem;
+    border-top-right-radius: 2.5rem;
+  }
+
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
+
+  .rounded-tl-\[12px\] {
+    border-top-left-radius: 12px;
+  }
+
+  .rounded-r-sm {
+    border-top-right-radius: calc(var(--radius)  - 4px);
+    border-bottom-right-radius: calc(var(--radius)  - 4px);
+  }
+
+  .rounded-tr-\[5px\] {
+    border-top-right-radius: 5px;
+  }
+
+  .rounded-tr-\[12px\] {
+    border-top-right-radius: 12px;
+  }
+
+  .rounded-br-\[5px\] {
+    border-bottom-right-radius: 5px;
+  }
+
+  .rounded-bl-3xl {
+    border-bottom-left-radius: var(--radius-3xl);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  .border-t-\[3px\] {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 3px;
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+
+  .border-\[\#2d2d2d\] {
+    border-color: #2d2d2d;
+  }
+
+  .border-\[\#bebebe\] {
+    border-color: #bebebe;
+  }
+
+  .border-\[\#e5e5e5\] {
+    border-color: #e5e5e5;
+  }
+
+  .border-\[\#e7e6e6\] {
+    border-color: #e7e6e6;
+  }
+
+  .border-\[\#ffb23f\] {
+    border-color: #ffb23f;
+  }
+
+  .border-\[transparent\] {
+    border-color: #0000;
+  }
+
+  .border-amber-800\/30 {
+    border-color: color-mix(in srgb, oklch(.473 .137 46.201) 30%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-amber-800\/30 {
+      border-color: color-mix(in oklab, var(--color-amber-800) 30%, transparent);
+    }
+  }
+
+  .border-amber-800\/50 {
+    border-color: color-mix(in srgb, oklch(.473 .137 46.201) 50%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-amber-800\/50 {
+      border-color: color-mix(in oklab, var(--color-amber-800) 50%, transparent);
+    }
+  }
+
+  .border-black {
+    border-color: var(--color-black);
+  }
+
+  .border-blue-200 {
+    border-color: var(--color-blue-200);
+  }
+
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
+
+  .border-border\/20 {
+    border-color: var(--border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-border\/20 {
+      border-color: color-mix(in oklab, var(--border) 20%, transparent);
+    }
+  }
+
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
+
+  .border-gray-100\/50 {
+    border-color: color-mix(in srgb, oklch(.967 .003 264.542) 50%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-100\/50 {
+      border-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
+    }
+  }
+
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+
+  .border-gray-200\/50 {
+    border-color: color-mix(in srgb, oklch(.928 .006 264.531) 50%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-200\/50 {
+      border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
+    }
+  }
+
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
+
+  .border-gray-400 {
+    border-color: var(--color-gray-400);
+  }
+
+  .border-gray-800 {
+    border-color: var(--color-gray-800);
+  }
+
+  .border-gray-900 {
+    border-color: var(--color-gray-900);
+  }
+
+  .border-green-200 {
+    border-color: var(--color-green-200);
+  }
+
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
+
+  .border-green-600 {
+    border-color: var(--color-green-600);
+  }
+
+  .border-input {
+    border-color: var(--input);
+  }
+
+  .border-muted {
+    border-color: var(--muted);
+  }
+
+  .border-orange-200 {
+    border-color: var(--color-orange-200);
+  }
+
+  .border-pink-200 {
+    border-color: var(--color-pink-200);
+  }
+
+  .border-primary {
+    border-color: var(--primary);
+  }
+
+  .border-primary\/10 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/10 {
+      border-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .border-primary\/15 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/15 {
+      border-color: color-mix(in oklab, var(--primary) 15%, transparent);
+    }
+  }
+
+  .border-primary\/20 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/20 {
+      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .border-primary\/30 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/30 {
+      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
+
+  .border-primary\/50 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/50 {
+      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+    }
+  }
+
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
+
+  .border-purple-300 {
+    border-color: var(--color-purple-300);
+  }
+
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
+
+  .border-secondary\/20 {
+    border-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-secondary\/20 {
+      border-color: color-mix(in oklab, var(--secondary) 20%, transparent);
+    }
+  }
+
+  .border-transparent {
+    border-color: #0000;
+  }
+
+  .border-white {
+    border-color: var(--color-white);
+  }
+
+  .border-white\/10 {
+    border-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/10 {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .border-white\/20 {
+    border-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/20 {
+      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
+  .border-white\/30 {
+    border-color: #ffffff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/30 {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+
+  .border-white\/40 {
+    border-color: #fff6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/40 {
+      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
+
+  .border-white\/50 {
+    border-color: #ffffff80;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/50 {
+      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+    }
+  }
+
+  .border-yellow-400 {
+    border-color: var(--color-yellow-400);
+  }
+
+  .border-t-white {
+    border-top-color: var(--color-white);
+  }
+
+  .bg-\[\#2c2c2c\] {
+    background-color: #2c2c2c;
+  }
+
+  .bg-\[\#c4c4c4\] {
+    background-color: #c4c4c4;
+  }
+
+  .bg-\[\#f4f4f4\] {
+    background-color: #f4f4f4;
+  }
+
+  .bg-\[\#f8f8f8\] {
+    background-color: #f8f8f8;
+  }
+
+  .bg-\[\#f95f62\] {
+    background-color: #f95f62;
+  }
+
+  .bg-\[rgba$0\,0\,0\,0\.42$\] {
+    background-color: #0000006b;
+  }
+
+  .bg-accent {
+    background-color: var(--accent);
+  }
+
+  .bg-background {
+    background-color: var(--background);
+  }
+
+  .bg-black {
+    background-color: var(--color-black);
+  }
+
+  .bg-black\/20 {
+    background-color: #0003;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/20 {
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
+
+  .bg-black\/50 {
+    background-color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  .bg-black\/70 {
+    background-color: #000000b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/70 {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
+
+  .bg-black\/80 {
+    background-color: #000c;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/80 {
+      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
+    }
+  }
+
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
+
+  .bg-blue-400 {
+    background-color: var(--color-blue-400);
+  }
+
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+
+  .bg-border {
+    background-color: var(--border);
+  }
+
+  .bg-card {
+    background-color: var(--card);
+  }
+
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+
+  .bg-emerald-100 {
+    background-color: var(--color-emerald-100);
+  }
+
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
+
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+
+  .bg-gray-50\/50 {
+    background-color: color-mix(in srgb, oklch(.985 .002 247.839) 50%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-50\/50 {
+      background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
+    }
+  }
+
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+
+  .bg-gray-100\/50 {
+    background-color: color-mix(in srgb, oklch(.967 .003 264.542) 50%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-100\/50 {
+      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
+    }
+  }
+
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
+
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
+
+  .bg-gray-700 {
+    background-color: var(--color-gray-700);
+  }
+
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+
+  .bg-green-50 {
+    background-color: var(--color-green-50);
+  }
+
+  .bg-green-100 {
+    background-color: var(--color-green-100);
+  }
+
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
+
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+
+  .bg-input-background {
+    background-color: var(--input-background);
+  }
+
+  .bg-muted {
+    background-color: var(--muted);
+  }
+
+  .bg-muted\/30 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/30 {
+      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
+  }
+
+  .bg-muted\/50 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/50 {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
+
+  .bg-orange-400 {
+    background-color: var(--color-orange-400);
+  }
+
+  .bg-popover {
+    background-color: var(--popover);
+  }
+
+  .bg-primary {
+    background-color: var(--primary);
+  }
+
+  .bg-primary\/3 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/3 {
+      background-color: color-mix(in oklab, var(--primary) 3%, transparent);
+    }
+  }
+
+  .bg-primary\/5 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/5 {
+      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+
+  .bg-primary\/10 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/10 {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .bg-primary\/15 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/15 {
+      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
+    }
+  }
+
+  .bg-primary\/20 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/20 {
+      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .bg-primary\/30 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/30 {
+      background-color: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
+
+  .bg-primary\/40 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/40 {
+      background-color: color-mix(in oklab, var(--primary) 40%, transparent);
+    }
+  }
+
+  .bg-primary\/60 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/60 {
+      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
+    }
+  }
+
+  .bg-purple-100 {
+    background-color: var(--color-purple-100);
+  }
+
+  .bg-purple-200 {
+    background-color: var(--color-purple-200);
+  }
+
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
+
+  .bg-purple-600 {
+    background-color: var(--color-purple-600);
+  }
+
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
+
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
+
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+
+  .bg-secondary\/3 {
+    background-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-secondary\/3 {
+      background-color: color-mix(in oklab, var(--secondary) 3%, transparent);
+    }
+  }
+
+  .bg-secondary\/5 {
+    background-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-secondary\/5 {
+      background-color: color-mix(in oklab, var(--secondary) 5%, transparent);
+    }
+  }
+
+  .bg-secondary\/10 {
+    background-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-secondary\/10 {
+      background-color: color-mix(in oklab, var(--secondary) 10%, transparent);
+    }
+  }
+
+  .bg-secondary\/20 {
+    background-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-secondary\/20 {
+      background-color: color-mix(in oklab, var(--secondary) 20%, transparent);
+    }
+  }
+
+  .bg-secondary\/40 {
+    background-color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-secondary\/40 {
+      background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
+    }
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
+  .bg-white {
+    background-color: var(--color-white);
+  }
+
+  .bg-white\/5 {
+    background-color: #ffffff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/5 {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .bg-white\/10 {
+    background-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/10 {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .bg-white\/15 {
+    background-color: #ffffff26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/15 {
+      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
+  .bg-white\/20 {
+    background-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/20 {
+      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
+  .bg-white\/30 {
+    background-color: #ffffff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/30 {
+      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+
+  .bg-white\/45 {
+    background-color: #ffffff73;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/45 {
+      background-color: color-mix(in oklab, var(--color-white) 45%, transparent);
+    }
+  }
+
+  .bg-white\/50 {
+    background-color: #ffffff80;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/50 {
+      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+    }
+  }
+
+  .bg-white\/55 {
+    background-color: #ffffff8c;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/55 {
+      background-color: color-mix(in oklab, var(--color-white) 55%, transparent);
+    }
+  }
+
+  .bg-white\/60 {
+    background-color: #fff9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/60 {
+      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
+
+  .bg-white\/65 {
+    background-color: #ffffffa6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/65 {
+      background-color: color-mix(in oklab, var(--color-white) 65%, transparent);
+    }
+  }
+
+  .bg-white\/70 {
+    background-color: #ffffffb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/70 {
+      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+
+  .bg-white\/75 {
+    background-color: #ffffffbf;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/75 {
+      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
+    }
+  }
+
+  .bg-white\/80 {
+    background-color: #fffc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/80 {
+      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
+
+  .bg-white\/85 {
+    background-color: #ffffffd9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/85 {
+      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
+    }
+  }
+
+  .bg-white\/90 {
+    background-color: #ffffffe6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/90 {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+
+  .bg-white\/95 {
+    background-color: #fffffff2;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/95 {
+      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
+
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
+
+  .bg-yellow-400 {
+    background-color: var(--color-yellow-400);
+  }
+
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+
+  .bg-gradient-to-b {
+    --tw-gradient-position: to bottom in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-bl {
+    --tw-gradient-position: to bottom left in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-tr {
+    --tw-gradient-position: to top right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .from-amber-50 {
+    --tw-gradient-from: var(--color-amber-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-amber-500 {
+    --tw-gradient-from: var(--color-amber-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-background {
+    --tw-gradient-from: var(--background);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-black\/20 {
+    --tw-gradient-from: #0003;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/20 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
+
+  .from-black\/50 {
+    --tw-gradient-from: #00000080;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/50 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  .from-black\/60 {
+    --tw-gradient-from: #0009;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/60 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+
+  .from-black\/70 {
+    --tw-gradient-from: #000000b3;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/70 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
+
+  .from-black\/80 {
+    --tw-gradient-from: #000c;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-black\/80 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent);
+    }
+  }
+
+  .from-blue-50 {
+    --tw-gradient-from: var(--color-blue-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-blue-50\/30 {
+    --tw-gradient-from: color-mix(in srgb, oklch(.97 .014 254.604) 30%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-blue-50\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
+    }
+  }
+
+  .from-blue-200 {
+    --tw-gradient-from: var(--color-blue-200);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-blue-200\/30 {
+    --tw-gradient-from: color-mix(in srgb, oklch(.882 .059 254.128) 30%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-blue-200\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-blue-200) 30%, transparent);
+    }
+  }
+
+  .from-blue-400 {
+    --tw-gradient-from: var(--color-blue-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-blue-500 {
+    --tw-gradient-from: var(--color-blue-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-blue-600 {
+    --tw-gradient-from: var(--color-blue-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-emerald-500 {
+    --tw-gradient-from: var(--color-emerald-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-gray-50 {
+    --tw-gradient-from: var(--color-gray-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-gray-100 {
+    --tw-gradient-from: var(--color-gray-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-gray-500 {
+    --tw-gradient-from: var(--color-gray-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-gray-900 {
+    --tw-gradient-from: var(--color-gray-900);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-green-50\/30 {
+    --tw-gradient-from: color-mix(in srgb, oklch(.982 .018 155.826) 30%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-green-50\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-green-50) 30%, transparent);
+    }
+  }
+
+  .from-green-50\/60 {
+    --tw-gradient-from: color-mix(in srgb, oklch(.982 .018 155.826) 60%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-green-50\/60 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-green-50) 60%, transparent);
+    }
+  }
+
+  .from-green-100 {
+    --tw-gradient-from: var(--color-green-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-green-400 {
+    --tw-gradient-from: var(--color-green-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-green-500 {
+    --tw-gradient-from: var(--color-green-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-indigo-500 {
+    --tw-gradient-from: var(--color-indigo-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-muted\/20 {
+    --tw-gradient-from: var(--muted);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-muted\/20 {
+      --tw-gradient-from: color-mix(in oklab, var(--muted) 20%, transparent);
+    }
+  }
+
+  .from-muted\/30 {
+    --tw-gradient-from: var(--muted);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-muted\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
+  }
+
+  .from-orange-50 {
+    --tw-gradient-from: var(--color-orange-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-orange-400 {
+    --tw-gradient-from: var(--color-orange-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-orange-500 {
+    --tw-gradient-from: var(--color-orange-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-pink-50 {
+    --tw-gradient-from: var(--color-pink-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-pink-400 {
+    --tw-gradient-from: var(--color-pink-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-primary {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-primary\/5 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/5 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+
+  .from-primary\/10 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/10 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .from-primary\/20 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/20 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .from-primary\/30 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
+
+  .from-primary\/40 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/40 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 40%, transparent);
+    }
+  }
+
+  .from-primary\/90 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/90 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 90%, transparent);
+    }
+  }
+
+  .from-purple-50 {
+    --tw-gradient-from: var(--color-purple-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-purple-100 {
+    --tw-gradient-from: var(--color-purple-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-purple-400 {
+    --tw-gradient-from: var(--color-purple-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-purple-500 {
+    --tw-gradient-from: var(--color-purple-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-purple-600 {
+    --tw-gradient-from: var(--color-purple-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-secondary\/5 {
+    --tw-gradient-from: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-secondary\/5 {
+      --tw-gradient-from: color-mix(in oklab, var(--secondary) 5%, transparent);
+    }
+  }
+
+  .from-secondary\/10 {
+    --tw-gradient-from: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-secondary\/10 {
+      --tw-gradient-from: color-mix(in oklab, var(--secondary) 10%, transparent);
+    }
+  }
+
+  .from-secondary\/15 {
+    --tw-gradient-from: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-secondary\/15 {
+      --tw-gradient-from: color-mix(in oklab, var(--secondary) 15%, transparent);
+    }
+  }
+
+  .from-secondary\/30 {
+    --tw-gradient-from: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-secondary\/30 {
+      --tw-gradient-from: color-mix(in oklab, var(--secondary) 30%, transparent);
+    }
+  }
+
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-white {
+    --tw-gradient-from: var(--color-white);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-white\/10 {
+    --tw-gradient-from: #ffffff1a;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-white\/10 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .from-yellow-300 {
+    --tw-gradient-from: var(--color-yellow-300);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .from-yellow-400 {
+    --tw-gradient-from: var(--color-yellow-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .via-amber-800\/10 {
+    --tw-gradient-via: color-mix(in srgb, oklch(.473 .137 46.201) 10%, transparent);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-amber-800\/10 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-amber-800) 10%, transparent);
+    }
+  }
+
+  .via-black\/30 {
+    --tw-gradient-via: #0000004d;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-black\/30 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
+
+  .via-black\/40 {
+    --tw-gradient-via: #0006;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-black\/40 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
+
+  .via-black\/50 {
+    --tw-gradient-via: #00000080;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-black\/50 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  .via-blue-100 {
+    --tw-gradient-via: var(--color-blue-100);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-blue-600 {
+    --tw-gradient-via: var(--color-blue-600);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-gray-50\/30 {
+    --tw-gradient-via: color-mix(in srgb, oklch(.985 .002 247.839) 30%, transparent);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-gray-50\/30 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-gray-50) 30%, transparent);
+    }
+  }
+
+  .via-green-200 {
+    --tw-gradient-via: var(--color-green-200);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-primary {
+    --tw-gradient-via: var(--primary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-primary\/20 {
+    --tw-gradient-via: var(--primary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-primary\/20 {
+      --tw-gradient-via: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .via-secondary {
+    --tw-gradient-via: var(--secondary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-secondary\/5 {
+    --tw-gradient-via: var(--secondary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-secondary\/5 {
+      --tw-gradient-via: color-mix(in oklab, var(--secondary) 5%, transparent);
+    }
+  }
+
+  .via-secondary\/10 {
+    --tw-gradient-via: var(--secondary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-secondary\/10 {
+      --tw-gradient-via: color-mix(in oklab, var(--secondary) 10%, transparent);
+    }
+  }
+
+  .via-secondary\/20 {
+    --tw-gradient-via: var(--secondary);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-secondary\/20 {
+      --tw-gradient-via: color-mix(in oklab, var(--secondary) 20%, transparent);
+    }
+  }
+
+  .via-transparent {
+    --tw-gradient-via: transparent;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-white {
+    --tw-gradient-via: var(--color-white);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .via-white\/10 {
+    --tw-gradient-via: #ffffff1a;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/10 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .via-white\/20 {
+    --tw-gradient-via: #fff3;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/20 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
+  .via-white\/25 {
+    --tw-gradient-via: #ffffff40;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/25 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 25%, transparent);
+    }
+  }
+
+  .via-white\/40 {
+    --tw-gradient-via: #fff6;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/40 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
+
+  .via-white\/60 {
+    --tw-gradient-via: #fff9;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/60 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
+
+  .via-white\/80 {
+    --tw-gradient-via: #fffc;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/80 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
+
+  .via-white\/90 {
+    --tw-gradient-via: #ffffffe6;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/90 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+
+  .via-white\/95 {
+    --tw-gradient-via: #fffffff2;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .via-white\/95 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
+
+  .to-background {
+    --tw-gradient-to: var(--background);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-black {
+    --tw-gradient-to: var(--color-black);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-black\/70 {
+    --tw-gradient-to: #000000b3;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-black\/70 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
+
+  .to-blue-50\/30 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.97 .014 254.604) 30%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-blue-50\/30 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
+    }
+  }
+
+  .to-blue-50\/40 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.97 .014 254.604) 40%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-blue-50\/40 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
+    }
+  }
+
+  .to-blue-100 {
+    --tw-gradient-to: var(--color-blue-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-blue-500 {
+    --tw-gradient-to: var(--color-blue-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-blue-500\/10 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.623 .214 259.815) 10%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-blue-500\/10 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+    }
+  }
+
+  .to-blue-500\/20 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.623 .214 259.815) 20%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-blue-500\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+    }
+  }
+
+  .to-blue-600 {
+    --tw-gradient-to: var(--color-blue-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-cyan-500 {
+    --tw-gradient-to: var(--color-cyan-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-emerald-500 {
+    --tw-gradient-to: var(--color-emerald-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-emerald-600 {
+    --tw-gradient-to: var(--color-emerald-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-gray-50 {
+    --tw-gradient-to: var(--color-gray-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-gray-100 {
+    --tw-gradient-to: var(--color-gray-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-gray-200 {
+    --tw-gradient-to: var(--color-gray-200);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-gray-600 {
+    --tw-gradient-to: var(--color-gray-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-green-600 {
+    --tw-gradient-to: var(--color-green-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-indigo-100 {
+    --tw-gradient-to: var(--color-indigo-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-muted\/20 {
+    --tw-gradient-to: var(--muted);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-muted\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--muted) 20%, transparent);
+    }
+  }
+
+  .to-orange-50 {
+    --tw-gradient-to: var(--color-orange-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-orange-400 {
+    --tw-gradient-to: var(--color-orange-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-orange-500 {
+    --tw-gradient-to: var(--color-orange-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-pink-50 {
+    --tw-gradient-to: var(--color-pink-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-pink-100 {
+    --tw-gradient-to: var(--color-pink-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-pink-500 {
+    --tw-gradient-to: var(--color-pink-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-pink-600 {
+    --tw-gradient-to: var(--color-pink-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-primary {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-primary\/5 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/5 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+
+  .to-primary\/10 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/10 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .to-primary\/15 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/15 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 15%, transparent);
+    }
+  }
+
+  .to-primary\/20 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .to-primary\/30 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/30 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
+
+  .to-primary\/80 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/80 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+  }
+
+  .to-primary\/90 {
+    --tw-gradient-to: var(--primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-primary\/90 {
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 90%, transparent);
+    }
+  }
+
+  .to-purple-50 {
+    --tw-gradient-to: var(--color-purple-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-purple-50\/20 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.977 .014 308.299) 20%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-purple-50\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-purple-50) 20%, transparent);
+    }
+  }
+
+  .to-purple-200\/30 {
+    --tw-gradient-to: color-mix(in srgb, oklch(.902 .063 306.703) 30%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-purple-200\/30 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-purple-200) 30%, transparent);
+    }
+  }
+
+  .to-purple-500 {
+    --tw-gradient-to: var(--color-purple-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-purple-600 {
+    --tw-gradient-to: var(--color-purple-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-red-50 {
+    --tw-gradient-to: var(--color-red-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-red-500 {
+    --tw-gradient-to: var(--color-red-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-rose-500 {
+    --tw-gradient-to: var(--color-rose-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-secondary {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-secondary\/5 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/5 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 5%, transparent);
+    }
+  }
+
+  .to-secondary\/10 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/10 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 10%, transparent);
+    }
+  }
+
+  .to-secondary\/20 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 20%, transparent);
+    }
+  }
+
+  .to-secondary\/30 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/30 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 30%, transparent);
+    }
+  }
+
+  .to-secondary\/90 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/90 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 90%, transparent);
+    }
+  }
+
+  .to-teal-500 {
+    --tw-gradient-to: var(--color-teal-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-white {
+    --tw-gradient-to: var(--color-white);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-white\/70 {
+    --tw-gradient-to: #ffffffb3;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-white\/70 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+
+  .to-yellow-200 {
+    --tw-gradient-to: var(--color-yellow-200);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .to-yellow-500 {
+    --tw-gradient-to: var(--color-yellow-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .bg-\[length\:200\%_100\%\] {
+    background-size: 200% 100%;
+  }
+
+  .bg-cover {
+    background-size: cover;
+  }
+
+  .bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .bg-clip-text {
+    background-clip: text;
+  }
+
+  .bg-center {
+    background-position: center;
+  }
+
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .fill-\[\#bebebe\] {
+    fill: #bebebe;
+  }
+
+  .fill-\[\#e2ad64\] {
+    fill: #e2ad64;
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .fill-gray-300 {
+    fill: var(--color-gray-300);
+  }
+
+  .fill-primary {
+    fill: var(--primary);
+  }
+
+  .fill-yellow-400 {
+    fill: var(--color-yellow-400);
+  }
+
+  .fill-yellow-500 {
+    fill: var(--color-yellow-500);
+  }
+
+  .object-contain {
+    object-fit: contain;
+  }
+
+  .object-cover {
+    object-fit: cover;
+  }
+
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
+
+  .p-14 {
+    padding: calc(var(--spacing) * 14);
+  }
+
+  .p-\[3px\] {
+    padding: 3px;
+  }
+
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
+
+  .px-12 {
+    padding-inline: calc(var(--spacing) * 12);
+  }
+
+  .px-\[14px\] {
+    padding-inline: 14px;
+  }
+
+  .px-\[15px\] {
+    padding-inline: 15px;
+  }
+
+  .px-\[17px\] {
+    padding-inline: 17px;
+  }
+
+  .px-\[47px\] {
+    padding-inline: 47px;
+  }
+
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
+
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
+  }
+
+  .py-\[0px\] {
+    padding-block: 0;
+  }
+
+  .py-\[12px\] {
+    padding-block: 12px;
+  }
+
+  .py-\[17px\] {
+    padding-block: 17px;
+  }
+
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
+
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+
+  .pt-12 {
+    padding-top: calc(var(--spacing) * 12);
+  }
+
+  .pt-32 {
+    padding-top: calc(var(--spacing) * 32);
+  }
+
+  .pt-40 {
+    padding-top: calc(var(--spacing) * 40);
+  }
+
+  .pt-51 {
+    padding-top: calc(var(--spacing) * 51);
+  }
+
+  .pt-52 {
+    padding-top: calc(var(--spacing) * 52);
+  }
+
+  .pt-56 {
+    padding-top: calc(var(--spacing) * 56);
+  }
+
+  .pt-64 {
+    padding-top: calc(var(--spacing) * 64);
+  }
+
+  .pt-\[12px\] {
+    padding-top: 12px;
+  }
+
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
+
+  .pr-20 {
+    padding-right: calc(var(--spacing) * 20);
+  }
+
+  .pr-\[0\.016px\] {
+    padding-right: .016px;
+  }
+
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+
+  .pb-12 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
+
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+
+  .pb-20 {
+    padding-bottom: calc(var(--spacing) * 20);
+  }
+
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
+
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .pl-10 {
+    padding-left: calc(var(--spacing) * 10);
+  }
+
+  .pl-12 {
+    padding-left: calc(var(--spacing) * 12);
+  }
+
+  .pl-14 {
+    padding-left: calc(var(--spacing) * 14);
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .align-middle {
+    vertical-align: middle;
+  }
+
+  .font-\[\'Poppins\:Bold\'\,_sans-serif\] {
+    font-family: Poppins\:Bold, sans-serif;
+  }
+
+  .font-\[\'Poppins\:SemiBold\'\,_sans-serif\] {
+    font-family: Poppins\:SemiBold, sans-serif;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .text-\[0\.8rem\] {
+    font-size: .8rem;
+  }
+
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
+  .text-\[12\.25px\] {
+    font-size: 12.25px;
+  }
+
+  .text-\[12\.289px\] {
+    font-size: 12.289px;
+  }
+
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+
+  .text-\[14\.297px\] {
+    font-size: 14.297px;
+  }
+
+  .text-\[15\.875px\] {
+    font-size: 15.875px;
+  }
+
+  .text-\[15px\] {
+    font-size: 15px;
+  }
+
+  .text-\[16px\] {
+    font-size: 16px;
+  }
+
+  .text-\[22px\] {
+    font-size: 22px;
+  }
+
+  .text-\[24px\] {
+    font-size: 24px;
+  }
+
+  .text-\[48px\] {
+    font-size: 48px;
+  }
+
+  .leading-\[0\] {
+    --tw-leading: 0;
+    line-height: 0;
+  }
+
+  .leading-\[1\.3\] {
+    --tw-leading: 1.3;
+    line-height: 1.3;
+  }
+
+  .leading-\[14px\] {
+    --tw-leading: 14px;
+    line-height: 14px;
+  }
+
+  .leading-\[16px\] {
+    --tw-leading: 16px;
+    line-height: 16px;
+  }
+
+  .leading-\[17\.5px\] {
+    --tw-leading: 17.5px;
+    line-height: 17.5px;
+  }
+
+  .leading-\[24px\] {
+    --tw-leading: 24px;
+    line-height: 24px;
+  }
+
+  .leading-\[54px\] {
+    --tw-leading: 54px;
+    line-height: 54px;
+  }
+
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
+
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .tracking-\[-0\.96px\] {
+    --tw-tracking: -.96px;
+    letter-spacing: -.96px;
+  }
+
+  .tracking-\[0\.48px\] {
+    --tw-tracking: .48px;
+    letter-spacing: .48px;
+  }
+
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .whitespace-pre {
+    white-space: pre;
+  }
+
+  .text-\[\#2d2d2d\] {
+    color: #2d2d2d;
+  }
+
+  .text-\[\#2d3134\] {
+    color: #2d3134;
+  }
+
+  .text-\[\#05073c\] {
+    color: #05073c;
+  }
+
+  .text-\[\#414141\] {
+    color: #414141;
+  }
+
+  .text-\[\#717171\] {
+    color: #717171;
+  }
+
+  .text-\[\#bebebe\] {
+    color: #bebebe;
+  }
+
+  .text-\[\#e2ad64\] {
+    color: #e2ad64;
+  }
+
+  .text-\[\#ffb23f\] {
+    color: #ffb23f;
+  }
+
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
+
+  .text-amber-500 {
+    color: var(--color-amber-500);
+  }
+
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
+
+  .text-amber-700\/30 {
+    color: color-mix(in srgb, oklch(.555 .163 48.998) 30%, transparent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-amber-700\/30 {
+      color: color-mix(in oklab, var(--color-amber-700) 30%, transparent);
+    }
+  }
+
+  .text-background {
+    color: var(--background);
+  }
+
+  .text-black {
+    color: var(--color-black);
+  }
+
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
+
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
+
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
+
+  .text-current {
+    color: currentColor;
+  }
+
+  .text-emerald-600 {
+    color: var(--color-emerald-600);
+  }
+
+  .text-foreground {
+    color: var(--foreground);
+  }
+
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
+
+  .text-green-700 {
+    color: var(--color-green-700);
+  }
+
+  .text-green-900 {
+    color: var(--color-green-900);
+  }
+
+  .text-indigo-600 {
+    color: var(--color-indigo-600);
+  }
+
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
+
+  .text-orange-700 {
+    color: var(--color-orange-700);
+  }
+
+  .text-pink-600 {
+    color: var(--color-pink-600);
+  }
+
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+
+  .text-primary {
+    color: var(--primary);
+  }
+
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+
+  .text-primary\/15 {
+    color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-primary\/15 {
+      color: color-mix(in oklab, var(--primary) 15%, transparent);
+    }
+  }
+
+  .text-primary\/20 {
+    color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-primary\/20 {
+      color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .text-primary\/70 {
+    color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-primary\/70 {
+      color: color-mix(in oklab, var(--primary) 70%, transparent);
+    }
+  }
+
+  .text-purple-600 {
+    color: var(--color-purple-600);
+  }
+
+  .text-purple-700 {
+    color: var(--color-purple-700);
+  }
+
+  .text-red-400 {
+    color: var(--color-red-400);
+  }
+
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
+
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
+
+  .text-rose-600 {
+    color: var(--color-rose-600);
+  }
+
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+
+  .text-secondary\/20 {
+    color: var(--secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-secondary\/20 {
+      color: color-mix(in oklab, var(--secondary) 20%, transparent);
+    }
+  }
+
+  .text-transparent {
+    color: #0000;
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .text-white\/60 {
+    color: #fff9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-white\/60 {
+      color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
+
+  .text-white\/70 {
+    color: #ffffffb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-white\/70 {
+      color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+
+  .text-white\/80 {
+    color: #fffc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-white\/80 {
+      color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
+
+  .text-white\/90 {
+    color: #ffffffe6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-white\/90 {
+      color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+
+  .text-yellow-300 {
+    color: var(--color-yellow-300);
+  }
+
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
+
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+
+  .text-yellow-600 {
+    color: var(--color-yellow-600);
+  }
+
+  .text-yellow-800 {
+    color: var(--color-yellow-800);
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .italic {
+    font-style: italic;
+  }
+
+  .not-italic {
+    font-style: normal;
+  }
+
+  .line-through {
+    text-decoration-line: line-through;
+  }
+
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .opacity-5 {
+    opacity: .05;
+  }
+
+  .opacity-8 {
+    opacity: .08;
+  }
+
+  .opacity-10 {
+    opacity: .1;
+  }
+
+  .opacity-15 {
+    opacity: .15;
+  }
+
+  .opacity-20 {
+    opacity: .2;
+  }
+
+  .opacity-25 {
+    opacity: .25;
+  }
+
+  .opacity-30 {
+    opacity: .3;
+  }
+
+  .opacity-40 {
+    opacity: .4;
+  }
+
+  .opacity-50 {
+    opacity: .5;
+  }
+
+  .opacity-60 {
+    opacity: .6;
+  }
+
+  .opacity-70 {
+    opacity: .7;
+  }
+
+  .opacity-80 {
+    opacity: .8;
+  }
+
+  .opacity-90 {
+    opacity: .9;
+  }
+
+  .opacity-100 {
+    opacity: 1;
+  }
+
+  .opacity-\[0\.02\] {
+    opacity: .02;
+  }
+
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_10px_15px_-3px_rgba$0\,0\,0\,0\.08$\,0_4px_6px_-2px_rgba$0\,0\,0\,0\.05$\] {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #00000014), 0 4px 6px -2px var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0px_10px_15px_-3px_rgba$0\,0\,0\,0\.1$\,0px_4px_6px_-4px_rgba$0\,0\,0\,0\.1$\] {
+    --tw-shadow: 0px 10px 15px -3px var(--tw-shadow-color, #0000001a), 0px 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-black\/5 {
+    --tw-shadow-color: #0000000d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-black\/5 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 5%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .shadow-black\/10 {
+    --tw-shadow-color: #0000001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-black\/10 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .shadow-primary\/25 {
+    --tw-shadow-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-primary\/25 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .ring-primary {
+    --tw-ring-color: var(--primary);
+  }
+
+  .ring-primary\/20 {
+    --tw-ring-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-primary\/20 {
+      --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .ring-primary\/50 {
+    --tw-ring-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-primary\/50 {
+      --tw-ring-color: color-mix(in oklab, var(--primary) 50%, transparent);
+    }
+  }
+
+  .ring-ring\/50 {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/50 {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .outline-hidden {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .blur-2xl {
+    --tw-blur: blur(var(--blur-2xl));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .blur-3xl {
+    --tw-blur: blur(var(--blur-3xl));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .blur-lg {
+    --tw-blur: blur(var(--blur-lg));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .blur-sm {
+    --tw-blur: blur(var(--blur-sm));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .blur-xl {
+    --tw-blur: blur(var(--blur-xl));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .drop-shadow {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
+    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .drop-shadow-2xl {
+    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, #00000026));
+    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .sepia {
+    --tw-sepia: sepia(100%);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .backdrop-blur-2xl {
+    --tw-backdrop-blur: blur(var(--blur-2xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-3xl {
+    --tw-backdrop-blur: blur(var(--blur-3xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-\[20px\] {
+    --tw-backdrop-blur: blur(20px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-lg {
+    --tw-backdrop-blur: blur(var(--blur-lg));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[color\,box-shadow\] {
+    transition-property: color, box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-none {
+    transition-property: none;
+  }
+
+  .duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
+  .duration-300 {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  .duration-500 {
+    --tw-duration: .5s;
+    transition-duration: .5s;
+  }
+
+  .duration-700 {
+    --tw-duration: .7s;
+    transition-duration: .7s;
+  }
+
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  @media (hover: hover) {
+    .group-hover\:translate-x-1:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:translate-x-full:is(:where(.group):hover *) {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:scale-105:is(:where(.group):hover *) {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:scale-110:is(:where(.group):hover *) {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:rotate-12:is(:where(.group):hover *) {
+      rotate: 12deg;
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:\[transform\:rotateY$180deg$\]:is(:where(.group):hover *) {
+      transform: rotateY(180deg);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:bg-gray-50\/50:is(:where(.group):hover *) {
+      background-color: color-mix(in srgb, oklch(.985 .002 247.839) 50%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-gray-50\/50:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:bg-gray-200:is(:where(.group):hover *) {
+      background-color: var(--color-gray-200);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:bg-white\/30:is(:where(.group):hover *) {
+      background-color: #ffffff4d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:bg-white\/30:is(:where(.group):hover *) {
+        background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:from-primary\/20:is(:where(.group):hover *) {
+      --tw-gradient-from: var(--primary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:from-primary\/20:is(:where(.group):hover *) {
+        --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:to-secondary\/20:is(:where(.group):hover *) {
+      --tw-gradient-to: var(--secondary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:to-secondary\/20:is(:where(.group):hover *) {
+        --tw-gradient-to: color-mix(in oklab, var(--secondary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:text-gray-900:is(:where(.group):hover *) {
+      color: var(--color-gray-900);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:text-primary:is(:where(.group):hover *) {
+      color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:text-secondary:is(:where(.group):hover *) {
+      color: var(--secondary);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:opacity-20:is(:where(.group):hover *) {
+      opacity: .2;
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:opacity-30:is(:where(.group):hover *) {
+      opacity: .3;
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:opacity-100:is(:where(.group):hover *) {
+      opacity: 1;
+    }
+  }
+
+  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
+    pointer-events: none;
+  }
+
+  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
+    opacity: .5;
+  }
+
+  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
+    cursor: not-allowed;
+  }
+
+  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
+    opacity: .5;
+  }
+
+  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
+    opacity: .7;
+  }
+
+  .peer-data-\[state\=checked\]\:border-primary:is(:where(.peer)[data-state="checked"] ~ *) {
+    border-color: var(--primary);
+  }
+
+  .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
+    background-color: var(--primary);
+  }
+
+  .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection {
+    color: var(--primary-foreground);
+  }
+
+  .file\:inline-flex::file-selector-button {
+    display: inline-flex;
+  }
+
+  .file\:h-7::file-selector-button {
+    height: calc(var(--spacing) * 7);
+  }
+
+  .file\:border-0::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .file\:bg-transparent::file-selector-button {
+    background-color: #0000;
+  }
+
+  .file\:text-sm::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .file\:font-medium::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .file\:text-foreground::file-selector-button {
+    color: var(--foreground);
+  }
+
+  .placeholder\:text-gray-400::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  .placeholder\:text-gray-500::placeholder {
+    color: var(--color-gray-500);
+  }
+
+  .placeholder\:text-muted-foreground::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  .focus-within\:relative:focus-within {
+    position: relative;
+  }
+
+  .focus-within\:z-20:focus-within {
+    z-index: 20;
+  }
+
+  @media (hover: hover) {
+    .hover\:-translate-y-0\.5:hover {
+      --tw-translate-y: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:-translate-y-2:hover {
+      --tw-translate-y: calc(var(--spacing) * -2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:scale-\[1\.02\]:hover {
+      scale: 1.02;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-blue-300:hover {
+      border-color: var(--color-blue-300);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-gray-200:hover {
+      border-color: var(--color-gray-200);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-orange-300:hover {
+      border-color: var(--color-orange-300);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-pink-300:hover {
+      border-color: var(--color-pink-300);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary:hover {
+      border-color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary\/20:hover {
+      border-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/20:hover {
+        border-color: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary\/30:hover {
+      border-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/30:hover {
+        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary\/40:hover {
+      border-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/40:hover {
+        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary\/50:hover {
+      border-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/50:hover {
+        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-primary\/80:hover {
+      border-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-primary\/80:hover {
+        border-color: color-mix(in oklab, var(--primary) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:border-white\/40:hover {
+      border-color: #fff6;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-white\/40:hover {
+        border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-\[\#1c1c1c\]:hover {
+      background-color: #1c1c1c;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-foreground\/90:hover {
+      background-color: var(--foreground);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-foreground\/90:hover {
+        background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-50:hover {
+      background-color: var(--color-gray-50);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-50\/50:hover {
+      background-color: color-mix(in srgb, oklch(.985 .002 247.839) 50%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-50\/50:hover {
+        background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-50\/80:hover {
+      background-color: color-mix(in srgb, oklch(.985 .002 247.839) 80%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-50\/80:hover {
+        background-color: color-mix(in oklab, var(--color-gray-50) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-100:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-100\/50:hover {
+      background-color: color-mix(in srgb, oklch(.967 .003 264.542) 50%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-100\/50:hover {
+        background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-100\/70:hover {
+      background-color: color-mix(in srgb, oklch(.967 .003 264.542) 70%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-100\/70:hover {
+        background-color: color-mix(in oklab, var(--color-gray-100) 70%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-200:hover {
+      background-color: var(--color-gray-200);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-300:hover {
+      background-color: var(--color-gray-300);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-600:hover {
+      background-color: var(--color-gray-600);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-800:hover {
+      background-color: var(--color-gray-800);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-gray-900:hover {
+      background-color: var(--color-gray-900);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-green-700:hover {
+      background-color: var(--color-green-700);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary:hover {
+      background-color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/5:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/5:hover {
+        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/10:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/10:hover {
+        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/20:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/20:hover {
+        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-secondary\/80:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-transparent:hover {
+      background-color: #0000;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-white:hover {
+      background-color: var(--color-white);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-white\/10:hover {
+      background-color: #ffffff1a;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/10:hover {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-white\/25:hover {
+      background-color: #ffffff40;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/25:hover {
+        background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:from-primary\/10:hover {
+      --tw-gradient-from: var(--primary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:from-primary\/10:hover {
+        --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:from-primary\/90:hover {
+      --tw-gradient-from: var(--primary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:from-primary\/90:hover {
+        --tw-gradient-from: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:to-blue-500\/90:hover {
+      --tw-gradient-to: color-mix(in srgb, oklch(.623 .214 259.815) 90%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:to-blue-500\/90:hover {
+        --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:to-primary\/80:hover {
+      --tw-gradient-to: var(--primary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:to-primary\/80:hover {
+        --tw-gradient-to: color-mix(in oklab, var(--primary) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:to-secondary\/90:hover {
+      --tw-gradient-to: var(--secondary);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:to-secondary\/90:hover {
+        --tw-gradient-to: color-mix(in oklab, var(--secondary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-gray-600:hover {
+      color: var(--color-gray-600);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-gray-700:hover {
+      color: var(--color-gray-700);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-gray-800:hover {
+      color: var(--color-gray-800);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-gray-900:hover {
+      color: var(--color-gray-900);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-primary:hover {
+      color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-primary-foreground:hover {
+      color: var(--primary-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-primary\/80:hover {
+      color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-primary\/80:hover {
+        color: color-mix(in oklab, var(--primary) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-secondary:hover {
+      color: var(--secondary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-white:hover {
+      color: var(--color-white);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:no-underline:hover {
+      text-decoration-line: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-2xl:hover {
+      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-lg:hover {
+      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-xl:hover {
+      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:ring-4:hover {
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-primary\/25:hover {
+      --tw-shadow-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:shadow-primary\/25:hover {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+  }
+
+  .focus\:border-primary:focus {
+    border-color: var(--primary);
+  }
+
+  .focus\:bg-accent:focus {
+    background-color: var(--accent);
+  }
+
+  .focus\:bg-primary:focus {
+    background-color: var(--primary);
+  }
+
+  .focus\:bg-white:focus {
+    background-color: var(--color-white);
+  }
+
+  .focus\:text-accent-foreground:focus {
+    color: var(--accent-foreground);
+  }
+
+  .focus\:text-primary-foreground:focus {
+    color: var(--primary-foreground);
+  }
+
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus\:ring-4:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus\:ring-primary:focus {
+    --tw-ring-color: var(--primary);
+  }
+
+  .focus\:ring-primary\/10:focus {
+    --tw-ring-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:ring-primary\/10:focus {
+      --tw-ring-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .focus\:ring-ring:focus {
+    --tw-ring-color: var(--ring);
+  }
+
+  .focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus\:outline-hidden:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .focus\:outline-hidden:focus {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .focus-visible\:border-ring:focus-visible {
+    border-color: var(--ring);
+  }
+
+  .focus-visible\:ring-4:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-\[3px\]:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-destructive\/20:focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-destructive\/20:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .focus-visible\:ring-ring\/50:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/50:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .focus-visible\:outline-hidden:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .focus-visible\:outline-hidden:focus-visible {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .focus-visible\:outline-1:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .focus-visible\:outline-ring:focus-visible {
+    outline-color: var(--ring);
+  }
+
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
+  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .has-\[\>svg\]\:px-2\.5:has( > svg) {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .has-\[\>svg\]\:px-3:has( > svg) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .has-\[\>svg\]\:px-4:has( > svg) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .has-\[\>svg\]\:px-8:has( > svg) {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+
+  .aria-invalid\:border-destructive[aria-invalid="true"] {
+    border-color: var(--destructive);
+  }
+
+  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .aria-selected\:bg-accent[aria-selected="true"] {
+    background-color: var(--accent);
+  }
+
+  .aria-selected\:bg-primary[aria-selected="true"] {
+    background-color: var(--primary);
+  }
+
+  .aria-selected\:text-accent-foreground[aria-selected="true"] {
+    color: var(--accent-foreground);
+  }
+
+  .aria-selected\:text-muted-foreground[aria-selected="true"] {
+    color: var(--muted-foreground);
+  }
+
+  .aria-selected\:text-primary-foreground[aria-selected="true"] {
+    color: var(--primary-foreground);
+  }
+
+  .aria-selected\:opacity-100[aria-selected="true"] {
+    opacity: 1;
+  }
+
+  .data-\[disabled\]\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+
+  .data-\[disabled\]\:opacity-50[data-disabled] {
+    opacity: .5;
+  }
+
+  .data-\[orientation\=horizontal\]\:h-4[data-orientation="horizontal"] {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
+    height: 100%;
+  }
+
+  .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
+    height: 1px;
+  }
+
+  .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
+    width: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
+    height: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
+    min-height: calc(var(--spacing) * 44);
+  }
+
+  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
+    width: calc(var(--spacing) * 1.5);
+  }
+
+  .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
+    width: auto;
+  }
+
+  .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
+    width: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
+    width: 1px;
+  }
+
+  .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
+    --tw-translate-y: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+
+  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
+    --tw-translate-x: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing));
+  }
+
+  .data-\[size\=default\]\:h-9[data-size="default"] {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .data-\[size\=sm\]\:h-8[data-size="sm"] {
+    height: calc(var(--spacing) * 8);
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
+    display: flex;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
+    align-items: center;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .data-\[state\=active\]\:bg-card[data-state="active"] {
+    background-color: var(--card);
+  }
+
+  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
+    border-color: var(--primary);
+  }
+
+  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
+    background-color: var(--primary);
+  }
+
+  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
+    color: var(--primary-foreground);
+  }
+
+  .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
+    animation: accordion-up var(--tw-duration, .2s) ease-out;
+  }
+
+  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
+    animation: exit var(--tw-duration, .15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+    --tw-exit-opacity: 0;
+  }
+
+  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+    --tw-exit-scale: .95;
+  }
+
+  .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
+    animation: accordion-down var(--tw-duration, .2s) ease-out;
+  }
+
+  .data-\[state\=open\]\:animate-in[data-state="open"] {
+    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=open\]\:bg-accent[data-state="open"] {
+    background-color: var(--accent);
+  }
+
+  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
+    --tw-enter-opacity: 0;
+  }
+
+  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+    --tw-enter-scale: .95;
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-md {
+      max-width: var(--container-md);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:items-center {
+      align-items: center;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:text-left {
+      text-align: left;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:mb-16 {
+      margin-bottom: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:block {
+      display: block;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex {
+      display: flex;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:hidden {
+      display: none;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-72 {
+      height: calc(var(--spacing) * 72);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-\[500px\] {
+      height: 500px;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-auto {
+      height: auto;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-full {
+      height: 100%;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-24 {
+      width: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-48 {
+      width: calc(var(--spacing) * 48);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-96 {
+      width: calc(var(--spacing) * 96);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-auto {
+      width: auto;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex-shrink {
+      flex-shrink: 1;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex-shrink-0 {
+      flex-shrink: 0;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 48rem) {
+    :where(.md\:space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+
+  @media (width >= 48rem) {
+    :where(.md\:space-x-8 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:p-12 {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:py-16 {
+      padding-block: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:py-24 {
+      padding-block: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:pl-16 {
+      padding-left: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-2xl {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-3xl {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-4xl {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-6xl {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-lg {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:sticky {
+      position: sticky;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:top-20 {
+      top: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:top-32 {
+      top: calc(var(--spacing) * 32);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:top-\[-7rem\] {
+      top: -7rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:-right-12 {
+      right: calc(var(--spacing) * -12);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:right-20 {
+      right: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:right-\[calc$50\%-100px-10\.25rem$\] {
+      right: calc(50% - 100px - 10.25rem);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:bottom-16 {
+      bottom: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:bottom-\[-7rem\] {
+      bottom: -7rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:-left-8 {
+      left: calc(var(--spacing) * -8);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:left-16 {
+      left: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:left-\[calc$50\%-100px-10\.25rem$\] {
+      left: calc(50% - 100px - 10.25rem);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:order-1 {
+      order: 1;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:order-2 {
+      order: 2;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:mb-20 {
+      margin-bottom: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:block {
+      display: block;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid {
+      display: grid;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:hidden {
+      display: none;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-4 {
+      height: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-5 {
+      height: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-6 {
+      height: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-8 {
+      height: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-9 {
+      height: calc(var(--spacing) * 9);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-10 {
+      height: calc(var(--spacing) * 10);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-11 {
+      height: calc(var(--spacing) * 11);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-12 {
+      height: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-\[22rem\] {
+      height: 22rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-\[28rem\] {
+      height: 28rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-\[440px\] {
+      height: 440px;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-\[480px\] {
+      height: 480px;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:h-\[500px\] {
+      height: 500px;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-1\/2 {
+      width: 50%;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-4 {
+      width: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-5 {
+      width: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-6 {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-8 {
+      width: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-9 {
+      width: calc(var(--spacing) * 9);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-10 {
+      width: calc(var(--spacing) * 10);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-11 {
+      width: calc(var(--spacing) * 11);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-12 {
+      width: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-18 {
+      width: calc(var(--spacing) * 18);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-20 {
+      width: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-22 {
+      width: calc(var(--spacing) * 22);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-24 {
+      width: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-60 {
+      width: calc(var(--spacing) * 60);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-64 {
+      width: calc(var(--spacing) * 64);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-\[22rem\] {
+      width: 22rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-\[28rem\] {
+      width: 28rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:w-\[400px\] {
+      width: 400px;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:justify-end {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:gap-12 {
+      gap: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:gap-16 {
+      gap: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:gap-20 {
+      gap: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    :where(.lg\:space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:border-8 {
+      border-style: var(--tw-border-style);
+      border-width: 8px;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:p-16 {
+      padding: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:py-20 {
+      padding-block: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:py-24 {
+      padding-block: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:py-32 {
+      padding-block: calc(var(--spacing) * 32);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:pr-4 {
+      padding-right: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:pl-16 {
+      padding-left: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:pl-24 {
+      padding-left: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-2xl {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-4xl {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-6xl {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-7xl {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:h-\[26rem\] {
+      height: 26rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:h-\[32rem\] {
+      height: 32rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:h-\[480px\] {
+      height: 480px;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:h-\[540px\] {
+      height: 540px;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:w-64 {
+      width: calc(var(--spacing) * 64);
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:w-72 {
+      width: calc(var(--spacing) * 72);
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:w-\[26rem\] {
+      width: 26rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:w-\[32rem\] {
+      width: 32rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:w-\[450px\] {
+      width: 450px;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:gap-20 {
+      gap: calc(var(--spacing) * 20);
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:pl-24 {
+      padding-left: calc(var(--spacing) * 24);
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:text-6xl {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+
+  .dark\:border-input:is(.dark *) {
+    border-color: var(--input);
+  }
+
+  .dark\:bg-destructive\/60:is(.dark *) {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-destructive\/60:is(.dark *) {
+      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+    }
+  }
+
+  .dark\:bg-input\/30:is(.dark *) {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-input\/30:is(.dark *) {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:text-muted-foreground:is(.dark *) {
+    color: var(--muted-foreground);
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+      background-color: var(--accent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-input\/50:is(.dark *):hover {
+      background-color: var(--input);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-input\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--input) 50%, transparent);
+      }
+    }
+  }
+
+  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
+    border-color: var(--input);
+  }
+
+  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
+    color: var(--foreground);
+  }
+
+  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
+    background-color: var(--primary);
+  }
+
+  .\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+
+  .\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+
+  .\[\&_svg\:not$\[class\*\=\'size-\'\]$\]\:size-4 svg:not([class*="size-"]) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .\[\&_svg\:not$\[class\*\=\'text-\'\]$\]\:text-muted-foreground svg:not([class*="text-"]) {
+    color: var(--muted-foreground);
+  }
+
+  .\[\&\:has$\>\.day-range-end$\]\:rounded-r-md:has( > .day-range-end) {
+    border-top-right-radius: calc(var(--radius)  - 2px);
+    border-bottom-right-radius: calc(var(--radius)  - 2px);
+  }
+
+  .\[\&\:has$\>\.day-range-start$\]\:rounded-l-md:has( > .day-range-start) {
+    border-top-left-radius: calc(var(--radius)  - 2px);
+    border-bottom-left-radius: calc(var(--radius)  - 2px);
+  }
+
+  .\[\&\:has$\[aria-selected\]$\]\:rounded-md:has([aria-selected]) {
+    border-radius: calc(var(--radius)  - 2px);
+  }
+
+  .\[\&\:has$\[aria-selected\]$\]\:bg-accent:has([aria-selected]) {
+    background-color: var(--accent);
+  }
+
+  .first\:\[\&\:has$\[aria-selected\]$\]\:rounded-l-md:first-child:has([aria-selected]) {
+    border-top-left-radius: calc(var(--radius)  - 2px);
+    border-bottom-left-radius: calc(var(--radius)  - 2px);
+  }
+
+  .last\:\[\&\:has$\[aria-selected\]$\]\:rounded-r-md:last-child:has([aria-selected]) {
+    border-top-right-radius: calc(var(--radius)  - 2px);
+    border-bottom-right-radius: calc(var(--radius)  - 2px);
+  }
+
+  .\[\&\:has$\[aria-selected\]\.day-range-end$\]\:rounded-r-md:has([aria-selected].day-range-end) {
+    border-top-right-radius: calc(var(--radius)  - 2px);
+    border-bottom-right-radius: calc(var(--radius)  - 2px);
+  }
+
+  .\[\&\:has$\[data-state\=checked\]$\]\:border-primary:has([data-state="checked"]) {
+    border-color: var(--primary);
+  }
+
+  .\[\.border-b\]\:pb-6.border-b {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\.border-t\]\:pt-6.border-t {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
+    display: flex;
+  }
+
+  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
+    align-items: center;
+  }
+
+  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .\[\&\:last-child\]\:pb-6:last-child {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\&\>span\]\:font-medium > span {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .\[\&\>span\]\:text-white > span {
+    color: var(--color-white);
+  }
+
+  .\[\&\>svg\]\:pointer-events-none > svg {
+    pointer-events: none;
+  }
+
+  .\[\&\>svg\]\:size-3 > svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+
+  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
+    rotate: 180deg;
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+}
+
+
+:root {
+  --font-size: 14px;
+  --background: #fff;
+  --foreground: oklch(.145 0 0);
+  --card: #fff;
+  --card-foreground: oklch(.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(.145 0 0);
+  --primary: #f95f62;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: #f95f62;
+  --secondary-foreground: #fff;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #030213;
+  --destructive: #d4183d;
+  --destructive-foreground: #fff;
+  --border: #0000001a;
+  --input: transparent;
+  --input-background: #f3f3f5;
+  --switch-background: #cbced4;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: oklch(.708 0 0);
+  --chart-1: oklch(.646 .222 41.116);
+  --chart-2: oklch(.6 .118 184.704);
+  --chart-3: oklch(.398 .07 227.392);
+  --chart-4: oklch(.828 .189 84.429);
+  --chart-5: oklch(.769 .188 70.08);
+  --radius: .625rem;
+  --sidebar: oklch(.985 0 0);
+  --sidebar-foreground: oklch(.145 0 0);
+  --sidebar-primary: #030213;
+  --sidebar-primary-foreground: oklch(.985 0 0);
+  --sidebar-accent: oklch(.97 0 0);
+  --sidebar-accent-foreground: oklch(.205 0 0);
+  --sidebar-border: oklch(.922 0 0);
+  --sidebar-ring: oklch(.708 0 0);
+}
+
+.dark {
+  --background: oklch(.145 0 0);
+  --foreground: oklch(.985 0 0);
+  --card: oklch(.145 0 0);
+  --card-foreground: oklch(.985 0 0);
+  --popover: oklch(.145 0 0);
+  --popover-foreground: oklch(.985 0 0);
+  --primary: #f95f62;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: #f95f62;
+  --secondary-foreground: oklch(.985 0 0);
+  --muted: oklch(.269 0 0);
+  --muted-foreground: oklch(.708 0 0);
+  --accent: oklch(.269 0 0);
+  --accent-foreground: oklch(.985 0 0);
+  --destructive: oklch(.396 .141 25.723);
+  --destructive-foreground: oklch(.637 .237 25.331);
+  --border: oklch(.269 0 0);
+  --input: oklch(.269 0 0);
+  --ring: oklch(.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: oklch(.488 .243 264.376);
+  --chart-2: oklch(.696 .17 162.48);
+  --chart-3: oklch(.769 .188 70.08);
+  --chart-4: oklch(.627 .265 303.9);
+  --chart-5: oklch(.645 .246 16.439);
+  --sidebar: oklch(.205 0 0);
+  --sidebar-foreground: oklch(.985 0 0);
+  --sidebar-primary: oklch(.488 .243 264.376);
+  --sidebar-primary-foreground: oklch(.985 0 0);
+  --sidebar-accent: oklch(.269 0 0);
+  --sidebar-accent-foreground: oklch(.985 0 0);
+  --sidebar-border: oklch(.269 0 0);
+  --sidebar-ring: oklch(.439 0 0);
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+:root {
+  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
+  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
+  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
+  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
+  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
+}
+
+.animate-fade-in {
+  animation: fadeIn .4s var(--ease-out-quart) forwards;
+}
+
+.animate-slide-up {
+  animation: slideUp .5s var(--ease-out-expo) forwards;
+}
+
+.animate-scale-in {
+  animation: scaleIn .35s var(--ease-out-quint) forwards;
+}
+
+.animate-bounce-in {
+  animation: bounceIn .4s var(--ease-out-expo) forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(.9)translateY(20px);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale(1.02)translateY(-3px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)translateY(0);
+  }
+}
+
+.interactive-card {
+  transition: all .2s var(--ease-out-cubic);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.interactive-card:hover {
+  transform: translateY(-2px)scale(1.01);
+  box-shadow: 0 10px 25px -5px #0000001a, 0 0 0 1px #f95f621a;
+}
+
+.interactive-button {
+  transition: all .2s var(--ease-out-quart);
+  position: relative;
+  overflow: hidden;
+}
+
+.interactive-button:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  transition: left .4s var(--ease-out-cubic);
+  background: linear-gradient(90deg, #0000, #ffffff26, #0000);
+  position: absolute;
+  top: 0;
+  left: -100%;
+}
+
+.interactive-button:hover:before {
+  left: 100%;
+}
+
+.interactive-button:hover {
+  transform: translateY(-1px)scale(1.02);
+  box-shadow: 0 0 20px #f95f624d, 0 10px 20px -5px #0000001a;
+}
+
+.interactive-icon {
+  transition: all .2s var(--ease-out-expo);
+  transform-origin: center;
+}
+
+.interactive-icon:hover {
+  color: var(--primary);
+  filter: drop-shadow(0 0 8px #f95f624d);
+  transform: scale(1.15)rotate(5deg);
+}
+
+.micro-bounce {
+  animation: microBounce .3s var(--ease-out-expo);
+}
+
+@keyframes microBounce {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.micro-shake {
+  animation: microShake .4s var(--ease-out-cubic);
+}
+
+@keyframes microShake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-2px);
+  }
+
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+.micro-glow {
+  transition: all .2s var(--ease-out-cubic);
+}
+
+.micro-glow:hover {
+  filter: drop-shadow(0 0 12px #f95f6266);
+}
+
+.card-hover-lift {
+  transition: all .3s var(--ease-out-quart);
+  transform-origin: center;
+}
+
+.card-hover-lift:hover {
+  transform: translateY(-8px)rotateX(2deg);
+  box-shadow: 0 25px 50px -12px #00000026, 0 0 0 1px #f95f6214;
+}
+
+.card-hover-tilt {
+  transition: all .3s var(--ease-out-cubic);
+  transform-style: preserve-3d;
+}
+
+.card-hover-tilt:hover {
+  transform: perspective(1000px)rotateX(3deg)rotateY(-2deg)translateY(-5px);
+}
+
+.text-shimmer {
+  background: linear-gradient(90deg, var(--foreground) 0%, var(--primary) 50%, var(--foreground) 100%);
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: 2s linear infinite shimmer;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.text-gradient-shift {
+  background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  background-clip: text;
+  animation: 3s ease-in-out infinite gradientShift;
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    background-position: 0%;
+  }
+
+  50% {
+    background-position: 100%;
+  }
+}
+
+.animate-gradient-shift {
+  animation: 4s ease-in-out infinite gradientShift;
+}
+
+.button-loading {
+  pointer-events: none;
+  position: relative;
+}
+
+.button-loading:after {
+  content: "";
+  border: 2px solid #0000;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  animation: 1s linear infinite spin;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.stagger-delay-1 {
+  animation-delay: .1s;
+}
+
+.stagger-delay-2 {
+  animation-delay: .2s;
+}
+
+.stagger-delay-3 {
+  animation-delay: .3s;
+}
+
+.stagger-delay-4 {
+  animation-delay: .4s;
+}
+
+.stagger-delay-5 {
+  animation-delay: .5s;
+}
+
+.scroll-reveal {
+  opacity: 0;
+  transition: all .5s var(--ease-out-quart);
+  transform: translateY(30px);
+}
+
+.scroll-reveal.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-scale {
+  opacity: 0;
+  transition: all .4s var(--ease-out-expo);
+  transform: scale(.9);
+}
+
+.scroll-scale.revealed {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.navbar-scroll {
+  transition: all .3s var(--ease-out-cubic);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.navbar-scroll.scrolled {
+  background: #fffffff2;
+  border-bottom: 1px solid #0000000d;
+  box-shadow: 0 4px 6px -1px #0000001a;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: 3s ease-in-out infinite float;
+}
+
+.animate-delay-1000 {
+  animation-delay: 1s;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+@keyframes moveLeft {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes moveRight {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(-100%)scaleX(0);
+  }
+
+  50% {
+    transform: translateX(0%)scaleX(1);
+  }
+
+  100% {
+    transform: translateX(100%)scaleX(0);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    opacity: .4;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: .8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glowPulse {
+  0%, 100% {
+    opacity: .3;
+  }
+
+  50% {
+    opacity: .7;
+  }
+}
+
+.animate-moveLeft {
+  animation: 30s linear infinite moveLeft;
+}
+
+.hover\:pause:hover {
+  animation-play-state: paused;
+}
+
+.animate-moveRight {
+  animation: 30s linear infinite moveRight;
+}
+
+.animate-wave {
+  animation: 2s ease-in-out infinite wave;
+}
+
+.animate-glow {
+  animation: 2s ease-in-out infinite glow;
+}
+
+.animate-glow-pulse {
+  animation: 2s ease-in-out infinite glowPulse;
+}
+
+@keyframes scrollHorizontal {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.horizontal-scroll-track {
+  will-change: transform;
+}
+
+.horizontal-scroll-track:hover {
+  animation-play-state: paused;
+}
+
+.gpu-accelerated {
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.will-change-transform {
+  will-change: transform;
+}
+
+.will-change-auto {
+  will-change: auto;
+}
+
+@media (width <= 768px) {
+  .interactive-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px #0000001a;
+  }
+
+  .interactive-button:hover {
+    transform: scale(1.01);
+  }
+
+  .card-hover-lift:hover {
+    transform: translateY(-4px);
+  }
+
+  .horizontal-scroll-track {
+    gap: 1.5rem !important;
+    animation: 60s linear infinite scrollHorizontal !important;
+  }
+
+  .horizontal-scroll-track > div {
+    width: 16rem !important;
+    height: 18rem !important;
+  }
+}
+
+@media (width <= 1024px) and (width >= 769px) {
+  .horizontal-scroll-track {
+    gap: 1.75rem !important;
+    animation: 70s linear infinite scrollHorizontal !important;
+  }
+
+  .horizontal-scroll-track > div {
+    width: 17rem !important;
+    height: 19rem !important;
+  }
+}
+
+.flip-card-container {
+  perspective: 1000px;
+}
+
+.flip-card-inner {
+  transform-style: preserve-3d;
+  width: 100%;
+  height: 100%;
+  transition: transform .8s cubic-bezier(.23, 1, .32, 1);
+  position: relative;
+}
+
+.flip-card-face {
+  backface-visibility: hidden;
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, :before, :after {
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+
+  .interactive-card, .interactive-button, .card-hover-lift, .card-hover-tilt, .horizontal-scroll-track, .flip-card-inner {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+.focus-ring {
+  transition: all .2s var(--ease-out-cubic);
+}
+
+.focus-ring:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px #f95f621a;
+}
+
+@media (prefers-contrast: high) {
+  .interactive-card:hover {
+    outline: 2px solid;
+  }
+
+  .interactive-button {
+    border: 2px solid;
+  }
+}
+
+.bg-gradient-radial {
+  background: radial-gradient(circle at center, var(--tw-gradient-stops));
+}
+
+@keyframes scrollUp {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes scrollDown {
+  0% {
+    transform: translateY(-50%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-scrollUp {
+  will-change: transform;
+  animation: 20s linear infinite scrollUp;
+}
+
+.animate-scrollDown {
+  will-change: transform;
+  animation: 20s linear infinite scrollDown;
+}
+
+.animate-scrollUp:hover, .animate-scrollDown:hover {
+  animation-play-state: paused;
+}
+
+.grid-cols-21 {
+  grid-template-columns: repeat(21, minmax(0, 1fr));
+}
+
+.grid-cols-17 {
+  grid-template-columns: repeat(17, minmax(0, 1fr));
+}
+
+.grid-cols-23 {
+  grid-template-columns: repeat(23, minmax(0, 1fr));
+}
+
+.grid-cols-25 {
+  grid-template-columns: repeat(25, minmax(0, 1fr));
+}
+
+.grid-cols-27 {
+  grid-template-columns: repeat(27, minmax(0, 1fr));
+}
+
+.w-120 {
+  width: 30rem;
+}
+
+.h-120 {
+  height: 30rem;
+}
+
+@keyframes shine {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%)skewX(-12deg);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(100%)skewX(-12deg);
+  }
+}
+
+.animate-shine {
+  animation: 3s ease-in-out 1s infinite shine;
+}
+
+@keyframes spin-slow {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: 4s linear infinite spin-slow;
+}
+
+.faq-card {
+  background: #fff;
+  border: 2px solid #0000;
+  transition: all .3s;
+  position: relative;
+}
+
+.faq-card:hover {
+  background: linear-gradient(white, white) padding-box, conic-gradient(from var(--angle, 0deg), transparent 60%, #f95f62 75%, #f95f62 90%, transparent 100%) border-box;
+  animation: 3s linear infinite snakeBorder;
+}
+
+@keyframes snakeBorder {
+  0% {
+    --angle: 0deg;
+  }
+
+  100% {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
+
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
+  }
+
+  to {
+    height: 0;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..23d3462
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,7 @@
+
+  import { createRoot } from "react-dom/client";
+  import App from "./App";
+  import "./index.css";
+
+  createRoot(document.getElementById("root")!).render(<App />);
+  
\ No newline at end of file
diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/replace_fonts.sh b/src/replace_fonts.sh
new file mode 100644
index 0000000..19bf487
--- /dev/null
+++ b/src/replace_fonts.sh
@@ -0,0 +1,44 @@
+#!/bin/bash
+
+# Script to replace all font-merchant with font-poppins across the project
+
+# List of files to update
+files=(
+  "components/BlogsPage.tsx"
+  "components/ProfilePage.tsx"
+  "components/EsimsPage.tsx"
+  "components/AttractionsPage.tsx"
+  "components/FAQPage.tsx"
+  "components/MelbourneBlogs.tsx"
+  "components/CityAttractionsPage.tsx"
+  "components/BlogDetailsPage.tsx"
+  "components/VarietyOfAdventures.tsx"
+  "components/MelbourneFAQ.tsx"
+  "components/MelbourneCardComparison.tsx"
+  "components/BookAttractionSection.tsx"
+  "components/PassesPage.tsx"
+  "components/CheckoutPage.tsx"
+  "components/DownloadAppPage.tsx"
+  "components/HotelDiscountsPage.tsx"
+  "components/OffersPage.tsx"
+  "components/CityCardsPage.tsx"
+  "components/MagicItineraryPage.tsx"
+  "components/PostCardsPage.tsx"
+  "components/CreateMagicItineraryPage.tsx"
+  "components/ItineraryViewPage.tsx"
+  "components/ContactUsPage.tsx"
+  "components/SecureCheckoutPage.tsx"
+  "components/AttractionDetailsPage.tsx"
+  "components/AboutUsPage.tsx"
+  "components/PrivacyPolicyPage.tsx"
+)
+
+# Replace font-merchant with font-poppins in each file
+for file in "${files[@]}"; do
+  if [ -f "$file" ]; then
+    echo "Processing $file..."
+    sed -i 's/font-merchant/font-poppins/g' "$file"
+  fi
+done
+
+echo "Font replacement complete!"
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..a47148b
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,894 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 14px;
+  --background: #ffffff;
+  --foreground: oklch(0.145 0 0);
+  --card: #ffffff;
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #F95F62;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: #F95F62;
+  --secondary-foreground: #ffffff;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #030213;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(0, 0, 0, 0.1);
+  --input: transparent;
+  --input-background: #f3f3f5;
+  --switch-background: #cbced4;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: #030213;
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #F95F62;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: #F95F62;
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  /* All text uses Poppins font */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  /* Utility class for explicit font usage */
+  .font-poppins {
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Enhanced Typography Utilities for Dynamic Combinations */
+  .heading-dynamic {
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  /* Typography combination classes - Using Poppins weights */
+  .text-medium-semibold .medium {
+    font-weight: 500;
+  }
+  
+  .text-medium-semibold .semibold {
+    font-weight: 600;
+  }
+
+  /* Gradient text utility for emphasis */
+  .text-gradient-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+
+  /* Enhanced emphasis utilities */
+  .text-emphasis {
+    font-style: italic;
+    position: relative;
+  }
+
+  .text-emphasis::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    opacity: 0.6;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+  }
+
+  .text-emphasis:hover::after {
+    transform: scaleX(1);
+  }
+}
+
+/**
+ * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
+ */
+@layer base {
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
+    h1 {
+      font-size: var(--text-2xl);
+      font-weight: 500; /* Poppins Medium */
+      line-height: 1.4;
+    }
+
+    h2 {
+      font-size: var(--text-xl);
+      font-weight: 500; /* Poppins Medium */
+      line-height: 1.4;
+    }
+
+    h3 {
+      font-size: var(--text-lg);
+      font-weight: 600; /* Poppins SemiBold */
+      line-height: 1.4;
+    }
+
+    h4 {
+      font-size: var(--text-base);
+      font-weight: 600; /* Poppins SemiBold */
+      line-height: 1.4;
+    }
+
+    p {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.6;
+    }
+
+    label {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal); /* Lighter for better hierarchy */
+      line-height: 1.5;
+    }
+
+    button {
+      font-size: var(--text-base);
+      font-weight: 500; /* font-medium for subtle emphasis */
+      line-height: 1.5;
+    }
+
+    input {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.5;
+    }
+  }
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+/* Professional Animation Easing Variables */
+:root {
+  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+/* Enhanced Global Animation Classes */
+.animate-fade-in {
+  animation: fadeIn 0.4s var(--ease-out-quart) forwards;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.5s var(--ease-out-expo) forwards;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.35s var(--ease-out-quint) forwards;
+}
+
+.animate-bounce-in {
+  animation: bounceIn 0.4s var(--ease-out-expo) forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(30px);
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from { 
+    opacity: 0; 
+    transform: scale(0.95);
+  }
+  to { 
+    opacity: 1; 
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% { 
+    opacity: 0; 
+    transform: scale(0.9) translateY(20px);
+  }
+  60% { 
+    opacity: 1; 
+    transform: scale(1.02) translateY(-3px);
+  }
+  100% { 
+    opacity: 1; 
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Enhanced Interactive Elements */
+.interactive-card {
+  transition: all 0.2s var(--ease-out-cubic);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.interactive-card:hover {
+  transform: translateY(-2px) scale(1.01);
+  box-shadow: 
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(249, 95, 98, 0.1);
+}
+
+.interactive-button {
+  transition: all 0.2s var(--ease-out-quart);
+  position: relative;
+  overflow: hidden;
+}
+
+.interactive-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+  transition: left 0.4s var(--ease-out-cubic);
+}
+
+.interactive-button:hover::before {
+  left: 100%;
+}
+
+.interactive-button:hover {
+  transform: translateY(-1px) scale(1.02);
+  box-shadow: 
+    0 0 20px rgba(249, 95, 98, 0.3),
+    0 10px 20px -5px rgba(0, 0, 0, 0.1);
+}
+
+.interactive-icon {
+  transition: all 0.2s var(--ease-out-expo);
+  transform-origin: center;
+}
+
+.interactive-icon:hover {
+  transform: scale(1.15) rotate(5deg);
+  color: var(--primary);
+  filter: drop-shadow(0 0 8px rgba(249, 95, 98, 0.3));
+}
+
+/* Micro-interaction Classes */
+.micro-bounce {
+  animation: microBounce 0.3s var(--ease-out-expo);
+}
+
+@keyframes microBounce {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.micro-shake {
+  animation: microShake 0.4s var(--ease-out-cubic);
+}
+
+@keyframes microShake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+}
+
+.micro-glow {
+  transition: all 0.2s var(--ease-out-cubic);
+}
+
+.micro-glow:hover {
+  filter: drop-shadow(0 0 12px rgba(249, 95, 98, 0.4));
+}
+
+/* Enhanced Card Hover Effects */
+.card-hover-lift {
+  transition: all 0.3s var(--ease-out-quart);
+  transform-origin: center;
+}
+
+.card-hover-lift:hover {
+  transform: translateY(-8px) rotateX(2deg);
+  box-shadow: 
+    0 25px 50px -12px rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(249, 95, 98, 0.08);
+}
+
+.card-hover-tilt {
+  transition: all 0.3s var(--ease-out-cubic);
+  transform-style: preserve-3d;
+}
+
+.card-hover-tilt:hover {
+  transform: perspective(1000px) rotateX(3deg) rotateY(-2deg) translateY(-5px);
+}
+
+/* Text Animation Effects */
+.text-shimmer {
+  background: linear-gradient(90deg, 
+    var(--foreground) 0%, 
+    var(--primary) 50%, 
+    var(--foreground) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 2s linear infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.text-gradient-shift {
+  background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientShift 3s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.animate-gradient-shift {
+  animation: gradientShift 4s ease-in-out infinite;
+}
+
+/* Button State Animations */
+.button-loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.button-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Stagger Animation Delays */
+.stagger-delay-1 { animation-delay: 0.1s; }
+.stagger-delay-2 { animation-delay: 0.2s; }
+.stagger-delay-3 { animation-delay: 0.3s; }
+.stagger-delay-4 { animation-delay: 0.4s; }
+.stagger-delay-5 { animation-delay: 0.5s; }
+
+/* Enhanced Scroll Animations */
+.scroll-reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.5s var(--ease-out-quart);
+}
+
+.scroll-reveal.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all 0.4s var(--ease-out-expo);
+}
+
+.scroll-scale.revealed {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Navigation Scroll Effects */
+.navbar-scroll {
+  transition: all 0.3s var(--ease-out-cubic);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.navbar-scroll.scrolled {
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Custom animations */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-delay-1000 {
+  animation-delay: 1s;
+}
+
+/* Hide scrollbar for carousel */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Wave animations for Magic Experience carousel */
+@keyframes moveLeft {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes moveRight {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes wave {
+  0% { transform: translateX(-100%) scaleX(0); }
+  50% { transform: translateX(0%) scaleX(1); }
+  100% { transform: translateX(100%) scaleX(0); }
+}
+
+@keyframes glow {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glowPulse {
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-moveLeft {
+  animation: moveLeft 30s linear infinite;
+}
+
+.hover\:pause:hover {
+  animation-play-state: paused;
+}
+
+.animate-moveRight {
+  animation: moveRight 30s linear infinite;
+}
+
+.animate-wave {
+  animation: wave 2s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+.animate-glow-pulse {
+  animation: glowPulse 2s ease-in-out infinite;
+}
+
+/* Horizontal Scrolling Carousel Animation */
+@keyframes scrollHorizontal {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.horizontal-scroll-track {
+  will-change: transform;
+}
+
+/* Pause animation on hover for better UX */
+.horizontal-scroll-track:hover {
+  animation-play-state: paused;
+}
+
+/* Performance Optimizations */
+.gpu-accelerated {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+.will-change-transform {
+  will-change: transform;
+}
+
+.will-change-auto {
+  will-change: auto;
+}
+
+/* Mobile Optimizations for Horizontal Carousel */
+@media (max-width: 768px) {
+  .interactive-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+  
+  .interactive-button:hover {
+    transform: scale(1.01);
+  }
+  
+  .card-hover-lift:hover {
+    transform: translateY(-4px);
+  }
+
+  /* Smaller cards and faster animation on mobile */
+  .horizontal-scroll-track {
+    gap: 1.5rem !important;
+    animation: scrollHorizontal 60s linear infinite !important;
+  }
+  
+  .horizontal-scroll-track > div {
+    width: 16rem !important;
+    height: 18rem !important;
+  }
+}
+
+/* Tablet optimizations */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .horizontal-scroll-track {
+    gap: 1.75rem !important;
+    animation: scrollHorizontal 70s linear infinite !important;
+  }
+  
+  .horizontal-scroll-track > div {
+    width: 17rem !important;
+    height: 19rem !important;
+  }
+}
+
+/* Flip Card 3D Animation Styles */
+.flip-card-container {
+  perspective: 1000px;
+}
+
+.flip-card-inner {
+  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-style: preserve-3d;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.flip-card-face {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  .interactive-card,
+  .interactive-button,
+  .card-hover-lift,
+  .card-hover-tilt,
+  .horizontal-scroll-track,
+  .flip-card-inner {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Focus States for Accessibility */
+.focus-ring {
+  transition: all 0.2s var(--ease-out-cubic);
+}
+
+.focus-ring:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(249, 95, 98, 0.1);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .interactive-card:hover {
+    outline: 2px solid currentColor;
+  }
+  
+  .interactive-button {
+    border: 2px solid currentColor;
+  }
+}
+
+/* Radial gradient utility */
+.bg-gradient-radial {
+  background: radial-gradient(circle at center, var(--tw-gradient-stops));
+}
+
+/* Vertical scrolling animations for hero section */
+@keyframes scrollUp {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes scrollDown {
+  0% {
+    transform: translateY(-50%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-scrollUp {
+  animation: scrollUp 20s linear infinite;
+  will-change: transform;
+}
+
+.animate-scrollDown {
+  animation: scrollDown 20s linear infinite;
+  will-change: transform;
+}
+
+/* Pause animations on hover for better UX */
+.animate-scrollUp:hover,
+.animate-scrollDown:hover {
+  animation-play-state: paused;
+}
+
+/* QR Code Grid Utilities */
+.grid-cols-21 {
+  grid-template-columns: repeat(21, minmax(0, 1fr));
+}
+
+.grid-cols-17 {
+  grid-template-columns: repeat(17, minmax(0, 1fr));
+}
+
+.grid-cols-23 {
+  grid-template-columns: repeat(23, minmax(0, 1fr));
+}
+
+.grid-cols-25 {
+  grid-template-columns: repeat(25, minmax(0, 1fr));
+}
+
+.grid-cols-27 {
+  grid-template-columns: repeat(27, minmax(0, 1fr));
+}
+
+/* Large Size Utilities for QR Code */
+.w-120 {
+  width: 30rem; /* 480px */
+}
+
+.h-120 {
+  height: 30rem; /* 480px */
+}
+
+/* Continuous Shine Animation for Download Buttons */
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) skewX(-12deg);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%) skewX(-12deg);
+    opacity: 0;
+  }
+}
+
+.animate-shine {
+  animation: shine 3s ease-in-out infinite;
+  animation-delay: 1s;
+}
+
+/* Snake Border Animation for FAQ Cards */
+@keyframes spin-slow {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 4s linear infinite;
+}
+
+/* FAQ Card Snake Border Effect */
+.faq-card {
+  position: relative;
+  border: 2px solid transparent;
+  background: white;
+  transition: all 0.3s ease;
+}
+
+.faq-card:hover {
+  background: linear-gradient(white, white) padding-box,
+              conic-gradient(from var(--angle, 0deg), transparent 60%, #F95F62 75%, #F95F62 90%, transparent 100%) border-box;
+  animation: snakeBorder 3s linear infinite;
+}
+
+@keyframes snakeBorder {
+  0% {
+    --angle: 0deg;
+  }
+  100% {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
\ No newline at end of file
diff --git a/src/update_hotel_discounts_script.js b/src/update_hotel_discounts_script.js
new file mode 100644
index 0000000..c95afa4
--- /dev/null
+++ b/src/update_hotel_discounts_script.js
@@ -0,0 +1,16 @@
+// Script to add onHotelDiscountsClick to all pages in App.tsx
+const fs = require('fs');
+
+const filePath = './App.tsx';
+let content = fs.readFileSync(filePath, 'utf8');
+
+// Pattern to find: onEsimsClick={() => setCurrentPage('esims')}
+// followed by newline and NOT already having onHotelDiscountsClick
+
+const pattern = /(onEsimsClick=\{ => setCurrentPage$'esims'$\})\n(\s+)(currentPage=)/g;
+const replacement = `$1\n$2onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}\n$2$3`;
+
+content = content.replace(pattern, replacement);
+
+fs.writeFileSync(filePath, content, 'utf8');
+console.log('Updated App.tsx with onHotelDiscountsClick');
diff --git a/src/update_offers_script.js b/src/update_offers_script.js
new file mode 100644
index 0000000..9649ca4
--- /dev/null
+++ b/src/update_offers_script.js
@@ -0,0 +1,22 @@
+// Script to help update the remaining onOffersClick calls
+// This is just for reference - we'll do them manually
+
+const casesToUpdate = [
+  'blog-details',
+  'how-it-works', 
+  'faq',
+  'privacy-policy',
+  'about-us',
+  'citycards',
+  'magic-itinerary',
+  'postcards', 
+  'download-app',
+  'create-itinerary',
+  'itinerary-view'
+];
+
+// Each should be updated to:
+// onOffersClick={() => {
+//   setOffersSource('products');
+//   setCurrentPage('offers');
+// }}
diff --git a/src/update_remaining_pages.sh b/src/update_remaining_pages.sh
new file mode 100644
index 0000000..e989230
--- /dev/null
+++ b/src/update_remaining_pages.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# List of pages that need updating (excluding already updated ones)
+PAGES=(
+  "AttractionsPage"
+  "AttractionDetailsPage"
+  "BlogsPage"
+  "BlogDetailsPage"
+  "CheckoutPage"
+  "SecureCheckoutPage"
+  "HowItWorksPage"
+  "FAQPage"
+  "PrivacyPolicyPage"
+  "AboutUsPage"
+  "ProfilePage"
+  "CreateMagicItineraryPage"
+  "ItineraryViewPage"
+  "OffersPage"
+  "CityCardsPage"
+  "MagicItineraryPage"
+  "PostCardsPage"
+  "DownloadAppPage"
+  "EsimsPage"
+  "HotelDiscountsPage"
+)
+
+echo "Pages to update:"
+for page in "${PAGES[@]}"; do
+  echo "  - $page"
+done
diff --git a/src/utils/animations.ts b/src/utils/animations.ts
new file mode 100644
index 0000000..6aa429e
--- /dev/null
+++ b/src/utils/animations.ts
@@ -0,0 +1,232 @@
+// Enhanced easing curves for professional animations
+export const easeOutQuart = [0.25, 1, 0.5, 1] as const;
+export const easeOutExpo = [0.19, 1, 0.22, 1] as const;
+export const easeOutCubic = [0.33, 1, 0.68, 1] as const;
+
+// Hero section immediate load animations
+export const heroVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 30,
+    scale: 0.98
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.5,
+      ease: easeOutQuart,
+      delay: 0.2
+    }
+  }
+};
+
+// Main content scroll-triggered animations
+export const sectionVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 50,
+    transition: {
+      duration: 0.4,
+      ease: easeOutCubic
+    }
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: {
+      duration: 0.5,
+      ease: easeOutQuart
+    }
+  }
+};
+
+// Card/component level animations with scale
+export const cardVariants = {
+  hidden: { 
+    opacity: 0, 
+    scale: 0.95,
+    y: 30,
+    rotateX: 5
+  },
+  visible: { 
+    opacity: 1, 
+    scale: 1,
+    y: 0,
+    rotateX: 0,
+    transition: {
+      duration: 0.45,
+      ease: easeOutExpo
+    }
+  }
+};
+
+// Staggered container for sequential reveals
+export const staggerContainer = {
+  hidden: { opacity: 1 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05
+    }
+  }
+};
+
+// Fast stagger for dense content (cards, testimonials)
+export const fastStaggerContainer = {
+  hidden: { opacity: 1 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.08,
+      delayChildren: 0.02
+    }
+  }
+};
+
+// Heading-specific animations with letter spacing effect
+export const headingVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 20,
+    letterSpacing: "-0.01em",
+    scale: 0.99
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    letterSpacing: "0em",
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: easeOutQuart
+    }
+  }
+};
+
+// Text content animations
+export const textVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 15
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: {
+      duration: 0.35,
+      ease: easeOutCubic
+    }
+  }
+};
+
+// Button/CTA animations with micro-bounce
+export const ctaVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 20,
+    scale: 0.96
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: easeOutExpo,
+      delay: 0.15
+    }
+  }
+};
+
+// Icon micro-interactions
+export const iconVariants = {
+  hidden: { 
+    opacity: 0, 
+    scale: 0.8,
+    rotate: -5
+  },
+  visible: { 
+    opacity: 1, 
+    scale: 1,
+    rotate: 0,
+    transition: {
+      duration: 0.35,
+      ease: easeOutExpo,
+      delay: 0.1
+    }
+  }
+};
+
+// Mobile-optimized lighter animations
+export const mobileVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 20
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: {
+      duration: 0.3,
+      ease: easeOutCubic
+    }
+  }
+};
+
+// Background gradient animations
+export const backgroundVariants = {
+  hidden: { 
+    opacity: 0,
+    scale: 1.02
+  },
+  visible: { 
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.6,
+      ease: easeOutCubic
+    }
+  }
+};
+
+// Page transition variants
+export const pageTransition = {
+  initial: { opacity: 0, x: 10, scale: 0.99 },
+  animate: { opacity: 1, x: 0, scale: 1 },
+  exit: { opacity: 0, x: -10, scale: 0.99 },
+  transition: { duration: 0.35, ease: easeOutQuart }
+};
+
+// Enhanced hover effects
+export const buttonHoverVariants = {
+  rest: { 
+    scale: 1,
+    y: 0,
+    boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+    transition: { duration: 0.2, ease: easeOutCubic }
+  },
+  hover: { 
+    scale: 1.02,
+    y: -1,
+    boxShadow: "0 10px 15px -3px rgba(99, 102, 241, 0.2), 0 4px 6px -2px rgba(99, 102, 241, 0.1)",
+    transition: { duration: 0.2, ease: easeOutQuart }
+  }
+};
+
+export const cardHoverVariants = {
+  rest: { 
+    scale: 1,
+    y: 0,
+    rotateX: 0,
+    transition: { duration: 0.2, ease: easeOutCubic }
+  },
+  hover: { 
+    scale: 1.02,
+    y: -3,
+    rotateX: 1,
+    transition: { duration: 0.2, ease: easeOutQuart }
+  }
+};
\ No newline at end of file
diff --git a/src/utils/footerConstants.ts b/src/utils/footerConstants.ts
new file mode 100644
index 0000000..86afdeb
--- /dev/null
+++ b/src/utils/footerConstants.ts
@@ -0,0 +1,18 @@
+export const footerSections = {
+  explore: {
+    title: 'Explore',
+    links: ['Home', 'My Adventures', 'Cancellation policy']
+  },
+  learn: {
+    title: 'Learn',
+    links: ['How It Works', 'Safety Tips', 'FAQ', 'Blog']
+  },
+  community: {
+    title: 'Community',
+    links: ['Testimonials', 'Partner Stories', 'Events & Meetups', 'Newsletter']
+  },
+  support: {
+    title: 'Support',
+    links: ['Contact Us', 'Privacy Policy', 'Terms of Service']
+  }
+};
\ No newline at end of file
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
new file mode 100644
index 0000000..42c7da6
--- /dev/null
+++ b/src/utils/helpers.ts
@@ -0,0 +1,35 @@
+import { 
+  sectionVariants, 
+  cardVariants, 
+  headingVariants, 
+  textVariants, 
+  ctaVariants, 
+  iconVariants, 
+  mobileVariants 
+} from './animations';
+
+// Choose animation variants based on device and content type
+export const getVariants = (type: 'section' | 'card' | 'heading' | 'text' | 'cta' | 'icon', isMobile: boolean = false) => {
+  if (isMobile) return mobileVariants;
+  
+  switch (type) {
+    case 'section': return sectionVariants;
+    case 'card': return cardVariants;
+    case 'heading': return headingVariants;
+    case 'text': return textVariants;
+    case 'cta': return ctaVariants;
+    case 'icon': return iconVariants;
+    default: return sectionVariants;
+  }
+};
+
+// Enhanced viewport settings for different content types
+export const getViewportSettings = (type: 'hero' | 'section' | 'card' | 'footer') => {
+  switch (type) {
+    case 'hero': return { once: true, amount: 0.3 };
+    case 'section': return { once: true, margin: "-100px", amount: 0.15 };
+    case 'card': return { once: true, margin: "-80px", amount: 0.2 };
+    case 'footer': return { once: true, margin: "-50px", amount: 0.1 };
+    default: return { once: true, margin: "-100px", amount: 0.15 };
+  }
+};
\ No newline at end of file
diff --git a/src/utils/sections.ts b/src/utils/sections.ts
new file mode 100644
index 0000000..83a7602
--- /dev/null
+++ b/src/utils/sections.ts
@@ -0,0 +1,64 @@
+export interface SectionConfig {
+  id: string;
+  containerType: 'stagger' | 'fastStagger';
+  backgroundGradient?: string;
+  className?: string;
+  variantType: 'section' | 'card' | 'footer';
+}
+
+export const sectionsConfig: SectionConfig[] = [
+  {
+    id: 'why-choose-section',
+    containerType: 'stagger',
+    backgroundGradient: 'bg-gradient-to-b from-white via-gray-50/80 to-white',
+    variantType: 'section'
+  },
+  {
+    id: 'variety-adventures-section',
+    containerType: 'fastStagger',
+    backgroundGradient: 'bg-gradient-to-b from-gray-50/30 to-blue-50/20',
+    className: 'overflow-hidden',
+    variantType: 'card'
+  },
+  {
+    id: 'scroll-animated-journey-section',
+    containerType: 'stagger',
+    variantType: 'section'
+  },
+  {
+    id: 'magic-itinerary-section',
+    containerType: 'stagger',
+    variantType: 'card'
+  },
+  {
+    id: 'book-attraction-section',
+    containerType: 'stagger',
+    backgroundGradient: 'bg-gradient-to-l from-gray-50/60 to-blue-50/40',
+    variantType: 'section'
+  },
+  {
+    id: 'custom-postcards-section',
+    containerType: 'stagger',
+    backgroundGradient: 'bg-gradient-to-br from-pink-50/30 to-orange-50/20',
+    className: 'overflow-hidden',
+    variantType: 'card'
+  },
+  {
+    id: 'upcoming-cities-section',
+    containerType: 'fastStagger',
+    backgroundGradient: 'bg-gradient-to-b from-purple-50/40 to-pink-50/30',
+    variantType: 'card'
+  },
+  {
+    id: 'trust-section',
+    containerType: 'fastStagger',
+    backgroundGradient: 'bg-gradient-to-r from-blue-50/30 via-indigo-50/20 to-purple-50/30',
+    variantType: 'card'
+  },
+  {
+    id: 'mobile-app-section',
+    containerType: 'stagger',
+    backgroundGradient: 'bg-gradient-to-tr from-blue-50/50 to-indigo-50/40',
+    variantType: 'section'
+  }
+];
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3d0a51a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..65dbdb9
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..5a178b2
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,90 @@
+
+  import { defineConfig } from 'vite';
+  import react from '@vitejs/plugin-react-swc';
+import * as path from 'path';
+
+  export default defineConfig({
+    plugins: [react()],
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      alias: {
+        'vaul@1.1.2': 'vaul',
+        'sonner@2.0.3': 'sonner',
+        'recharts@2.15.2': 'recharts',
+        'react-resizable-panels@2.1.7': 'react-resizable-panels',
+        'react-hook-form@7.55.0': 'react-hook-form',
+        'react-day-picker@8.10.1': 'react-day-picker',
+        'next-themes@0.4.6': 'next-themes',
+        'lucide-react@0.487.0': 'lucide-react',
+        'input-otp@1.4.2': 'input-otp',
+        'figma:asset/f744b0d7006fc6835cbbb274a3da305f5e2da694.png': path.resolve(__dirname, './src/assets/f744b0d7006fc6835cbbb274a3da305f5e2da694.png'),
+        'figma:asset/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png': path.resolve(__dirname, './src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png'),
+        'figma:asset/e8091276ed2c976b5c975f21687b0d1702bd9c90.png': path.resolve(__dirname, './src/assets/e8091276ed2c976b5c975f21687b0d1702bd9c90.png'),
+        'figma:asset/e6f059f48d3002a2b93fc24b73fa49b61b8cd3ab.png': path.resolve(__dirname, './src/assets/e6f059f48d3002a2b93fc24b73fa49b61b8cd3ab.png'),
+        'figma:asset/e1947d1a05cd5bbd448c1ae6e6e9f2abd5d4ca10.png': path.resolve(__dirname, './src/assets/e1947d1a05cd5bbd448c1ae6e6e9f2abd5d4ca10.png'),
+        'figma:asset/da41b2748c2a938ba04e1663f300d2ad340eef5f.png': path.resolve(__dirname, './src/assets/da41b2748c2a938ba04e1663f300d2ad340eef5f.png'),
+        'figma:asset/cd153b02eb88c70a1ae2ef3b926d2e44cbcb8dd9.png': path.resolve(__dirname, './src/assets/cd153b02eb88c70a1ae2ef3b926d2e44cbcb8dd9.png'),
+        'figma:asset/b508859d8646554ff359c4dadcedccdfca7e7bfb.png': path.resolve(__dirname, './src/assets/b508859d8646554ff359c4dadcedccdfca7e7bfb.png'),
+        'figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png': path.resolve(__dirname, './src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png'),
+        'figma:asset/8b0be768b2331d5dcd1154cf3d9e4dc61e3d3afb.png': path.resolve(__dirname, './src/assets/8b0be768b2331d5dcd1154cf3d9e4dc61e3d3afb.png'),
+        'figma:asset/85a189eb1e1976493720fa5345a5f387c5edcc1a.png': path.resolve(__dirname, './src/assets/85a189eb1e1976493720fa5345a5f387c5edcc1a.png'),
+        'figma:asset/7b71a56a728fd21bca72228b78511c0072a1505f.png': path.resolve(__dirname, './src/assets/7b71a56a728fd21bca72228b78511c0072a1505f.png'),
+        'figma:asset/79434fd2c5fcae2b17fa09533dfcdb8584ce39c1.png': path.resolve(__dirname, './src/assets/79434fd2c5fcae2b17fa09533dfcdb8584ce39c1.png'),
+        'figma:asset/76883b8919dd779e35f1ab093b16410f6a465b3d.png': path.resolve(__dirname, './src/assets/76883b8919dd779e35f1ab093b16410f6a465b3d.png'),
+        'figma:asset/7077e1c38ee5bed14f41c98d52f5460c44c3a631.png': path.resolve(__dirname, './src/assets/7077e1c38ee5bed14f41c98d52f5460c44c3a631.png'),
+        'figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png': path.resolve(__dirname, './src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png'),
+        'figma:asset/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png': path.resolve(__dirname, './src/assets/66c6d4d2fa6c02d9f60e12fcde70c13d4a78d0b7.png'),
+        'figma:asset/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png': path.resolve(__dirname, './src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png'),
+        'figma:asset/5c46ee69599a58ad1a03823f5a76362b6aa14852.png': path.resolve(__dirname, './src/assets/5c46ee69599a58ad1a03823f5a76362b6aa14852.png'),
+        'figma:asset/574712bba8c579e168f68da6e27f45e0a691dc54.png': path.resolve(__dirname, './src/assets/574712bba8c579e168f68da6e27f45e0a691dc54.png'),
+        'figma:asset/5566b83072321980379e10ac9007fb546b9d5437.png': path.resolve(__dirname, './src/assets/5566b83072321980379e10ac9007fb546b9d5437.png'),
+        'figma:asset/52f02fe505fbc40e6338ebec9cbd919bca7657db.png': path.resolve(__dirname, './src/assets/52f02fe505fbc40e6338ebec9cbd919bca7657db.png'),
+        'figma:asset/4a96daf4aee4ef525cd3be5298de82d1697d6961.png': path.resolve(__dirname, './src/assets/4a96daf4aee4ef525cd3be5298de82d1697d6961.png'),
+        'figma:asset/48312b6a6d62d8c34cca1cf135001fea23d6e195.png': path.resolve(__dirname, './src/assets/48312b6a6d62d8c34cca1cf135001fea23d6e195.png'),
+        'figma:asset/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png': path.resolve(__dirname, './src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png'),
+        'figma:asset/394719dd82255b7b60801f8ae7c81a0e3514bd13.png': path.resolve(__dirname, './src/assets/394719dd82255b7b60801f8ae7c81a0e3514bd13.png'),
+        'figma:asset/1e3bcb27a765c642a88aed36ef1b72f08a715dc6.png': path.resolve(__dirname, './src/assets/1e3bcb27a765c642a88aed36ef1b72f08a715dc6.png'),
+        'figma:asset/183ba346669a0a079762ab3f9535b7d1469ed4d9.png': path.resolve(__dirname, './src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png'),
+        'figma:asset/090c0a16f783254412cc67914fb0ed3cd9edfad3.png': path.resolve(__dirname, './src/assets/090c0a16f783254412cc67914fb0ed3cd9edfad3.png'),
+        'figma:asset/03b75e940c0ed36f1fbd27725d52152720984f86.png': path.resolve(__dirname, './src/assets/03b75e940c0ed36f1fbd27725d52152720984f86.png'),
+        'embla-carousel-react@8.6.0': 'embla-carousel-react',
+        'cmdk@1.1.1': 'cmdk',
+        'class-variance-authority@0.7.1': 'class-variance-authority',
+        '@radix-ui/react-tooltip@1.1.8': '@radix-ui/react-tooltip',
+        '@radix-ui/react-toggle@1.1.2': '@radix-ui/react-toggle',
+        '@radix-ui/react-toggle-group@1.1.2': '@radix-ui/react-toggle-group',
+        '@radix-ui/react-tabs@1.1.3': '@radix-ui/react-tabs',
+        '@radix-ui/react-switch@1.1.3': '@radix-ui/react-switch',
+        '@radix-ui/react-slot@1.1.2': '@radix-ui/react-slot',
+        '@radix-ui/react-slider@1.2.3': '@radix-ui/react-slider',
+        '@radix-ui/react-separator@1.1.2': '@radix-ui/react-separator',
+        '@radix-ui/react-select@2.1.6': '@radix-ui/react-select',
+        '@radix-ui/react-scroll-area@1.2.3': '@radix-ui/react-scroll-area',
+        '@radix-ui/react-radio-group@1.2.3': '@radix-ui/react-radio-group',
+        '@radix-ui/react-progress@1.1.2': '@radix-ui/react-progress',
+        '@radix-ui/react-popover@1.1.6': '@radix-ui/react-popover',
+        '@radix-ui/react-navigation-menu@1.2.5': '@radix-ui/react-navigation-menu',
+        '@radix-ui/react-menubar@1.1.6': '@radix-ui/react-menubar',
+        '@radix-ui/react-label@2.1.2': '@radix-ui/react-label',
+        '@radix-ui/react-hover-card@1.1.6': '@radix-ui/react-hover-card',
+        '@radix-ui/react-dropdown-menu@2.1.6': '@radix-ui/react-dropdown-menu',
+        '@radix-ui/react-dialog@1.1.6': '@radix-ui/react-dialog',
+        '@radix-ui/react-context-menu@2.2.6': '@radix-ui/react-context-menu',
+        '@radix-ui/react-collapsible@1.1.3': '@radix-ui/react-collapsible',
+        '@radix-ui/react-checkbox@1.1.4': '@radix-ui/react-checkbox',
+        '@radix-ui/react-avatar@1.1.3': '@radix-ui/react-avatar',
+        '@radix-ui/react-aspect-ratio@1.1.2': '@radix-ui/react-aspect-ratio',
+        '@radix-ui/react-alert-dialog@1.1.6': '@radix-ui/react-alert-dialog',
+        '@radix-ui/react-accordion@1.2.3': '@radix-ui/react-accordion',
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+    build: {
+      target: 'esnext',
+      outDir: 'build',
+    },
+    server: {
+      port: 4007,
+      open: true,
+    },
+  });
\ No newline at end of file