@ticketboothapp/booking 0.1.19 → 0.1.22

package/src/components/footer.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import './footer.css';
-import { getStrings } from '@/strings';
-import FacebookIcon from '@/assets/icons/facebook.svg';
-import InstagramIcon from '@/assets/icons/instagram.svg';
-import TikTokIcon from '@/assets/icons/tiktok.svg';
-import GoogleIcon from '@/assets/icons/google-g-white.svg';
-import Spacer from './spacer';
-import Button, { ButtonHoverColor } from './button';
-import { getFooterLinks } from '@/constants/navigation-links/footer-links';
-import VIcon from '@/assets/icons/viavia-v.svg';
-import IIcon from '@/assets/icons/viavia-i.svg';
-import AIcon from '@/assets/icons/viavia-a.svg';
-import Link from 'next/link';
-import LanguageAwareLink from './language-aware-link';
-import { useBottomSheet } from '@/providers/bottom-sheet-provider';
-import ContactUs from './contact-us';
-import { useEffect, Suspense } from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
-import MoraineMagicIcon from '@/assets/moraine-magic-white.svg';
-import EmailSignup from './email-signup';
-
-function ContactHandler() {
-    const { openSheet } = useBottomSheet();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    useEffect(() => {
-        if (window.location.hash === '#contact') {
-            // Detect language from pathname inside the effect
-            const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-            const strings = getStrings(language);
-            
-            // Prevent default scroll behavior
-            const handleHashChange = (e: HashChangeEvent) => {
-                if (e.newURL.includes('#contact')) {
-                    e.preventDefault();
-                }
-            };
-            
-            window.addEventListener('hashchange', handleHashChange);
-            openSheet(<ContactUs strings={strings} />);
-            // Removed the history.replaceState line to keep the hash in URL
-
-            return () => {
-                window.removeEventListener('hashchange', handleHashChange);
-            };
-        }
-    }, [pathname, searchParams, openSheet]);
-
-    return null;
-}
-
-export default function Footer() {
-    const { openSheet } = useBottomSheet();
-    const pathname = usePathname();
-    
-    // Detect language from pathname
-    const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-    const strings = getStrings(language);
-
-    const handleContactClick = () => {
-        openSheet(<ContactUs strings={strings} />);
-    };
-
-    return (
-        <div className={`footer-container`}>
-            <Suspense>
-                <ContactHandler />
-            </Suspense>
-            <LanguageAwareLink href="/" className="footer-logo-container">
-                <div className="footer-via-via-name">
-                    <VIcon className="footer-logo-letter" />
-                    <IIcon className="footer-logo-letter" />
-                    <AIcon className="footer-logo-letter" />
-                </div>
-                <Spacer horizontal = {true} />
-                <div className="footer-via-via-name">
-                    <VIcon className="footer-logo-letter" />
-                    <IIcon className="footer-logo-letter" />
-                    <AIcon className="footer-logo-letter" />
-                </div>
-            </LanguageAwareLink>
-            <Spacer />
-            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
-                <a href="https://instagram.com/viaviamorainelake" target="_blank" rel="noopener noreferrer">
-                    <InstagramIcon className="footer-icon" />
-                </a>
-                <a href="https://www.facebook.com/profile.php?id=61557238871790" target="_blank" rel="noopener noreferrer">
-                    <FacebookIcon className="footer-icon" />
-                </a>
-                <a href="https://www.tiktok.com/@viaviamorainelake" target="_blank" rel="noopener noreferrer">
-                    <TikTokIcon className="footer-icon" />
-                </a>
-                <a href="https://maps.app.goo.gl/FxRqxTjgN43ttWac9" target="_blank" rel="noopener noreferrer">
-                    <GoogleIcon className="footer-icon" />
-                </a>
-            </div>
-            <Spacer />
-            <FooterLinks strings={strings} />
-            <Spacer size='L' />
-            <Button 
-                onClick={handleContactClick}
-                variant="secondary"
-            >
-                {strings.footer.contactUs}
-            </Button>
-            <Spacer />
-            <p onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ cursor: 'pointer' }}>
-                ↑ <a><u>{strings.footer.returnToTop}</u></a> ↑
-            </p>
-            <Spacer />
-            <MoraineMagicIcon className="footer-moraine-magic-icon" />
-            <Spacer />
-            <EmailSignup strings={strings} source="footer" />
-            <Spacer />
-            <p><LanguageAwareLink href="/terms-conditions">{strings.footer["terms-and-conditions"]}</LanguageAwareLink></p>
-            <p><LanguageAwareLink href="/privacy-policy">{strings.footer["privacy-policy"]}</LanguageAwareLink></p>
-            <p><LanguageAwareLink href="/sitemap.xml">{strings.footer["sitemap"]}</LanguageAwareLink></p>
-            <Spacer />
-            <p>{strings.footer.copyright}</p>
-            <p className="footer-company-text" style={{ textTransform: 'uppercase', textAlign: 'center' }}>{strings.footer.company}</p>
-        </div>
-    )
-}
-
-function FooterLinks({ strings }: { strings: any }) {
-    const footerLinks = getFooterLinks(strings);
-    return (
-        <div className="footer-links-container">
-            {Object.values(footerLinks).map((link) => (
-                link.external ? (
-                    <a key={link.name} href={link.url} target="_blank" rel="noopener noreferrer">
-                        {link.name}
-                    </a>
-                ) : (
-                    <LanguageAwareLink key={link.name} href={link.path ?? link.url ?? '/'}>{link.name}</LanguageAwareLink>
-                )
-            ))}
-        </div>
-    )
-}

