@ticketboothapp/booking 0.1.19 → 0.1.22

package/src/components/product-tile/product-tile-card.module.css

@@ -1,84 +0,0 @@
-.bestOptionCard {
-    background-color: var(--accent-white);
-    border-radius: 1rem;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    color: inherit;
-}
-
-.bestOptionCardImage img {  /* Target the actual image element */
-    transition: transform 0.3s ease-in-out;
-    will-change: transform;  /* Optimize performance */
-}
-
-.bestOptionCardImageContainer {
-    position: relative;
-    display: flex;
-    min-height: 250px; /* Minimum height for short content */
-}
-
-.bestOptionCardImage {
-    width: 100%;
-    height: 100%; /* Fill container height */
-    object-fit: cover;
-    position: absolute; /* Position behind pills */
-    top: 0;
-    left: 0;
-    overflow: hidden;
-}
-
-.bestOptionCardTitle {
-    font-weight: 700;
-    font-size: 1.2rem;
-    text-align: left;
-    width: 100%;
-    margin-bottom: 1rem;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    max-width: 100%;
-    text-decoration: none;
-}
-
-.bestOptionCardContent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 1rem;
-    flex: 1;
-    justify-content: space-between;
-    box-sizing: border-box;
-}
-
-.bestOptionCardButton {
-    width: fit-content;
-    margin-top: auto;
-}
-
-.productTilePillValuesView {
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 4px;
-    align-content: flex-end;
-    justify-content: flex-start;
-    padding: 16px;
-    z-index: 1;
-}
-
-/* Add hover effect for desktop */
-@media (min-width: 1024px) {
-    .bestOptionCard:hover .productTilePillValuesView {
-        opacity: 1;
-    }
-
-    .bestOptionCard:hover .bestOptionCardImage img {
-        transform: scale(1.1);  /* 10% zoom on hover */
-    }
-}

package/src/components/product-tile/product-tile-card.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import { Product } from "@/constants/products";
-import ViaViaImage from "../image";
-import styles from "./product-tile-card.module.css";
-import Button, { ButtonHoverColor } from "../button";
-import defaultStrings from "@/strings";
-import ValuePill from "../value-pill";
-import { PillVariant } from "../value-pill";
-import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider";
-
-export default function ProductTileCard({ product, strings = defaultStrings }: { product: Product; strings?: any }) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        window.dispatchEvent(
-            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
-        );
-    };
-
-    return (
-        <div onClick={handleClick} className={styles.bestOptionCard} style={{ cursor: 'pointer' }}>
-            <div className={styles.bestOptionCardImageContainer}>
-                <ViaViaImage
-                    imageId={product.images[0].id}
-                    alt={product.images[0].alt}
-                    context="GALLERY"
-                    className={styles.bestOptionCardImage}
-                />
-                <ProductTilePillValuesView product={product} />
-            </div>
-            <div className={styles.bestOptionCardContent}>
-                <p className={styles.bestOptionCardTitle}>{product.name}</p>
-                <Button 
-                    variant="primary" 
-                    className={styles.bestOptionCardButton} 
-                    hoverColor={ButtonHoverColor.Turquoise}
-                >
-                    {strings.common.moreInfo}
-                </Button>
-            </div>
-        </div>
-    );
-}
-
-function ProductTilePillValuesView({
-    product
-}: {
-    product: Product
-}) {
-    return (
-        <div className={styles.productTilePillValuesView}>
-            {product.pillValues.map((pillValue, index) => (
-                <ValuePill 
-                    key={index}
-                    variant={PillVariant.overlay} 
-                    pillValue={pillValue} 
-                />
-            ))}
-        </div>
-    )
-}

package/src/components/review-highlights-section.css

