@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/product-theme-pages/top-of-fold.module.css

@@ -0,0 +1,179 @@
+.topOfFold {
+    position: relative;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .heroImageWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .heroCenterText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    pointer-events: none;
+    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;
+  }
+
+  .heroOverlayContent {
+    position: absolute;
+    top: 7rem;
+    bottom: 4rem;
+    left: 0.5rem;
+    right: 0.5rem;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .heroTopContent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .heroBottomContent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .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);
+  }
+
+  .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: 4rem;
+    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: 1.8rem;
+    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;
+  }
+
+  .closureSubSubtitle {
+    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;
+  }
+
+  @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/product-theme-pages/top-of-fold.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import styles from './top-of-fold.module.css';
+import { ImageData } from '@/constants/images';
+import HeroImage from '@/components/hero-image';
+import strings from '@/strings';
+import Button, { PresetButtonActions } from '@/components/button';
+import GoogleReviewSummary from '@/components/google-review-summary';
+import SeasonClosureOverlay from '@/components/season-closure-overlay';
+import {
+    OPEN_BOOKING_FOR_PRODUCT,
+    OPEN_BOOKING_WITH_FILTER,
+    type ProductGridFilterId,
+} from '@/providers/booking-dialog-provider';
+import { useIsBookingLaunchLive } from '@/hooks/useIsBookingLaunchLive';
+
+export interface TopOfFoldProps {
+    image: ImageData;
+    title: string;
+    subtitle: string;
+    /** Open product grid with this filter pre-applied (e.g. 'moraine-lake', 'sunrise'). */
+    bookFilterId?: ProductGridFilterId;
+    /** Product slug to open directly. Use when page has a single primary product. */
+    bookProductSlug?: string;
+    /** Fallback when neither bookFilterId nor bookProductSlug (e.g. home page). */
+    bookButtonAction?: PresetButtonActions;
+}
+
+export default function TopOfFold(props: TopOfFoldProps) {
+    const { image, title, subtitle, bookFilterId, bookProductSlug, bookButtonAction = PresetButtonActions.BOOK_ALL } = props;
+    const isLaunchLive = useIsBookingLaunchLive();
+
+    const handleBookClick = () => {
+        if (bookFilterId) {
+            window.dispatchEvent(new CustomEvent(OPEN_BOOKING_WITH_FILTER, { detail: { filterId: bookFilterId } }));
+        } else if (bookProductSlug) {
+            window.dispatchEvent(new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: bookProductSlug } }));
+        } else {
+            window.dispatchEvent(new CustomEvent('openSimpleModal'));
+        }
+    };
+
+    const hasCustomBookAction = bookFilterId || bookProductSlug;
+
+    return (
+        <div className={`${styles.topOfFold} global-top-fold`}>
+            {isLaunchLive && <div className={styles.heroCenterText}>{strings.home.hero.centerCallout}</div>}
+            <div className={styles.heroImageWrapper}>
+                <HeroImage 
+                    imageId={image.id}
+                    alt={image.alt}
+                />
+            </div>
+
+            <div className={styles.heroOverlayContent}>
+                <div className={styles.heroTopContent}>
+                    <h1 className={styles.heroTitle}>{title}</h1>
+                    <h2 className={styles.heroSubtitle}>{subtitle}</h2>
+                </div>
+                
+                <div className={styles.heroBottomContent}>
+                    <GoogleReviewSummary strings={strings} />
+                    {hasCustomBookAction ? (
+                        <button
+                            type="button"
+                            onClick={handleBookClick}
+                            className="button button-primary hover-white button-large"
+                        >
+                            {strings.common.bookNow}
+                        </button>
+                    ) : (
+                        <Button isLarge={true} action={bookButtonAction}>{strings.common.bookNow}</Button>
+                    )}
+                </div>
+            </div>
+            
+            {!isLaunchLive && <SeasonClosureOverlay strings={strings} />}
+        </div>
+    );
+}

package/src/components/product-tile/image-only-product-tile-desktop.module.css