package/src/components/global-simple-modal.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useSimpleModal } from '@/hooks/use-simple-modal';
-import SimpleModal from './simple-modal';
-import { useEffect } from 'react';
-
-export default function GlobalSimpleModal() {
-    const { isModalOpen, closeModal } = useSimpleModal();
-
-    useEffect(() => {
-        const handleBookNowClick = (e: Event) => {
-            const target = e.target as HTMLElement;
-            const link = target.closest('a[href="#book-now"]');
-            if (link) {
-                e.preventDefault();
-                window.dispatchEvent(new CustomEvent('openSimpleModal'));
-            }
-        };
-
-        document.addEventListener('click', handleBookNowClick);
-        
-        return () => {
-            document.removeEventListener('click', handleBookNowClick);
-        };
-    }, []);
-
-    return (
-        <SimpleModal 
-            isOpen={isModalOpen} 
-            onClose={closeModal} 
-        />
-    );
-}

package/src/components/google-review-summary.module.css

@@ -1,77 +0,0 @@
-.googleReviewSummary {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1rem;
-  transition: transform 0.2s ease, filter 0.2s ease;
-  cursor: pointer;
-}
-
-.googleReviewSummary:hover {
-  transform: scale(1.05);
-  filter: brightness(1.1);
-}
-
-.googleReviewSummary:active {
-  transform: scale(1.02);
-}
-
-.centerSection {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.logoRow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  margin-bottom: 0.5rem;
-  flex-direction: row;
-  width: 100%;
-  position: relative;
-}
-
-.sideLogo {
-  filter: brightness(0) invert(1);
-  position: absolute;
-  z-index: 0;
-  opacity: 0.7;
-  flex-shrink: 0;
-  top: 50%;
-  transform: translateY(5%);
-}
-
-.sideLogo:first-child {
-  left: 5%;
-}
-
-.sideLogo:last-child {
-  right: 5%;
-}
-
-.googleIcon {
-  --google-blue: var(--accent-white);
-  --google-red: var(--accent-white);
-  --google-yellow: var(--accent-white);
-  --google-green: var(--accent-white);
-  --google-lightblue: var(--accent-white);
-  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-  position: relative;
-  z-index: 2;
-  margin-bottom: -2.5px;
-}
-
-.googleReviewsCount {
-  font-size: 16px;
-  color: var(--accent-white);
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  font-family: 'Poppins', sans-serif;
-}
-
-.googleReviewSummary :global(.starRating) {
-  position: relative;
-  z-index: 1;
-}

package/src/components/google-review-summary.tsx

