@ticketboothapp/booking 0.1.11 → 0.1.13

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

@@ -0,0 +1,84 @@
+.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

@@ -0,0 +1,61 @@
+"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

@@ -0,0 +1,85 @@
+.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

@@ -0,0 +1,127 @@
+"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

@@ -0,0 +1,99 @@
+.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

@@ -0,0 +1,98 @@
+"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

@@ -0,0 +1,69 @@
+"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

@@ -0,0 +1,76 @@
+.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;
+    }
+}