@ticketboothapp/booking 0.1.19 → 0.1.20

package/src/components/footer.css

@@ -1,187 +0,0 @@
-.footer-logo-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-    padding: 0 20px;
-}
-
-.footer-via-via-name {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.footer-logo-letter {
-    width: min(15vw, 60px);
-    height: min(15vw, 60px);
-}
-
-/* Target all SVG paths consistently */
-.footer-logo-letter path {
-    fill: var(--accent-white) !important;
-}
-
-/* For hover states - match opacity across all letters */
-.footer-container a:hover .footer-logo-letter path {
-    fill: var(--accent-white-70) !important;  /* Back to using the CSS variable */
-}
-
-/* Adjust sizes for mobile */
-@media (max-width: 768px) {
-    .footer-logo-letter {
-        width: min(12vw, 50px);
-        height: min(12vw, 50px);
-    }
-}
-
-/* Further adjust for very small screens */
-@media (max-width: 360px) {
-    .footer-logo-letter {
-        width: min(10vw, 40px);
-        height: min(10vw, 40px);
-    }
-}
-
-.footer-container {
-    background-color: var(--accent-orange);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-}
-
-.footer-container p {
-    color: var(--accent-white);
-}
-
-.footer-container a {
-    color: var(--accent-white);
-}
-
-.footer-container .footer-icon {
-    width: 36px;
-    height: 36px;
-    color: var(--accent-white);
-    fill: var(--accent-white);
-}
-
-.footer-container .footer-icon:hover {
-    color: var(--accent-white-70);
-    fill: var(--accent-white-70);
-}
-
-/* Target SVG paths to override inline fill attributes */
-.footer-container .footer-icon path {
-    fill: var(--accent-white) !important;
-}
-
-.footer-container .footer-icon:hover path {
-    fill: var(--accent-white-70) !important;
-}
-
-/* Scale down Google G icon to match other social icons */
-.footer-container a[href*="maps.app.goo.gl"] .footer-icon {
-    transform: scale(0.92);
-}
-
-/* Desktop hover */
-@media (min-width: 1024px) {
-    .footer-container a:hover {
-        color: var(--accent-white-70);
-    }
-  }
-
-/* Mobile styles */
-@media screen and (max-width: 768px) {
-    .footer-container .button {
-        width: 70%;
-    }
-}
-
-.footer-links-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1rem;
-    width: 70%;
-}
-
-/* Mobile: strict 2 columns */
-@media (max-width: 767px) {
-    .footer-links-container {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.75rem;
-        width: 90%;
-    }
-    
-    .footer-links-container a {
-        font-size: 0.8rem;
-        min-height: 2.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    /* Center the last item if it's alone */
-    .footer-links-container > a:last-child:nth-child(2n - 1) {
-        grid-column: 1 / -1;
-    }
-}
-
-/* Desktop: 5 columns */
-@media (min-width: 768px) {
-    .footer-links-container {
-        display: flex;
-        gap: 2rem;
-    }
-    
-    .footer-links-container a {
-        flex: 0 0 calc(20% - 1.6rem);
-        min-width: fit-content;
-        max-width: calc(20% - 1.6rem);
-    }
-}
-
-.footer-links-container a {
-    text-align: center;
-    white-space: normal;
-    text-decoration: none;
-    text-transform: uppercase;
-    font-family: 'Poppins', sans-serif;
-    color: var(--accent-white);
-    line-height: 1.2;
-    padding: 0.25rem;
-}
-
-.footer-company-text {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    text-align: center;
-}
-
-/* Mobile styles for company text */
-@media (max-width: 768px) {
-    .footer-company-text {
-        font-size: 0.6rem;
-    }
-}
-
-.footer-moraine-magic-icon {
-    width: 60%;
-    max-width: 400px;
-    height: auto;
-    margin: 0 auto;
-    display: block;
-}
-
-/* Mobile styles for moraine magic icon */
-@media (max-width: 768px) {
-    .footer-moraine-magic-icon {
-        width: 80%;
-        max-width: 500px;
-    }
-}
-

package/src/components/footer.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import './footer.css';
-import { getStrings } from '@/strings';
-import FacebookIcon from '@/assets/icons/facebook.svg';
-import InstagramIcon from '@/assets/icons/instagram.svg';
-import TikTokIcon from '@/assets/icons/tiktok.svg';
-import GoogleIcon from '@/assets/icons/google-g-white.svg';
-import Spacer from './spacer';
-import Button, { ButtonHoverColor } from './button';
-import { getFooterLinks } from '@/constants/navigation-links/footer-links';
-import VIcon from '@/assets/icons/viavia-v.svg';
-import IIcon from '@/assets/icons/viavia-i.svg';
-import AIcon from '@/assets/icons/viavia-a.svg';
-import Link from 'next/link';
-import LanguageAwareLink from './language-aware-link';
-import { useBottomSheet } from '@/providers/bottom-sheet-provider';
-import ContactUs from './contact-us';
-import { useEffect, Suspense } from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
-import MoraineMagicIcon from '@/assets/moraine-magic-white.svg';
-import EmailSignup from './email-signup';
-
-function ContactHandler() {
-    const { openSheet } = useBottomSheet();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    useEffect(() => {
-        if (window.location.hash === '#contact') {
-            // Detect language from pathname inside the effect
-            const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-            const strings = getStrings(language);
-            
-            // Prevent default scroll behavior
-            const handleHashChange = (e: HashChangeEvent) => {
-                if (e.newURL.includes('#contact')) {
-                    e.preventDefault();
-                }
-            };
-            
-            window.addEventListener('hashchange', handleHashChange);
-            openSheet(<ContactUs strings={strings} />);
-            // Removed the history.replaceState line to keep the hash in URL
-
-            return () => {
-                window.removeEventListener('hashchange', handleHashChange);
-            };
-        }
-    }, [pathname, searchParams, openSheet]);
-
-    return null;
-}
-
-export default function Footer() {
-    const { openSheet } = useBottomSheet();
-    const pathname = usePathname();
-    
-    // Detect language from pathname
-    const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-    const strings = getStrings(language);
-
-    const handleContactClick = () => {
-        openSheet(<ContactUs strings={strings} />);
-    };
-
-    return (
-        <div className={`footer-container`}>
-            <Suspense>
-                <ContactHandler />
-            </Suspense>
-            <LanguageAwareLink href="/" className="footer-logo-container">
-                <div className="footer-via-via-name">
-                    <VIcon className="footer-logo-letter" />
-                    <IIcon className="footer-logo-letter" />
-                    <AIcon className="footer-logo-letter" />
-                </div>
-                <Spacer horizontal = {true} />
-                <div className="footer-via-via-name">
-                    <VIcon className="footer-logo-letter" />
-                    <IIcon className="footer-logo-letter" />
-                    <AIcon className="footer-logo-letter" />
-                </div>
-            </LanguageAwareLink>
-            <Spacer />
-            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
-                <a href="https://instagram.com/viaviamorainelake" target="_blank" rel="noopener noreferrer">
-                    <InstagramIcon className="footer-icon" />
-                </a>
-                <a href="https://www.facebook.com/profile.php?id=61557238871790" target="_blank" rel="noopener noreferrer">
-                    <FacebookIcon className="footer-icon" />
-                </a>
-                <a href="https://www.tiktok.com/@viaviamorainelake" target="_blank" rel="noopener noreferrer">
-                    <TikTokIcon className="footer-icon" />
-                </a>
-                <a href="https://maps.app.goo.gl/FxRqxTjgN43ttWac9" target="_blank" rel="noopener noreferrer">
-                    <GoogleIcon className="footer-icon" />
-                </a>
-            </div>
-            <Spacer />
-            <FooterLinks strings={strings} />
-            <Spacer size='L' />
-            <Button 
-                onClick={handleContactClick}
-                variant="secondary"
-            >
-                {strings.footer.contactUs}
-            </Button>
-            <Spacer />
-            <p onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ cursor: 'pointer' }}>
-                ↑ <a><u>{strings.footer.returnToTop}</u></a> ↑
-            </p>
-            <Spacer />
-            <MoraineMagicIcon className="footer-moraine-magic-icon" />
-            <Spacer />
-            <EmailSignup strings={strings} source="footer" />
-            <Spacer />
-            <p><LanguageAwareLink href="/terms-conditions">{strings.footer["terms-and-conditions"]}</LanguageAwareLink></p>
-            <p><LanguageAwareLink href="/privacy-policy">{strings.footer["privacy-policy"]}</LanguageAwareLink></p>
-            <p><LanguageAwareLink href="/sitemap.xml">{strings.footer["sitemap"]}</LanguageAwareLink></p>
-            <Spacer />
-            <p>{strings.footer.copyright}</p>
-            <p className="footer-company-text" style={{ textTransform: 'uppercase', textAlign: 'center' }}>{strings.footer.company}</p>
-        </div>
-    )
-}
-
-function FooterLinks({ strings }: { strings: any }) {
-    const footerLinks = getFooterLinks(strings);
-    return (
-        <div className="footer-links-container">
-            {Object.values(footerLinks).map((link) => (
-                link.external ? (
-                    <a key={link.name} href={link.url} target="_blank" rel="noopener noreferrer">
-                        {link.name}
-                    </a>
-                ) : (
-                    <LanguageAwareLink key={link.name} href={link.path ?? link.url ?? '/'}>{link.name}</LanguageAwareLink>
-                )
-            ))}
-        </div>
-    )
-}

