@ticketboothapp/booking 0.1.18 → 0.1.20

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

package/src/components/simple-top-of-fold.tsx

@@ -1,34 +0,0 @@
-import styles from './simple-top-of-fold.module.css';
-import { ImageData } from '@/constants/images';
-import HeroImage from '@/components/hero-image';
-
-export type ImagePosition = 'top' | 'center' | 'bottom';
-
-export interface SimpleTopOfFoldProps {
-    image: ImageData;
-    title: string;
-    subtitle: string;
-    subsubtitle?: string;
-    imagePosition?: ImagePosition;
-}
-
-export default function SimpleTopOfFold(props: SimpleTopOfFoldProps) {
-    const { image, title, subtitle, subsubtitle, imagePosition = 'center' } = props;
-    return (
-        <div className={`${styles.topOfFold} global-top-fold`}>
-            <div className={`${styles.heroImageWrapper} ${styles[imagePosition]}`}>
-                <HeroImage 
-                    imageId={image.id}
-                    alt={image.alt}
-                    objectPosition={imagePosition}
-                />
-            </div>
-
-            <div className={styles.heroOverlayContent}>
-                <h1 className={styles.heroTitle}>{title}</h1>
-                <h2 className={styles.heroSubtitle}>{subtitle}</h2>
-                {subsubtitle && <h3 className={styles.heroSubsubtitle}>{subsubtitle}</h3>}
-            </div>
-        </div>
-    );
-}

package/src/components/spacer.css

@@ -1,41 +0,0 @@
-.spacer {
-  display: block;
-}
-
-.spacer-vertical {
-  width: 100%;
-}
-
-.spacer-horizontal {
-  height: 100%;
-  display: inline-block;
-}
-
-/* Vertical spacing */
-.spacer-small {
-  height: var(--spacing-small);
-}
-
-.spacer-medium {
-  height: var(--spacing-medium);
-}
-
-.spacer-large {
-  height: var(--spacing-large);
-}
-
-/* Horizontal spacing */
-.spacer-horizontal.spacer-small {
-  width: var(--spacing-small);
-  height: auto;
-}
-
-.spacer-horizontal.spacer-medium {
-  width: var(--spacing-medium);
-  height: auto;
-}
-
-.spacer-horizontal.spacer-large {
-  width: var(--spacing-large);
-  height: auto;
-} 

package/src/components/spacer.tsx

@@ -1,23 +0,0 @@
-import './spacer.css';
-
-const SPACER_SIZES = {
-  S: 'small',
-  M: 'medium', 
-  L: 'large'
-} as const;
-
-type SpacerSize = keyof typeof SPACER_SIZES;
-
-interface SpacerProps {
-  size?: SpacerSize;
-  horizontal?: boolean;
-  className?: string;
-}
-
-const Spacer = ({ className = '', size = 'M', horizontal = false }: SpacerProps) => {
-  const spacerClass = `spacer spacer-${SPACER_SIZES[size]} ${horizontal ? 'spacer-horizontal' : 'spacer-vertical'} ${className}`;
-  
-  return <div className={spacerClass} />;
-};
-
-export default Spacer;

package/src/components/star-rating.module.css

@@ -1,74 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.starRating {
-  display: flex;
-  gap: 2px;
-}
-
-.starRating.gradientSpacing {
-  gap: 2px;
-}
-
-/* Add extra spacing around the large center star */
-.starRating.gradientSpacing .starLarge {
-  margin: 0 4px;  /* Additional margin on left and right of the center star */
-}
-
-.star {
-  width: 16px;
-  height: 16px;
-  opacity: 0.3;
-}
-
-.star.filled {
-  opacity: 1;
-}
-
-.verified {
-  width: 16px;
-  height: 16px;
-  position: relative;
-}
-
-.verified:hover::after {
-  content: "Trustindex verifies that the original source of the review is Google.";
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 1000;
-}
-
-.align-left {
-  justify-content: flex-start;
-}
-
-.align-center {
-  justify-content: center;
-}
-
-.align-right {
-  justify-content: flex-end;
-}
-
-.starSmall {
-  transform: scale(0.8);
-}
-
-.starMedium {
-  transform: scale(1);
-}
-
-.starLarge {
-  transform: scale(1.4);
-} 

package/src/components/star-rating.tsx

@@ -1,48 +0,0 @@
-import StarIcon from '@/assets/icons/star.svg';
-import VerifiedIcon from '@/assets/icons/verified.svg';
-import styles from './star-rating.module.css';
-
-interface StarRatingProps {
-  rating: number;  // Expects a number between 0-5
-  showVerified?: boolean;
-  align?: 'left' | 'center' | 'right';
-  useGradientSize?: boolean;  // New prop to control star size pattern
-}
-
-export default function StarRating({ 
-  rating, 
-  showVerified = true, 
-  align = 'left',
-  useGradientSize = false
-}: StarRatingProps) {
-  // Helper function to get size class based on star position
-  const getStarSizeClass = (position: number) => {
-    if (!useGradientSize) return '';
-    
-    if (position === 3) return styles.starLarge;
-    if (position === 2 || position === 4) return styles.starMedium;
-    return styles.starSmall;
-  };
-
-  return (
-    <div className={`${styles.container} ${styles[`align-${align}`]}`}>
-      <div className={`${styles.starRating} ${useGradientSize ? styles.gradientSpacing : ''}`}>
-        {[1, 2, 3, 4, 5].map((star) => (
-          <StarIcon 
-            key={star}
-            className={`
-              ${styles.star} 
-              ${star <= rating ? styles.filled : styles.empty}
-              ${getStarSizeClass(star)}
-            `}
-          />
-        ))}
-      </div>
-      {showVerified && (
-        <div className={styles.verified} title="Trustindex verifies that the original source of the review is Google.">
-          <VerifiedIcon />
-        </div>
-      )}
-    </div>
-  );
-}