@ticketboothapp/booking 0.1.19 → 0.1.20

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;
-    }
-}

package/src/components/map-section.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import * as React from "react";
-import ViaViaImage from "@/components/image";
-import { IMAGES } from "@/constants/images";
-import "./map-section.css";
-import { motion } from "motion/react";
-import { useState } from "react";
-
-interface MapSectionProps {
-  title: string;
-}
-
-const variants = {
-  hidden: { x: 0, y: 200 },
-  visible: { x: 0, y: 0 }
-};
-
-export default function MapSection(
-  { title }: MapSectionProps
-) {
-  const [hasAnimated, setHasAnimated] = useState(false);
-
-  const handleViewportEnter = (entry: IntersectionObserverEntry | null) => {
-    if (!hasAnimated) {
-        setHasAnimated(true);
-    }
-};
-
-const handleViewportLeave = (entry: IntersectionObserverEntry | null) => {
-    if (entry?.boundingClientRect.top! > 0) {
-        setHasAnimated(false);
-    }
-};
-
-  return (
-    <div className="map-section-wrapper">
-        <motion.div className="map-section-container"
-          variants={variants}
-          initial="hidden"
-          animate={hasAnimated ? "visible" : "hidden"}
-          transition={{
-              type: "spring",
-              bounce: 0.1,
-              duration: 1,
-          }}
-          viewport={{ once: false }}
-          onViewportEnter={handleViewportEnter}
-          onViewportLeave={handleViewportLeave}
-        >
-          <h2>{title}</h2>
-          <div className="map-section-image">
-            <ViaViaImage
-              imageId={IMAGES.VIA_VIA_OPERATIONS_MAP.id}
-              alt={IMAGES.VIA_VIA_OPERATIONS_MAP.alt}
-              context="GALLERY"
-              maintainAspectRatio={true}
-            />
-          </div>
-        </motion.div>
-    </div>
-  );
-}

package/src/components/navbar.module.css