@@ -0,0 +1,106 @@
+.productTile {
+    height: 100%;
+    width: 100%;
+    text-decoration: none;
+    position: relative;
+    cursor: pointer;
+}
+
+.productTileImageContainer {
+    width: 100%;
+    height: 420px;
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.productTileImage {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: transform 0.3s ease-in-out;
+    will-change: transform;
+}
+
+.productTile:hover .productTileImage {
+    transform: scale(1.1);
+}
+
+.productTileImage::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30%;
+    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+    z-index: 1;
+}
+
+.productTileContentOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: var(--spacing-medium);
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.productTileTags {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-small);
+}
+
+.productTileTitle {
+    margin: 0;
+    color: white;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    line-height: 1.0;
+}
+
+.productStartTime {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: #FFFFFF;
+    font-family: 'Northlake', sans-serif;
+    font-weight: 400;
+    font-size: 3rem;
+    text-align: right;
+    z-index: 2;
+    line-height: 0.8;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    -webkit-font-smoothing: antialiased;
+    will-change: transform;
+}
+
+.productTilePillValuesView {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 3;
+}
+
+.productTileImageContainer:hover .productTilePillValuesView {
+    opacity: 1;
+}
+
+.productTile:hover .productStartTime,
+.productTile:hover .productTileTitle {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+} 