@@ -1,85 +0,0 @@
-.review-highlights-section {
-  background-color: var(--accent-turquoise-60);
-  padding: var(--spacing-large) 0;
-}
-
-.review-highlights-container {
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.review-highlights-container::-webkit-scrollbar {
-  display: none;
-}
-
-.review-highlights-row {
-  display: flex;
-  gap: 24px;
-  min-width: min-content;
-}
-
-.review-highlights-title {
-  color: var(--accent-white);
-  padding: 0 var(--spacing-small);
-}
-
-.review-card {
-  min-width: 300px;
-  background: white;
-  padding: 32px;
-  border-radius: 40px;
-  position: relative;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  margin-top: 50px;
-  margin-right: 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.author-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: transparent;
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  border: 4px solid white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.review-author-name {
-  text-align: right;
-  padding-top: var(--spacing-small);
-}
-
-/* Desktop */
-@media (min-width: 1024px) {
-  .review-quote {
-    font-size: 14px;
-  }
-}
-
-.expand-button {
-  background: none;
-  border: none;
-  color: var(--accent-orange);
-  cursor: pointer;
-  font-weight: 600;
-  font-family: 'Figtree', sans-serif;
-  padding: 0;
-  margin-left: 4px;
-  text-decoration: underline;
-  transition: color 0.2s ease;
-}
-
-.expand-button:hover {
-  color: var(--accent-orange-dark);
-}
-
-.expand-button:focus {
-  outline: none;
-  color: var(--accent-orange-dark);
-}

package/src/components/review-highlights-section.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { Parallax } from 'react-scroll-parallax';
-import './review-highlights-section.css';
-import ParallaxWrapper from '@/components/parallax-provider';
-import { REVIEWS, Review } from '@/constants/reviews';
-import Image from 'next/image';
-import StarRating from '@/components/star-rating';
-import { useState } from 'react';
-import TranslatableReviews from './translatable-reviews';
-import { usePathname } from 'next/navigation';
-
-function ReviewCard({ 
-  review, 
-  originalReview, 
-  showOriginal, 
-  onToggleOriginal, 
-  language 
-}: { 
-  review: typeof REVIEWS[0];
-  originalReview?: typeof REVIEWS[0];
-  showOriginal?: boolean;
-  onToggleOriginal?: () => void;
-  language: 'en' | 'es' | 'fr';
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  
-  // Use original review if showing original, otherwise use the current review
-  const displayReview = showOriginal && originalReview ? originalReview : review;
-  
-  // Truncate text to first 100 characters
-  const truncatedText = displayReview.review.length > 500 ? displayReview.review.substring(0, 500) + '...' : displayReview.review;
-  const shouldShowExpand = displayReview.review.length > 500;
-  
-  return (
-    <div className="review-card">
-      <p className="review-quote">
-        <span dangerouslySetInnerHTML={{ 
-          __html: isExpanded ? displayReview.review : truncatedText 
-        }} />
-        {shouldShowExpand && (
-          <button 
-            className="expand-button"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            {isExpanded ? ' Show less' : ' Read more'}
-          </button>
-        )}
-      </p>
-      {(language === 'es' || language === 'fr') && originalReview && onToggleOriginal && (
-        <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          <button 
-            onClick={onToggleOriginal}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--accent-orange)',
-              cursor: 'pointer',
-              fontWeight: '600',
-              fontFamily: "'Figtree', sans-serif",
-              padding: '0',
-              textDecoration: 'underline',
-              transition: 'color 0.2s ease'
-            }}
-          >
-            {showOriginal ? (language === 'es' ? 'Ver traducido' : 'Voir traduit') : (language === 'es' ? 'Ver original' : 'Voir original')}
-          </button>
-        </div>
-      )}
-      <div className="review-author">
-        <div className="author-avatar">
-          <Image src={displayReview.profilePicture} alt={displayReview.author} width={80} height={80} />
-        </div>
-      </div>
-      <div>
-        <p className="review-author-name">{displayReview.author}</p>
-        <StarRating rating={5} align="right" />
-      </div>
-    </div>
-  );
-}
-
-export default function ReviewHighlightsSection({ className, strings }: { className: string; strings: any }) {
-  const pathname = usePathname();
-  const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-  const [individualToggles, setIndividualToggles] = useState<Record<string, boolean>>({});
-
-  const toggleIndividualOriginal = (reviewLink: string) => {
-    setIndividualToggles(prev => ({
-      ...prev,
-      [reviewLink]: !prev[reviewLink]
-    }));
-  };
-
-  return (
-    <div id="reviews-section" className={`review-highlights-section ${className}`}>
-      <ParallaxWrapper>
-        <h2 className="review-highlights-title">{strings.home.reviewHighlights.title}</h2>
-        <section className="review-highlights-container">
-          <Parallax translateX={['100%', '-100%']}>
-            <div className="review-highlights-row">
-              <TranslatableReviews language={language}>
-                {(reviews) => 
-                  reviews.map((review, index) => {
-                    const originalReview = REVIEWS[index];
-                    const showOriginal = individualToggles[review.link] || false;
-                    
-                    return (
-                      <ReviewCard 
-                        key={review.link} 
-                        review={review}
-                        originalReview={originalReview}
-                        showOriginal={showOriginal}
-                        onToggleOriginal={() => toggleIndividualOriginal(review.link)}
-                        language={language}
-                      />
-                    );
-                  })
-                }
-              </TranslatableReviews>
-          </div>
-          </Parallax>
-        </section>
-      </ParallaxWrapper>
-    </div>
-  );
-} 