@@ -1,152 +0,0 @@
-.hideAndSlideNavbar {
-    position: fixed;
-    top: -150px; /* Start hidden above the viewport */
-    transition: transform 0.5s ease;
-}
-
-.showAndSlideNavbar {
-    transform: translateY(150px); /* Slide down to become visible */
-}
-
-.navbarContainer {
-    left: 0;
-    right: 0;
-    z-index: 100;
-}
-
-.navbarContent {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.navbarRow {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/* Desktop Navbar */
-@media (min-width: 1024px) {
-    .navbarContainer {
-        background-color: rgba(255, 238, 232, 0.7);
-        backdrop-filter: blur(8px);
-        padding: 1rem;
-    }
-
-    .navigationBarIcon {
-        width: 60px;
-        height: 60px;
-    }
-
-    .navbarContent {
-        max-width: 95%;
-        margin: 0 auto;
-    }
-
-    .mobileNavbarContent {
-        display: none;
-    }
-
-    .mobileNavbarLinks {
-        display: none;
-    }
-
-    .desktopNavbarContent {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-    }
-
-    .navbarLinks {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 2rem;
-        width: 100%;
-        text-align: center;
-    }
-
-    .bookNowButton {
-        min-width: 160px;
-    }
-
-    .showAndStickyOrMobileOverlapNavbar {
-        position: sticky;
-        top: 0;
-    }
-
-    .showAndStickyNavbar {
-        position: sticky;
-        top: 0;
-    }
-}
-
-/* Mobile Navbar */
-@media (max-width: 1023px) {
-    .navbarContainer {
-        border-color: var(--accent-orange);
-        border-width: 2px;
-        border-style: solid;
-        border-radius: 40px;
-        margin: 0.5rem;
-        overflow: hidden;
-        padding: 1rem;
-        background-color: var(--light-orange-background);
-    }
-
-    .navigationBarIcon {
-        width: 32px;
-        height: 32px;
-    }
-
-    .desktopNavbarContent {
-        display: none;
-    }
-
-    .navbarLinks {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        height: 100%;
-        justify-content: space-between;
-    }
-
-    .showAndStickyOrMobileOverlapNavbar {
-        position: fixed;
-        top: 0.5rem;
-    }
-
-    .showAndStickyNavbar {
-        position: sticky;
-        top: 0.5rem;
-    }
-}
-
-.navbarLinks a {
-    text-decoration: none;
-    color: var(--accent-orange);
-    font-size: 1.5rem;
-    font-weight: 800;
-    font-family: 'Poppins', sans-serif;
-    text-transform: lowercase;
-    padding: 0 var(--spacing-small);
-}
-.nonCurrentLink:hover {
-    text-decoration: underline;
-}
-
-.mobileNavbarLinks {
-    height: 0;
-    overflow: hidden;
-    transition: height 0.5s ease;
-}
-
-.mobileNavbarLinks.open {
-    height: 300px;
-}

package/src/components/navbar.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import styles from './navbar.module.css';
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import LanguageAwareLink from './language-aware-link';
-import Button, { MenuButton, PresetButtonActions } from '@/components/button';
-import Image from 'next/image';
-import defaultStrings from '@/strings';
-import { getProducts } from '@/constants/products';
-
-export default function Navbar(
-  {
-    stickyMode,
-    strings = defaultStrings,
-  }: {
-    stickyMode: string | "hideAndSlide" | "showAndStickyOrMobileOverlap" | "showAndSticky",
-    strings?: any,
-  }
-) {
-  const pathname = usePathname() || '/';
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-
-  if (stickyMode == "hideAndSlide") {
-    useEffect(() => {
-      const handleScroll = () => {      
-        const scrollPosition = window.scrollY;
-
-        // Show navbar when scrolled past yHeightForSlide
-        setIsVisible(scrollPosition > 50);
-      };
-
-      window.addEventListener('scroll', handleScroll);
-      return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
-  }
-
-  return (
-    <nav className={`${styles.navbarContainer} ${stickyMode == "hideAndSlide" ? styles.hideAndSlideNavbar : ''} ${isVisible && stickyMode == "hideAndSlide" ? styles.showAndSlideNavbar : ''} ${stickyMode == "showAndStickyOrMobileOverlap" ? styles.showAndStickyOrMobileOverlapNavbar : ''} ${stickyMode == "showAndSticky" ? styles.showAndStickyNavbar : ''}`}>
-      <div className={styles.navbarContent}>
-        <div className={styles.navbarRow}>
-          <LanguageAwareLink href="/">
-            <Image 
-              src="logo192.png"
-              alt="Via Via Moraine Lake Shuttle Logo"
-              className={styles.navigationBarIcon}
-              width={60}
-              height={60}
-            />
-          </LanguageAwareLink>
-          <div className={styles.desktopNavbarContent}>
-            <NavbarLinks setIsMenuOpen={setIsMenuOpen} currentPath={pathname} strings={strings} />
-            <Button isLarge={true} className={styles.bookNowButton} action={PresetButtonActions.BOOK_ALL}>{strings.common.bookNow}</Button>
-          </div>
-          <div className={styles.mobileNavbarContent}>
-            <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} isOpen={isMenuOpen} strings={strings} />
-          </div>
-        </div>
-        <div className={`${styles.mobileNavbarLinks} ${isMenuOpen ? styles.open : ''}`}>
-          <NavbarLinks setIsMenuOpen={setIsMenuOpen} currentPath={pathname} strings={strings} />
-        </div>
-      </div>
-    </nav>
-  );
-}
-
-function NavbarLinks({ setIsMenuOpen, currentPath, strings }: { 
-  setIsMenuOpen: (open: boolean) => void,
-  currentPath: string,
-  strings: any
-}) {
-  
-  const products = getProducts(strings);
-  const navbarLinks = [
-    {
-      name: strings.navigationLinks.home,
-      path: '/',
-    },
-    {
-      name: strings.navigationLinks.sunriseTours,
-      path: products.MORAINE_LAKE_SUNRISE.path,
-    },
-    {
-      name: strings.navigationLinks.moraineLake,
-      path: products.MORAINE_LAKE_ADVENTURE.path,
-    },
-    {
-      name: strings.navigationLinks.lakeLouise,
-      path: products.LAKE_LOUISE_ADVENTURE.path,
-    },
-    {
-      name: strings.navigationLinks.emeraldLake,
-      path: products.EMERALD_LAKE_ESCAPE.path,
-    },
-    {
-      name: strings.navigationLinks.privateTours,
-      path: products.PRIVATE_TOUR.path,
-    },
-    {
-      name: strings.navigationLinks.photoSessions,
-      path: '/photo-sessions',
-    },
-    {
-      name: strings.navigationLinks.faq,
-      path: '/faq',
-    },
-  ];
-
-  return (
-    <div className={styles.navbarLinks}>
-      {navbarLinks.map((link) => (
-        <LanguageAwareLink 
-          onClick={() => setIsMenuOpen(false)} 
-          className={link.path == '/' && currentPath == '/' || link.path == '/' && currentPath == '/es' || link.path === currentPath.replace(/\/$/, '') ? styles.currentLink : styles.nonCurrentLink}
-          key={link.name} 
-          href={link.path}
-        >
-          {link.name}
-        </LanguageAwareLink>
-      ))}
-    </div>
-  );
-}

package/src/components/parallax-provider.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { ParallaxProvider } from 'react-scroll-parallax';
-
-export default function ParallaxWrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <ParallaxProvider>
-      {children}
-    </ParallaxProvider>
-  );
-} 

package/src/components/product-tag.module.css

@@ -1,30 +0,0 @@
-.tag {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.4rem 0.8rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    z-index: 4;
-    text-align: center;
-    line-height: 1.2;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-/* Style variants */
-.most_popular {
-    background-color: var(--accent-orange);
-    color: white;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.custom {
-    /* Custom styles will be applied via inline styles */
-}