@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/value-props.css

@@ -0,0 +1,185 @@
+.value-props-container {
+  padding: var(--spacing-medium);
+  background-color: var(--light-orange-background);
+}
+
+.value-props-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.title-subtitle-container {
+  padding: var(--spacing-small);
+}
+
+.value-props-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.value-prop-card:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+  max-width: 350px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .value-props-grid {
+    gap: 24px;
+  }
+
+  .value-prop-card {
+    padding: 24px;
+  }
+
+  .value-prop-icon-wrapper {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 20px;
+  }
+
+  .value-prop-heading {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .value-props-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+  }
+
+  .value-prop-card {
+    padding: 32px;
+    min-height: 280px;
+    gap: 16px;
+  }
+
+  .value-prop-icon-wrapper {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 24px;
+  }
+
+  .value-prop-heading {
+    font-size: 28px;
+    margin-bottom: 16px;
+  }
+
+  .value-prop-card:last-child:nth-child(odd) {
+    grid-column: auto;
+    max-width: none;
+    margin: 0;
+  }
+
+  .value-prop-card:nth-last-child(2):nth-child(4),
+  .value-prop-card:last-child:nth-child(5) {
+    transform: translateX(50%);
+  }
+}
+
+.value-prop-card {
+  background: white;
+  padding: 8px 16px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.value-prop-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+  text-align: center;
+}
+
+.value-prop-icon {
+  width: 48px;
+  height: 48px;
+
+  @media (min-width: 768px) {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.value-prop-icon-wrapper {
+  @media (min-width: 768px) {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.value-prop-heading {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+@media (max-width: 768px) {
+  .value-props-grid {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 8px !important;
+    max-width: none !important;
+  }
+  
+  .value-prop-card {
+    padding: 8px 8px !important;
+    min-height: 120px !important;
+    gap: 4px !important;
+    grid-column: auto !important;
+    max-width: none !important;
+    margin: 0 !important;
+    transform: none !important;
+  }
+  
+  .value-prop-description {
+    display: none;
+  }
+  
+  .value-prop-icon-wrapper {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .value-prop-heading {
+    font-size: 14px;
+    margin-bottom: 4px;
+    text-align: center;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+  
+  .value-prop-icon {
+    margin: 0 !important;
+    display: block !important;
+    width: 48px !important;
+    height: 48px !important;
+    flex-shrink: 0 !important;
+  }
+  
+  .value-prop-icon svg {
+    margin: 0 !important;
+    display: block !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  
+  .value-prop-icon div {
+    width: 48px !important;
+    height: 48px !important;
+  }
+}

package/src/components/value-props.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import './value-props.css';
+import dynamic from 'next/dynamic';
+import TitleSubtitle from '@/components/title-subtitle';
+import { VALUE_PROPS_KEYS, animations } from '@/constants/value-props';
+
+// Dynamically import Lottie with no SSR
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
+
+interface ValuePropsProps {
+  title?: string;
+  description?: string;
+  filterKeys?: string[];
+  className?: string;
+  strings: any;
+}
+
+export default function ValueProps({ title, description, filterKeys, className, strings }: ValuePropsProps) {
+  // Generate value props dynamically from strings
+  const generateValueProps = () => {
+    const valuePropsMap = {
+      [VALUE_PROPS_KEYS.SMALL_GROUPS]: { animationKey: 'smallGroups' as const },
+      [VALUE_PROPS_KEYS.COZY_BLANKETS]: { animationKey: 'cozyBlankets' as const },
+      [VALUE_PROPS_KEYS.HOT_DRINKS]: { animationKey: 'hotDrinks' as const },
+      [VALUE_PROPS_KEYS.PHOTO_TOURS]: { animationKey: 'photoTours' as const },
+      [VALUE_PROPS_KEYS.LOCAL_GUIDES]: { animationKey: 'localGuides' as const },
+      [VALUE_PROPS_KEYS.CONVENIENT_PICKUP]: { animationKey: 'convenientPickup' as const },
+      [VALUE_PROPS_KEYS.DIRECT_ACCESS]: { animationKey: 'directAccess' as const },
+      [VALUE_PROPS_KEYS.AVOID_PAID_PARKING]: { animationKey: 'avoidPaidParking' as const },
+      [VALUE_PROPS_KEYS.FLEXIBLE_CANCELLATION]: { animationKey: 'flexibleCancellation' as const },
+      [VALUE_PROPS_KEYS.MULTIPLE_LOCATIONS]: { animationKey: 'multipleLocations' as const },
+      [VALUE_PROPS_KEYS.NO_PARKING_STRUGGLES]: { animationKey: 'noParkingStruggles' as const },
+      [VALUE_PROPS_KEYS.YOUR_PRIVATE_GROUP]: { animationKey: 'threeFriends' as const },
+      [VALUE_PROPS_KEYS.CUSTOMIZED_ITINERARY]: { animationKey: 'map' as const },
+      [VALUE_PROPS_KEYS.DOORSTEP_PICKUP]: { animationKey: 'convenientPickup' as const },
+      [VALUE_PROPS_KEYS.CAPTURE_THE_MOMENT]: { animationKey: 'photoTours' as const },
+      [VALUE_PROPS_KEYS.COZY_COMFORT]: { animationKey: 'cozyBlankets' as const },
+      [VALUE_PROPS_KEYS.PERSONAL_GUIDES]: { animationKey: 'localGuides' as const }
+    };
+
+    return Object.entries(valuePropsMap).map(([key, { animationKey }]) => ({
+      key,
+      animationKey,
+      title: strings.valueProps[key as keyof typeof strings.valueProps].title,
+      description: strings.valueProps[key as keyof typeof strings.valueProps].description
+    }));
+  };
+
+  const allValueProps = generateValueProps();
+  const displayedProps = filterKeys 
+    ? allValueProps.filter(prop => filterKeys.includes(prop.key))
+    : allValueProps;
+
+  return (
+    <section className={`value-props-container ${className}`}>
+      <div className="value-props-inner">
+        <div className="title-subtitle-container">
+          {title && (
+            <TitleSubtitle
+              title={title}
+              description={description}
+            />
+          )}
+        </div>
+        <div className="value-props-grid">
+          {displayedProps.map((prop) => (
+            <div key={prop.key} className="value-prop-card">
+              <div className="value-prop-icon-wrapper">
+                <Lottie
+                  animationData={animations[prop.animationKey]}
+                  loop={true}
+                  className="value-prop-icon"
+                />
+              </div>
+              <h3 className="value-prop-heading">
+                {prop.title}
+              </h3>
+              <p className="value-prop-description">
+                {prop.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/constants/booking-guide-quiz.ts

@@ -0,0 +1,64 @@
+import { QuizQuestion } from "@/types/quiz";
+import { IMAGES } from "./images";
+
+export const QUIZ_QUESTIONS: QuizQuestion[] = [
+    {
+        id: "what_lakes",
+        text: "What do you want to see during your visit to Banff National Park? Select all that apply.",
+        subtitle: "It is possible to see multiple lakes in one day, we'll recommend the best way to combine them.",
+        answers: [
+            { 
+                id: "moraine_lake", 
+                text: "Moraine Lake",
+                image: IMAGES.MORAINE_LAKE_SUNRISE
+            },
+            { 
+                id: "lake_louise", 
+                text: "Lake Louise",
+                image: IMAGES.LAKE_LOUISE
+            },
+            { 
+                id: "emerald_lake", 
+                text: "Emerald Lake",
+                image: IMAGES.EMERALD_LAKE
+            },
+            { id: "other_custom", text: "Other (you want a custom itinerary)" }
+        ],
+        isMultiSelect: true
+    },
+    {
+        id: "sunrise",
+        text: "Do you want to see the infamous Moraine Lake sunrise?",
+        answers: [
+            { id: "yes", text: "Yes, I want to see the sunrise", subtext: "🐦 Early bird gets the worm!" },
+            { id: "no", text: "No, I don't want to see the sunrise", subtext: "😴 I need my beauty rest" }
+        ]
+    },
+    {
+        id: "what_activities",
+        text: "What activities are you interested in? Select all that apply.",
+        subtitle: "It's possible to do multiple activities in one day! We'll recommend the best way to combine them.",
+        answers: [
+            { id: "banff_bucket_list", text: "Banff Bucket List" },
+            { id: "hiking", text: "Hiking" },
+            { id: "photography", text: "Photography" },
+            { id: "canoeing", text: "Canoeing" },
+            { id: "relaxation", text: "Relaxation" }
+        ],
+        isMultiSelect: true
+    },
+    {
+        id: "hiking",
+        text: "What type of hikes are you interested in?",
+        answers: [
+            { id: "easy_short_hikes", text: "Easy short hikes", subtext: "<=1 hour or 2.5km (1.5mi)" },
+            { id: "moderate_hikes", text: "Moderate hikes", subtext: "1-2 hours or 3-6km (2-4mi)" },
+            { id: "challenging_hikes", text: "Challenging hikes", subtext: ">2 hours or >6km (4mi)" },
+            { id: "expert_hikes", text: "Expert hikes", subtext: ">5 hours or >10km (6mi)" }
+        ],
+        showIf: (answers) => {
+            const activities = answers["what_activities"];
+            return Array.isArray(activities) ? activities.includes("hiking") : activities === "hiking";
+        }
+    }
+];

package/src/constants/contact-info.ts

@@ -0,0 +1,2 @@
+export const CONTACT_EMAIL = 'info@viaviamorainelake.com';
+export const CONTACT_PHONE = '+1 587 907 4560';

package/src/constants/faq.ts

@@ -0,0 +1,44 @@
+export enum faqPages {
+    HOME = "HOME",
+    SUNRISE = "SUNRISE",
+    MORAINE_LAKE = "MORAINE_LAKE",
+    LAKE_LOUISE = "LAKE_LOUISE",
+    EMERALD_LAKE = "EMERALD_LAKE",
+    PRIVATE_SHUTTLES = "PRIVATE_SHUTTLES"
+}
+
+export type faqSection = {
+    title: string | null;
+    items: faqItem[];
+}
+
+export type faqItem = {
+    question: string;
+    answer: string;
+    pagesIncluded: faqPages[];
+    priority?: number; // Optional priority number for ordering (lower numbers = higher priority)
+}
+
+export const getAllFAQSections = (strings: any): faqSection[] => {
+    return strings.faq.sections;
+};
+
+export const getFAQSectionByFAQPage = (faqPage: faqPages, strings: any): faqSection | undefined => {
+    const allFAQSections: faqSection[] = strings.faq.sections;
+    
+    const filteredItems = allFAQSections.flatMap(section => section.items.filter(item => 
+        item.pagesIncluded.includes(faqPage)
+    ));
+    
+    // Sort items by priority (lower numbers = higher priority, undefined priority = lowest priority)
+    const sortedItems = filteredItems.sort((a, b) => {
+        const priorityA = a.priority ?? Number.MAX_SAFE_INTEGER;
+        const priorityB = b.priority ?? Number.MAX_SAFE_INTEGER;
+        return priorityA - priorityB;
+    });
+    
+    return {
+        title: '',
+        items: sortedItems
+    }
+};