@ticketboothapp/booking 0.1.19 → 0.1.22

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-theme-pages/best-option.module.css

@@ -1,70 +0,0 @@
-.bestOptionContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: var(--spacing-large);
-    padding-bottom: var(--spacing-large);
-    padding-left: var(--spacing-small);
-    padding-right: var(--spacing-small);
-}
-
-.otherOptionsRow {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: center;
-}
-
-.bestOptionProductsRowWrapper {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.bestOptionProductsRow {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    width: 100%;
-}
-
-/* Tablet breakpoint - 2 tiles per row */
-@media (min-width: 768px) {
-    .bestOptionProductsRow {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-/* Desktop breakpoint - 3 tiles per row */
-@media (min-width: 1024px) {
-    .bestOptionProductsRow {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: 1rem;
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-    
-    .bestOptionProductsRow > * {
-        flex: 0 0 calc(33.333% - 0.67rem);
-        max-width: calc(33.333% - 0.67rem);
-    }
-}
-
-.bestOptionProductsRow > a {
-    text-decoration: none;
-    color: inherit;
-}
-
-.bestOptionBottomContainer {
-    padding-top: var(--spacing-large);
-}
-
-.bestOptionBottomTitle {
-    color: var(--primary-text);
-    font-size: 1.2rem;
-}

package/src/components/product-theme-pages/best-option.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import defaultStrings from "@/strings";
-import styles from "./best-option.module.css";
-import { Product } from "@/constants/products";
-import Link from "next/link";
-import ProductTileCard from "../product-tile/product-tile-card";
-
-export default function BestOption({ bestOptionProducts, otherProductThemePages, strings = defaultStrings }: { bestOptionProducts: Product[], otherProductThemePages: { title: string, path: string }[], strings?: any }) {
-    return (
-        <div className={styles.bestOptionContainer}>
-            {bestOptionProducts.length > 0 ? (
-                <>
-                    <h2>{strings.productThemePages.bestOption.title}</h2>
-                    <div className={styles.bestOptionProductsRowWrapper}>
-                        <div className={styles.bestOptionProductsRow}>
-                            {bestOptionProducts.map((product) => (
-                                <ProductTileCard key={product.id} product={product} strings={strings} />
-                            ))}
-                        </div>
-                    </div>
-                </>
-            ) : null}
-            
-            <div className={styles.bestOptionBottomContainer}>
-                <h3 className={styles.bestOptionBottomTitle}>{strings.productThemePages.bestOption.bottomTitle}</h3>
-                <div className={styles.otherOptionsRow}>
-                    {otherProductThemePages.map((page) => (
-                        <Link href={page.path} key={page.title}>{page.title}</Link>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/product-theme-pages/extended-tour-options.module.css

@@ -1,22 +0,0 @@
-.container {
-    border: 4px dashed var(--accent-turquoise-60);
-    padding: 1rem;
-}
-
-.description {
-    text-align: center;
-}
-
-@media (max-width: 1023px) {
-    .container {
-        margin: 0 auto;
-        width: 70%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .container {
-        margin: 2rem auto;
-        width: 50%;
-    }
-}

package/src/components/product-theme-pages/extended-tour-options.tsx

@@ -1,11 +0,0 @@
-import styles from "./extended-tour-options.module.css";
-import strings from "@/strings";
-
-export default function ExtendedTourOptions() {
-    return (
-        <div className={styles.container}>
-            <h4>{strings.productThemePages.extendedTourOptions.title}</h4>
-            <p dangerouslySetInnerHTML={{ __html: strings.productThemePages.extendedTourOptions.description }} className={styles.description} />
-        </div>
-    )
-}

package/src/components/product-theme-pages/photo-gallery.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { ImageData } from "@/constants/images";
-import ViaViaImage from "@/components/image";
-import styles from "./photo-gallery.module.css";
-import { useState, lazy, Suspense, useEffect } from "react";
-
-// Lazy load the modal component
-const ImageModal = lazy(() => import('@/components/product-theme-pages/image-modal'));
-
-interface PhotoGalleryProps {
-    photos: ImageData[];
-}
-
-export default function PhotoGallery({ photos }: PhotoGalleryProps) {
-    const [selectedImage, setSelectedImage] = useState<ImageData | null>(null);
-    const [currentIndex, setCurrentIndex] = useState<number>(0);
-    const [isMobile, setIsMobile] = useState(false);
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-        setIsMobile(window.innerWidth <= 1023);
-
-        const handleResize = () => {
-            setIsMobile(window.innerWidth <= 1023);
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    // Only show first 9 photos on mobile
-    const displayPhotos = isClient && isMobile ? photos.slice(0, 9) : photos;
-
-    const handleImageClick = (photo: ImageData) => {
-        const index = photos.findIndex(p => p.id === photo.id);
-        setCurrentIndex(index);
-        setSelectedImage(photo);
-    };
-
-    return (
-        <>
-            <div className={styles.photoGallery}>
-                <div className={styles.grid}>
-                    {displayPhotos.map((photo) => (
-                        <div 
-                            key={photo.id} 
-                            className={styles.photoItem}
-                            onClick={() => handleImageClick(photo)}
-                        >
-                            <ViaViaImage
-                                imageId={photo.id}
-                                alt={photo.alt}
-                                context="GALLERY"
-                                className={styles.galleryImage}
-                            />
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            {selectedImage && (
-                <Suspense fallback={<div className={styles.modalOverlay}>Loading...</div>}>
-                    <ImageModal
-                        selectedImage={selectedImage}
-                        currentIndex={currentIndex}
-                        totalImages={photos.length}
-                        images={photos}
-                        onClose={() => setSelectedImage(null)}
-                        onNext={() => {
-                            if (currentIndex < photos.length - 1) {
-                                const newIndex = currentIndex + 1;
-                                setCurrentIndex(newIndex);
-                                setSelectedImage(photos[newIndex]);
-                            }
-                        }}
-                        onPrevious={() => {
-                            if (currentIndex > 0) {
-                                const newIndex = currentIndex - 1;
-                                setCurrentIndex(newIndex);
-                                setSelectedImage(photos[newIndex]);
-                            }
-                        }}
-                    />
-                </Suspense>
-            )}
-        </>
-    );
-}

package/src/components/product-theme-pages/product-theme-page-layout.module.css

@@ -1,13 +0,0 @@
-.productThemePageLayout {
-    background-color: var(--light-orange-background);
-}
-
-.titleSubtitle {
-    max-width: 1200px;
-    padding: var(--spacing-medium);
-    margin: 0 auto;
-}
-
-.reviewHighlightsSection {
-    margin-top: var(--spacing-large);
-}

package/src/components/product-theme-pages/product-theme-page-layout.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import TopOfFold from "@/components/product-theme-pages/top-of-fold";
-import { TopOfFoldProps } from "@/components/product-theme-pages/top-of-fold";
-import TitleSubtitle from "../title-subtitle";
-import defaultStrings from "@/strings";
-import styles from "./product-theme-page-layout.module.css";
-import { VALUE_PROPS_KEYS } from "@/constants/value-props";
-import ValueProps from "@/components/value-props";
-import ReviewHighlightsSection from "@/components/review-highlights-section";
-import MapSection from "../map-section";
-import FAQWrapper from "@/components/faq-wrapper";
-import { faqSection } from "@/constants/faq";
-import Navbar from "@/components/navbar";
-import BestOption from "./best-option";
-import { Product } from "@/constants/products";
-import { pageJsonLd } from "@/constants/json-ld/page-json-ld";
-import { organizationJsonLd } from "@/constants/json-ld/organization-json-ld";
-import { aggregateRatingJsonLd } from "@/constants/json-ld/review-json-ld";
-import PhotoGallery from "./photo-gallery";
-import { ImageData } from "@/constants/images";
-import ExtendedTourOptions from "./extended-tour-options";
-
-interface ProductThemePageLayoutProps {
-    topOfFoldProps: TopOfFoldProps;
-    description: string;
-    photoGalleryPhotos: ImageData[];
-    includeExtendedTourOptions: boolean;
-    valuePropsKeys: VALUE_PROPS_KEYS[];
-    valuePropsTitle?: string;
-    faqSection: faqSection;
-    bestOptionProducts: Product[];
-    otherProductThemePages: { title: string, path: string }[];
-    productJsonLd: any[];
-}
-
-export default function ProductThemePageLayout(props: ProductThemePageLayoutProps & { strings?: any }) {
-    const { topOfFoldProps, description, photoGalleryPhotos, includeExtendedTourOptions, valuePropsKeys, valuePropsTitle, faqSection, bestOptionProducts, otherProductThemePages, strings = defaultStrings } = props;
-    return (
-        <div>
-            <Navbar stickyMode="showAndStickyOrMobileOverlap"/>
-            <TopOfFold {...topOfFoldProps} />
-            <div className={styles.productThemePageLayout}>
-                <TitleSubtitle
-                    className={styles.titleSubtitle}
-                    title={strings.productThemePages.title}
-                    subtitle={strings.productThemePages.subtitle}
-                    description={description}
-                />
-                {includeExtendedTourOptions && <ExtendedTourOptions />}
-                <ValueProps filterKeys={valuePropsKeys} title={valuePropsTitle} strings={strings} />
-                {photoGalleryPhotos && photoGalleryPhotos.length > 0 && (
-                    <PhotoGallery photos={photoGalleryPhotos} />
-                )}
-                <BestOption bestOptionProducts={bestOptionProducts} otherProductThemePages={otherProductThemePages} strings={strings} />
-                <FAQWrapper faqSection={faqSection} strings={strings} />
-                <ReviewHighlightsSection className={styles.reviewHighlightsSection} strings={strings} />
-                <MapSection title={strings.productThemePages.mapSection.title} />
-            </div>
-
-            <script
-              type="application/ld+json"
-              dangerouslySetInnerHTML={{ __html: JSON.stringify(pageJsonLd([organizationJsonLd, aggregateRatingJsonLd, ...props.productJsonLd])) }}
-            />
-        </div>
-    )
-}