package/src/components/global-simple-modal.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useSimpleModal } from '@/hooks/use-simple-modal';
-import SimpleModal from './simple-modal';
-import { useEffect } from 'react';
-
-export default function GlobalSimpleModal() {
-    const { isModalOpen, closeModal } = useSimpleModal();
-
-    useEffect(() => {
-        const handleBookNowClick = (e: Event) => {
-            const target = e.target as HTMLElement;
-            const link = target.closest('a[href="#book-now"]');
-            if (link) {
-                e.preventDefault();
-                window.dispatchEvent(new CustomEvent('openSimpleModal'));
-            }
-        };
-
-        document.addEventListener('click', handleBookNowClick);
-        
-        return () => {
-            document.removeEventListener('click', handleBookNowClick);
-        };
-    }, []);
-
-    return (
-        <SimpleModal 
-            isOpen={isModalOpen} 
-            onClose={closeModal} 
-        />
-    );
-}

package/src/components/google-review-summary.module.css

@@ -1,77 +0,0 @@
-.googleReviewSummary {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1rem;
-  transition: transform 0.2s ease, filter 0.2s ease;
-  cursor: pointer;
-}
-
-.googleReviewSummary:hover {
-  transform: scale(1.05);
-  filter: brightness(1.1);
-}
-
-.googleReviewSummary:active {
-  transform: scale(1.02);
-}
-
-.centerSection {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.logoRow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  margin-bottom: 0.5rem;
-  flex-direction: row;
-  width: 100%;
-  position: relative;
-}
-
-.sideLogo {
-  filter: brightness(0) invert(1);
-  position: absolute;
-  z-index: 0;
-  opacity: 0.7;
-  flex-shrink: 0;
-  top: 50%;
-  transform: translateY(5%);
-}
-
-.sideLogo:first-child {
-  left: 5%;
-}
-
-.sideLogo:last-child {
-  right: 5%;
-}
-
-.googleIcon {
-  --google-blue: var(--accent-white);
-  --google-red: var(--accent-white);
-  --google-yellow: var(--accent-white);
-  --google-green: var(--accent-white);
-  --google-lightblue: var(--accent-white);
-  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-  position: relative;
-  z-index: 2;
-  margin-bottom: -2.5px;
-}
-
-.googleReviewsCount {
-  font-size: 16px;
-  color: var(--accent-white);
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  font-family: 'Poppins', sans-serif;
-}
-
-.googleReviewSummary :global(.starRating) {
-  position: relative;
-  z-index: 1;
-}