package/src/components/product-tile/image-only-product-tile-desktop.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Product } from "@/constants/products"
+import ViaViaImage from "../image"
+import styles from "./image-only-product-tile-desktop.module.css"
+import { PillVariant } from "../value-pill"
+import ValuePill from "../value-pill"
+import ProductTag from "../product-tag"
+import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider"
+
+export default function ProductTileDesktop({ product, strings }: { 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.productTile} style={{ cursor: 'pointer' }}>
+            <div className={styles.productTileImageContainer}>
+                <ViaViaImage
+                    className={styles.productTileImage}
+                    imageId={product.images[0].id}
+                    alt={product.images[0].alt}
+                    context="GALLERY"
+                />
+                <div className={styles.productTileContentOverlay}>
+                    {/* Render tags if they exist */}
+                    {product.tags && (
+                        <div className={styles.productTileTags}>
+                            {product.tags.map((tag, index) => (
+                                <ProductTag
+                                    key={`${tag.text}-${index}`}
+                                    text={tag.text}
+                                    style={tag.style}
+                                />
+                            ))}
+                        </div>
+                    )}
+                    <h3 className={styles.productTileTitle}>{product.shortName}</h3>
+                </div>
+                <span className={styles.productStartTime} dangerouslySetInnerHTML={{ __html: product.currentStartTime }} />
+                <div className={styles.productTilePillValuesView}>
+                    {product.pillValues.map((pillValue, index) => (
+                        <ValuePill 
+                            key={`${pillValue.label}-${index}`}
+                            variant={PillVariant.overlay} 
+                            pillValue={pillValue} 
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+} 

package/src/components/product-tile/image-only-product-tile-mobile.module.css

@@ -0,0 +1,122 @@
+.productTile {
+    height: 100%;
+    width: 100%;
+    text-decoration: none;
+    position: relative;
+    margin-top: var(--spacing-large);
+}
+
+.card {
+    width: 100%;
+    height: 380px;
+    perspective: 1000px;
+    cursor: pointer;
+}
+
+.cardInner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.card.isFlipped .cardInner {
+    transform: rotateY(180deg);
+}
+
+.cardFaceFront,
+.cardFaceBack {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.productTileImageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: var(--border-radius-small);
+    overflow: hidden;
+    border: 10px solid var(--accent-orange);
+    box-sizing: border-box;
+}
+
+.cardFaceFront {
+    transform: rotateY(0deg);
+}
+
+.cardFaceBack {
+    transform: rotateY(180deg);
+    height: 380px;
+    background: var(--grey-text-dark-70);
+    border-radius: var(--border-radius-small);
+}
+
+.productTilePillValuesView {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.productTileImage {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.productTileImage::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30%;
+    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+    z-index: 1;
+}
+
+.productTileContentOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 8px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.productTileTags {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-small);
+}
+
+.productTileTitle {
+    margin: 0;
+    color: white;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.productStartTime {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: #FFFFFF;
+    font-family: 'Northlake', sans-serif;
+    font-weight: 400;
+    font-size: 2.5rem;
+    text-align: right;
+    z-index: 2;
+    line-height: 0.8;
+} 
+
+.backCardProductTileButton {
+    margin-top: var(--spacing-small);
+}

package/src/components/product-tile/image-only-product-tile-mobile.tsx

@@ -0,0 +1,89 @@
+'use client';
+import { Product } from "@/constants/products"
+import ViaViaImage from "../image"
+import styles from "./image-only-product-tile-mobile.module.css"
+import { PillVariant } from "../value-pill"
+import ValuePill from "../value-pill"
+import Button from "../button";
+import defaultStrings from "@/strings";
+import ProductTag from "../product-tag";
+import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider";
+
+export default function ProductTileMobile({ 
+    product, 
+    isFlipped, 
+    onFlip,
+    strings = defaultStrings
+}: { 
+    product: Product;
+    isFlipped: boolean;
+    onFlip: () => void;
+    strings?: any;
+}) {
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        onFlip();
+    };
+
+    const handleMoreInfo = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(
+            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
+        );
+    };
+
+    return (
+        <div className={styles.productTile} onClick={handleClick}>
+            <div className={`${styles.card} ${isFlipped ? styles.isFlipped : ''}`}>
+                <div className={styles.cardInner}>
+                    <div className={styles.cardFaceFront}>
+                        <div className={styles.productTileImageContainer}>
+                            <ViaViaImage
+                                className={styles.productTileImage}
+                                imageId={product.images[0].id}
+                                alt={product.images[0].alt}
+                                context="GALLERY"
+                            />
+                            <div className={styles.productTileContentOverlay}>
+                                {/* Render tags if they exist */}
+                                {product.tags && (
+                                    <div className={styles.productTileTags}>
+                                        {product.tags.map((tag, index) => (
+                                            <ProductTag
+                                                key={`${tag.text}-${index}`}
+                                                text={tag.text}
+                                                style={tag.style}
+                                            />
+                                        ))}
+                                    </div>
+                                )}
+                                <h3 className={styles.productTileTitle}>{product.shortName}</h3>
+                            </div>
+                            <span className={styles.productStartTime} dangerouslySetInnerHTML={{ __html: product.currentStartTime }} />
+                        </div>
+                    </div>
+                    <div className={styles.cardFaceBack}>
+                        <div className={styles.productTilePillValuesView}>
+                            {product.pillValues.map((pillValue, index) => (
+                                <ValuePill 
+                                    key={`${pillValue.label}-${index}`}
+                                    variant={PillVariant.solid} 
+                                    pillValue={pillValue} 
+                                />
+                            ))}
+                            <Button 
+                                variant="outline" 
+                                className={styles.backCardProductTileButton}
+                                action=""
+                                onClick={handleMoreInfo}
+                            >
+                                {strings.common.moreInfo}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+} 

package/src/components/product-tile/image-only-product-tile.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { Product } from "@/constants/products"
+import { useState, useEffect } from "react";
+import ProductTileDesktop from "./image-only-product-tile-desktop";
+import ProductTileMobile from "./image-only-product-tile-mobile";
+
+export default function ProductTile({ 
+    product,
+    flippedProductId,
+    onFlip,
+    strings
+}: { 
+    product: Product;
+    flippedProductId?: string;
+    onFlip?: (productId: string) => void;
+    strings?: any;
+}) {
+    const [isMobile, setIsMobile] = useState(false); // Default to desktop view
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+        setHasMounted(true);
+        const checkMobile = () => setIsMobile(window.innerWidth < 1025);
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    // Always render desktop version for SEO/initial render
+    if (!hasMounted) {
+        return <ProductTileDesktop product={product} strings={strings} />;
+    }
+
+    return isMobile ? (
+        <ProductTileMobile 
+            product={product} 
+            isFlipped={flippedProductId === product.id}
+            onFlip={() => onFlip?.(product.id)}
+            strings={strings}
+        />
+    ) : (
+        <ProductTileDesktop product={product} strings={strings} />
+    );
+}