@@ -1,50 +0,0 @@
-import GoogleIcon from '@/assets/icons/google-g.svg';
-import TripAdvisorIcon from '@/assets/icons/partner-logos/tripadvisor.svg';
-import GetYourGuideIcon from '@/assets/icons/partner-logos/getyourguide.svg';
-import styles from './google-review-summary.module.css';
-import StarRating from './star-rating';
-
-export default function GoogleReviewSummary({ strings }: { strings: any }) {
-  const scrollToReviews = () => {
-    const reviewsSection = document.getElementById('reviews-section');
-    if (reviewsSection) {
-      const elementTop = reviewsSection.offsetTop;
-      const offset = 100; // Adjust this value to control how high the section appears
-      window.scrollTo({
-        top: elementTop - offset,
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  return (
-    <div 
-      className={styles.googleReviewSummary} 
-      onClick={scrollToReviews}
-      style={{ cursor: 'pointer' }}
-      title="Click to see all reviews"
-    >
-      <div className={styles.centerSection}>
-        <div className={styles.logoRow}>
-          <TripAdvisorIcon
-            width={28}
-            height={28}
-            className={styles.sideLogo}
-          />
-          <GoogleIcon
-            width={42}
-            height={42}
-            className={styles.googleIcon}
-          />
-          <GetYourGuideIcon
-            width={28}
-            height={28}
-            className={styles.sideLogo}
-          />
-        </div>
-        <StarRating rating={5} showVerified={false} useGradientSize={true} />
-      </div>
-      <p className={styles.googleReviewsCount}>{strings.home.hero.googleReviewsCount}</p>
-    </div>
-  );
-}

package/src/components/hero-image.css

@@ -1,13 +0,0 @@
-.hero-image-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.parallax-container {
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-  transform: translate3d(0, 0, 0);
-}

package/src/components/hero-image.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import ViaViaImage from './image';
-import './hero-image.css';
-import { useEffect, useRef } from 'react';
-
-interface HeroImageProps {
-  imageId: string;
-  alt: string;
-  objectPosition?: string;
-}
-
-const HeroImage = ({ imageId, alt, objectPosition }: HeroImageProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleScroll = () => {
-      const scrolled = Math.max(0, Math.min(window.scrollY, container.offsetHeight));
-      const rate = scrolled * 0.5;
-      container.style.transform = `translate3d(0, ${rate}px, 0)`;
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <div className="hero-image-container">
-      <div className="parallax-container" ref={containerRef}>
-        <ViaViaImage 
-          imageId={imageId} 
-          context="HERO" 
-          alt={alt} 
-          style={objectPosition ? { objectPosition } : undefined}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default HeroImage;

package/src/components/language-aware-link.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-interface LanguageAwareLinkProps {
-  href: string;
-  children: React.ReactNode;
-  className?: string;
-  target?: string;
-  rel?: string;
-  onClick?: () => void;
-}
-
-export default function LanguageAwareLink({ 
-  href, 
-  children, 
-  className, 
-  target, 
-  rel, 
-  onClick 
-}: LanguageAwareLinkProps) {
-  const pathname = usePathname();
-  
-  // Check if we're currently on a non-English page
-  const isSpanishPage = pathname?.startsWith('/es');
-  const isFrenchPage = pathname?.startsWith('/fr');
-  
-  // Define which pages have translated versions (currently only the homepage)
-  const translatedPages = ['/'];
-  
-  const getLocalizedHref = () => {
-    // If we're on a Spanish page
-    if (isSpanishPage && href.startsWith('/') && !href.startsWith('/es')) {
-      // Only prepend /es if this page has a Spanish version
-      if (translatedPages.includes(href)) {
-        return `/es${href}`;
-      }
-      // Otherwise, go to the English version (remove any /es prefix if present)
-      return href;
-    }
-    
-    // If we're on a French page
-    if (isFrenchPage && href.startsWith('/') && !href.startsWith('/fr')) {
-      // Only prepend /fr if this page has a French version
-      if (translatedPages.includes(href)) {
-        return `/fr${href}`;
-      }
-      // Otherwise, go to the English version (remove any /fr prefix if present)
-      return href;
-    }
-    
-    // If we're on an English page, always go to English version
-    if (!isSpanishPage && !isFrenchPage && (href.startsWith('/es') || href.startsWith('/fr'))) {
-      return href.replace(/^\/(es|fr)/, '') || '/';
-    }
-    
-    return href;
-  };
-
-  return (
-    <Link 
-      href={getLocalizedHref()}
-      className={className}
-      target={target}
-      rel={rel}
-      onClick={onClick}
-    >
-      {children}
-    </Link>
-  );
-}

package/src/components/language-switcher.module.css

@@ -1,124 +0,0 @@
-.languageSwitcher {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  z-index: 1000;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.currentLanguage {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: var(--border-radius-pill);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.currentLanguage:hover {
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
-}
-
-.flag {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.languageCode {
-  font-size: 12px;
-  font-weight: 600;
-  color: #333;
-  letter-spacing: 0.5px;
-}
-
-.languageDropdown {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 8px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(8px);
-  transition: all 0.2s ease;
-  min-width: 140px;
-}
-
-.languageDropdown.visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.languageOption {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  text-decoration: none;
-  color: #333;
-  transition: background-color 0.15s ease;
-  border-radius: 6px;
-  margin: 4px;
-}
-
-.languageOption:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.languageOption.active {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-
-.languageOption.active .flag {
-  opacity: 0.8;
-}
-
-.languageName {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .languageSwitcher {
-    bottom: 15px;
-    left: 15px;
-  }
-  
-  .currentLanguage {
-    padding: 6px 10px;
-  }
-  
-  .flag {
-    font-size: 14px;
-  }
-  
-  .languageCode {
-    font-size: 11px;
-  }
-  
-  .languageDropdown {
-    min-width: 120px;
-  }
-  
-  .languageOption {
-    padding: 8px 10px;
-  }
-  
-  .languageName {
-    font-size: 13px;
-  }
-}

package/src/components/language-switcher.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import styles from './language-switcher.module.css';
-
-interface Language {
-  code: string;
-  name: string;
-  flag: string;
-}
-
-const languages: Language[] = [
-  { code: 'en', name: 'english', flag: '🇨🇦' },
-  { code: 'es', name: 'español', flag: '🇪🇸' },
-  { code: 'fr', name: 'français', flag: '🇫🇷' },
-  // Future languages
-  // { code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
-];
-
-export default function LanguageSwitcher() {
-  const [isHovered, setIsHovered] = useState(false);
-  const pathname = usePathname();
-  
-  // Get current language from pathname
-  const currentLanguage = pathname?.startsWith('/es') ? 'es' : 
-                         pathname?.startsWith('/fr') ? 'fr' : 'en';
-
-  const getLanguageUrl = (langCode: string) => {
-    if (langCode === 'en') {
-      // Go to English version (remove any language prefix)
-      return pathname?.replace(/^\/(es|fr)/, '') || '/';
-    } else if (langCode === 'es') {
-      // Go to Spanish version (add /es prefix)
-      const basePath = pathname?.replace(/^\/(es|fr)/, '') || '/';
-      return `/es${basePath}`;
-    } else if (langCode === 'fr') {
-      // Go to French version (add /fr prefix)
-      const basePath = pathname?.replace(/^\/(es|fr)/, '') || '/';
-      return `/fr${basePath}`;
-    }
-    return '/';
-  };
-
-  const currentLang = languages.find(lang => lang.code === currentLanguage) || languages[0];
-
-  return (
-    <div 
-      className={styles.languageSwitcher}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div className={styles.currentLanguage}>
-        <span className={styles.flag}>{currentLang.flag}</span>
-        <span className={styles.languageCode}>{currentLang.code.toUpperCase()}</span>
-      </div>
-      
-      <div className={`${styles.languageDropdown} ${isHovered ? styles.visible : ''}`}>
-        {languages.map((language) => (
-          <Link
-            key={language.code}
-            href={getLanguageUrl(language.code)}
-            className={`${styles.languageOption} ${
-              language.code === currentLanguage ? styles.active : ''
-            }`}
-          >
-            <span className={styles.flag}>{language.flag}</span>
-            <span className={styles.languageName}>{language.name}</span>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/map-section.css

@@ -1,59 +0,0 @@
-.map-section-wrapper {
-    width: 100%;
-    background-color: var(--light-orange-background);
-    overflow: hidden;
-    padding-top: var(--spacing-medium);
-}
-
-.map-section-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-    min-height: 100px;
-    padding: 2rem 4rem;
-    background-color: var(--accent-map-green);
-    margin: 0 auto;
-    border-radius: 20px 20px 0px 0px;
-}
-
-.map-section-image {
-    width: 100%;
-    min-height: fit-content;
-    object-fit: fit;
-    overflow: hidden;
-}
-
-.via-via-map {
-    width: 100%;
-    height: auto;
-    display: block;
-}
-
-@media (max-width: 1023px) {
-    .map-section-container {
-        width: 90%;
-        padding: 2rem 0.5rem;  /* Reduce padding on mobile */
-    }
-    
-    .via-via-map {
-        width: 100%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .map-section-container {
-        width: 70%;
-    }
-    
-    .map-section-image {
-        width: 100%;
-        margin-top: 1rem;
-    }
-    
-    .via-via-map {
-        width: 60%;
-        margin: 0 auto;
-    }
-}