package/src/components/season-closure-overlay.module.css

@@ -1,99 +0,0 @@
-.closureOverlayBackdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(3px);
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.seasonClosureCallout {
-  width: 90%;
-  max-width: 500px;
-  z-index: 4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 0.5rem;
-  pointer-events: none;
-}
-
-.seasonClosureCallout * {
-  pointer-events: auto;
-}
-
-.closureOverlayTop {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 0.1rem;
-}
-
-.closureOverlayBottom {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.closureTitle {
-  font-size: 3rem;
-  line-height: 0.7;
-  font-weight: 900;
-  color: #fff;
-  text-shadow: 0 0 8px rgba(0,0,0,0.4);
-  font-family: 'Snell Roundhand', sans-serif;
-  text-transform: lowercase;
-  text-align: center;
-  margin-bottom: -0.2rem;
-}
-
-.closureSubtitle {
-  font-size: 2rem;
-  line-height: 1;
-  font-weight: 400;
-  color: #fff;
-  text-shadow: 0 0 8px rgba(0,0,0,0.4);
-  letter-spacing: 0.5px;
-  font-family: 'Northlake', sans-serif;
-  text-transform: lowercase;
-  text-align: center;
-  margin-top: 2rem;
-  margin-bottom: 0.25rem;
-}
-
-.closureCountdownTime {
-  font-size: 0.9rem;
-  line-height: 1;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.9);
-  text-shadow: 0 0 6px rgba(0,0,0,0.3);
-  letter-spacing: 0.1em;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-}
-
-.closureOpeningDate {
-  font-size: 1.2rem;
-  line-height: 1.1;
-  font-weight: 400;
-  color: #fff;
-  text-shadow: 0 0 8px rgba(0,0,0,0.4);
-  letter-spacing: 0.5px;
-  font-family: 'Northlake', sans-serif;
-  text-transform: lowercase;
-  text-align: center;
-  margin-top: 0.5rem;
-}
-
-.browseOurToursButton {
-  margin-top: 1rem;
-  background-color: var(--accent-turquoise);
-}