package/src/components/google-review-summary.tsx

@@ -1,50 +0,0 @@
-import GoogleIcon from '@/assets/icons/google-g.svg';
-import TripAdvisorIcon from '@/assets/icons/partner-logos/tripadvisor.svg';
-import GetYourGuideIcon from '@/assets/icons/partner-logos/getyourguide.svg';
-import styles from './google-review-summary.module.css';
-import StarRating from './star-rating';
-
-export default function GoogleReviewSummary({ strings }: { strings: any }) {
-  const scrollToReviews = () => {
-    const reviewsSection = document.getElementById('reviews-section');
-    if (reviewsSection) {
-      const elementTop = reviewsSection.offsetTop;
-      const offset = 100; // Adjust this value to control how high the section appears
-      window.scrollTo({
-        top: elementTop - offset,
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  return (
-    <div 
-      className={styles.googleReviewSummary} 
-      onClick={scrollToReviews}
-      style={{ cursor: 'pointer' }}
-      title="Click to see all reviews"
-    >
-      <div className={styles.centerSection}>
-        <div className={styles.logoRow}>
-          <TripAdvisorIcon
-            width={28}
-            height={28}
-            className={styles.sideLogo}
-          />
-          <GoogleIcon
-            width={42}
-            height={42}
-            className={styles.googleIcon}
-          />
-          <GetYourGuideIcon
-            width={28}
-            height={28}
-            className={styles.sideLogo}
-          />
-        </div>
-        <StarRating rating={5} showVerified={false} useGradientSize={true} />
-      </div>
-      <p className={styles.googleReviewsCount}>{strings.home.hero.googleReviewsCount}</p>
-    </div>
-  );
-}

package/src/components/hero-image.css

@@ -1,13 +0,0 @@
-.hero-image-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.parallax-container {
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-  transform: translate3d(0, 0, 0);
-}

package/src/components/hero-image.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import ViaViaImage from './image';
-import './hero-image.css';
-import { useEffect, useRef } from 'react';
-
-interface HeroImageProps {
-  imageId: string;
-  alt: string;
-  objectPosition?: string;
-}
-
-const HeroImage = ({ imageId, alt, objectPosition }: HeroImageProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleScroll = () => {
-      const scrolled = Math.max(0, Math.min(window.scrollY, container.offsetHeight));
-      const rate = scrolled * 0.5;
-      container.style.transform = `translate3d(0, ${rate}px, 0)`;
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <div className="hero-image-container">
-      <div className="parallax-container" ref={containerRef}>
-        <ViaViaImage 
-          imageId={imageId} 
-          context="HERO" 
-          alt={alt} 
-          style={objectPosition ? { objectPosition } : undefined}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default HeroImage;

package/src/components/image.css

@@ -1,29 +0,0 @@
-.image-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.image-natural {
-  position: relative;
-  width: 100%;
-  height: auto;
-}
-
-/* Make sure images are responsive within their containers */
-.image-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  /* This centers the image content vertically when cropped */
-  object-position: 50% 50%;
-}
-
-.image-natural img {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-} 

package/src/components/image.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import Image from 'next/image';
-import './image.css';
-
-interface ImageWidths {
-  mobile: number;
-  tablet: number; 
-  desktop: number;
-}
-
-interface ImageWidthsMap {
-  HERO: ImageWidths;
-  GALLERY: ImageWidths;
-  THUMBNAIL: ImageWidths;
-  MODAL: ImageWidths;
-}
-
-const IMAGE_WIDTHS: ImageWidthsMap = {
-  HERO: {
-    mobile: 768,
-    tablet: 1024,
-    desktop: 1920
-  },
-  GALLERY: {
-    mobile: 400,
-    tablet: 600,
-    desktop: 800
-  },
-  THUMBNAIL: {
-    mobile: 200,
-    tablet: 300,
-    desktop: 400
-  },
-  MODAL: {
-    mobile: 1024,
-    tablet: 1280,
-    desktop: 1920
-  }
-};
-
-type ImageContext = 'HERO' | 'GALLERY' | 'THUMBNAIL' | 'MODAL';
-
-interface ImageProps {
-  imageId: string;
-  context?: ImageContext;
-  alt: string;
-  className?: string;
-  maintainAspectRatio?: boolean;
-  style?: React.CSSProperties;
-}
-
-// Pre-compute sizes strings for each context to ensure consistency
-const SIZES = {
-  HERO: '(min-width: 1024px) 1920px, (min-width: 768px) 1024px, 768px',
-  GALLERY: '(min-width: 1024px) 800px, (min-width: 768px) 600px, 400px',
-  THUMBNAIL: '(min-width: 1024px) 400px, (min-width: 768px) 300px, 200px',
-  MODAL: '(min-width: 1024px) 1920px, (min-width: 768px) 1280px, 1024px'
-};
-
-// Pre-compute quality values
-const QUALITY = {
-  HERO: 85,
-  GALLERY: 75,
-  THUMBNAIL: 75,
-  MODAL: 85
-};
-
-const ViaViaImage = ({ 
-  className = '', 
-  imageId, 
-  context = 'THUMBNAIL', 
-  alt,
-  maintainAspectRatio = false,
-  style
-}: ImageProps) => {
-  const normalizedContext = context.toUpperCase() as ImageContext;
-  const widths = IMAGE_WIDTHS[normalizedContext];
-
-  if (maintainAspectRatio) {
-    return (
-      <div className={`image-container image-natural ${className}`}>
-        <Image
-          src={imageId}
-          alt={alt}
-          fill={false}
-          width={widths.desktop}
-          height={widths.desktop * 9 / 16}
-          sizes={SIZES[normalizedContext]}
-          priority={normalizedContext === 'HERO'}
-          quality={QUALITY[normalizedContext]}
-          style={{ width: '100%', height: 'auto', ...style }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={`image-container image-${normalizedContext.toLowerCase()} ${className}`}>
-      <Image
-        src={imageId}
-        alt={alt}
-        fill={true}
-        sizes={SIZES[normalizedContext]}
-        priority={normalizedContext === 'HERO'}
-        quality={QUALITY[normalizedContext]}
-        style={style}
-      />
-    </div>
-  );
-};
-
-export default ViaViaImage;