package/src/components/season-closure-overlay.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import EmailSignup from '@/components/email-signup';
-import styles from './season-closure-overlay.module.css';
-import Link from 'next/link';
-import Button, { PresetButtonActions } from './button';
-
-// Tomorrow at 8:00 AM MDT (MDT = UTC-6, so 8 AM MDT = 14:00 UTC)
-function getReopenDate(now: Date): Date {
-    const denverDateStr = now.toLocaleDateString('en-CA', { timeZone: 'America/Denver' }); // YYYY-MM-DD
-    const [y, m, d] = denverDateStr.split('-').map(Number);
-    return new Date(Date.UTC(y, m - 1, d + 1, 14, 0, 0, 0));
-}
-
-function pad2(n: number): string {
-    return String(n).padStart(2, '0');
-}
-function pad3(n: number): string {
-    return String(n).padStart(3, '0');
-}
-
-function getCountdown(now: Date): { days: number; timeText: string } {
-    const diff = getReopenDate(now).getTime() - now.getTime();
-    if (diff <= 0) return { days: -1, timeText: "00:00:00.000" };
-    const totalSeconds = Math.floor(diff / 1000);
-    const days = Math.floor(totalSeconds / 86400);
-    const hours = Math.floor((totalSeconds % 86400) / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-    const ms = Math.floor(diff % 1000);
-    const timeText = `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}.${pad3(ms)}`;
-    return { days, timeText };
-}
-
-interface SeasonClosureOverlayProps {
-    strings: any;
-    className?: string;
-    showBackdrop?: boolean;
-}
-
-export default function SeasonClosureOverlay({ strings, className = "", showBackdrop = true }: SeasonClosureOverlayProps) {
-    const [countdown, setCountdown] = useState(() => getCountdown(new Date()));
-    const sc = strings.home.seasonClosure;
-
-    useEffect(() => {
-        const tick = () => setCountdown(getCountdown(new Date()));
-        tick();
-        // 50ms = 20 updates/sec. Smooth enough for ms display, much lighter than 10ms (100/sec).
-        const id = setInterval(tick, 50);
-        return () => clearInterval(id);
-    }, []);
-
-    const content = (
-        <motion.div 
-            className={styles.seasonClosureCallout}
-            initial={{ y: 20, opacity: 0, scale: 0.95 }}
-            animate={{ y: 0, opacity: 1, scale: 1 }}
-            transition={{
-                duration: 0.6,
-                delay: 0.3,
-                type: "spring",
-            }}
-        >
-            <div className={styles.closureOverlayTop} data-reopen-date="2026-03-11T15:00:00.000Z">
-                <span className={styles.closureTitle}>{sc.title}</span>
-                <span className={styles.closureSubtitle}>{sc.daysLine}</span>
-                <span className={styles.closureCountdownTime}>{countdown.timeText}</span>
-                <span className={styles.closureOpeningDate}><Link href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NXU3aTNhaWQ3N2sxZ21lcWVscXZ1bjN0c2IgY184OTI4ZDA1OTdhMzIwZjdhMGVlNDcyNzM5YjFkMzBkMmQ1MTNiYjgwZGI4OTU3Y2M5MGJjNzViM2U2OGFlOTI5QGc&tmsrc=c_8928d0597a320f7a0ee472739b1d30d2d513bb80db8957cc90bc75b3e68ae929%40group.calendar.google.com" target="_blank">{sc.openingDate}</Link></span>
-            </div>
-            <div className={styles.closureOverlayBottom}>
-                <EmailSignup strings={strings} source="hero-closure" />
-                <Button
-                    action={PresetButtonActions.BOOK_ALL}
-                    className={styles.browseOurToursButton}
-                    isLarge={true}
-                >
-                    {strings.home.seasonClosure.browseOurTours}
-                </Button>
-            </div>
-        </motion.div>
-    );
-
-    if (showBackdrop) {
-        return (
-            <div className={`${styles.closureOverlayBackdrop} ${className}`}>
-                {content}
-            </div>
-        );
-    }
-
-    return (
-        <div className={className}>
-            {content}
-        </div>
-    );
-}

package/src/components/simple-modal.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import EmailSignup from "./email-signup";
-import styles from './season-closure-overlay.module.css';
-import strings from '@/strings';
-
-interface SimpleModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
-export default function SimpleModal({ isOpen, onClose }: SimpleModalProps) {
-    if (!isOpen) return null;
-
-    return (
-        <div 
-            style={{
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: 'rgba(0, 0, 0, 0.5)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                zIndex: 9999,
-                padding: '1rem'
-            }}
-            onClick={onClose}
-        >
-            <div 
-                style={{
-                    background: 'white',
-                    padding: '2rem',
-                    borderRadius: '8px',
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-                    maxWidth: '600px',
-                    width: '100%'
-                }}
-                onClick={(e) => e.stopPropagation()}
-            >
-                <div className={styles.closureOverlayTop}>
-                    <span className={styles.closureTitle} style={{ color: 'var(--accent-orange)', textShadow: 'none' }}>{strings.home.seasonClosure.title}</span>
-                    <span className={styles.closureSubtitle} style={{ color: 'var(--accent-orange)', textShadow: 'none' }}>{strings.home.seasonClosure.subtitle}</span>
-                    <span className={styles.closureSubSubtitle} style={{ color: 'var(--accent-orange)', textShadow: 'none' }}>{strings.home.seasonClosure.message}</span>
-                </div>
-                
-                <p style={{ 
-                    fontFamily: 'Figtree, sans-serif',
-                    marginTop: '1.5rem',
-                    marginBottom: '1.5rem',
-                    lineHeight: '0.8rem',
-                    color: '#333',
-                    fontSize: '0.8rem',
-                    textAlign: 'center',
-                }}>
-                    Moraine Lake Road is closed by Parks Canada every year for the winter season. ❄️<br></br> See you next summer!
-                </p>
-                
-                <div className={styles.closureOverlayBottom}>
-                    <div className="email-signup-modal">
-                        <EmailSignup strings={strings} source="simple-modal" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/simple-top-of-fold.module.css

@@ -1,76 +0,0 @@
-.topOfFold {
-    position: relative;
-    width: 100vw;
-    overflow: hidden;
-}
-
-.heroImageWrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-}
-
-.heroImageWrapper :global(img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.heroOverlayContent {
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 14rem;
-}
-
-.heroTitle {
-    color: var(--accent-white);
-    font-size: 5rem;
-    line-height: 1.2;
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    text-transform: none;
-}
-
-.heroSubtitle {
-    color: var(--accent-white);
-    font-size: 2rem;
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.heroSubsubtitle {
-    color: var(--accent-white);
-    font-size: 1.5rem;
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    text-transform: uppercase;
-}
-
-@media (min-width: 1024px) {
-    .topOfFold {
-        height: calc(100vh - 98px);
-    }
-}
-
-@media (max-width: 1023px) {
-    .heroTitle {
-        font-size: 3rem;
-    }
-
-    .heroSubtitle {
-        font-size: 1.2rem;
-    }
-
-    .topOfFold {
-        height: 100vh;
-    }
-}