@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/contact-us.module.css

@@ -0,0 +1,147 @@
+.contactSection {
+    padding-bottom: 1rem;  /* Reduced from 6rem */
+}
+
+.contactTiles {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 1rem;
+}
+
+.imageContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 320px;
+}
+
+.contactImageCaption {
+    font-size: 0.9rem;
+    color: var(--primary-text);
+    text-align: center;
+}
+
+.imageContainer img {
+    border-radius: var(--border-radius-small);
+    object-fit: cover;
+}
+
+@media (min-width: 1024px) {
+    .container {
+        padding: 4rem;
+    }
+
+    .title {
+        font-size: 4rem;
+    }
+
+    .contactTileTitle {
+        font-size: 2.5rem;
+    }
+
+    .contactTiles {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 4rem;
+    }
+
+    .imageContainer {
+        height: 500px;
+        flex: 1;
+        max-width: 50%;
+    }
+
+    .contactInfo {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+
+    .contactLink {
+        font-size: 1.2rem;
+    }
+
+    .contactTileDescription {
+        font-size: 1.2rem;
+    }
+}
+
+@media (max-width: 1023px) {
+    .container {
+        padding: 1rem;
+    }
+
+    .title {
+        font-size: 4rem;
+    }
+
+    .contactTileTitle {
+        font-size: 1.5rem;
+    }
+
+    .contactLink {
+        font-size: 1.1rem;
+    }
+
+    .contactTileDescription {
+        font-size: 1.1rem;
+    }
+}
+
+.contactTile {
+    border-left: 4px solid var(--accent-orange);
+    padding-left: 1rem;
+    margin-bottom: 2rem;
+    max-width: 100%;  /* Ensure it doesn't overflow container */
+}
+
+.contactLink {
+    text-decoration: underline;
+    color: var(--accent-orange);
+    font-family: monospace;
+    word-break: break-all;  /* Break long email addresses */
+    display: inline-block;  /* Helps with overflow containment */
+}
+
+.contactTileDescription {
+    color: inherit;
+    text-decoration: none;
+    font-family: monospace; /* For that typewriter-like feel */
+}
+
+.contactSignOff {
+    color: var(--accent-orange);
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: bold;
+    font-family: monospace; /* For that typewriter-like feel */
+}
+
+.contactTile h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.5rem;
+}
+
+.contactTile address {
+    font-style: normal;
+}
+
+.title {
+    font-weight: normal;
+    text-align: left;
+    margin-bottom: 1rem;  /* Single margin rule here */
+}
+
+.contactTileTitle {
+    text-align: left;
+}
+
+.contactInfo {
+    display: flex;
+    flex-direction: column;
+    margin: auto 0;  /* This will center it vertically */
+    flex: 1;
+}

package/src/components/contact-us.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import styles from './contact-us.module.css';
+import defaultStrings from '@/strings';
+import { CONTACT_EMAIL, CONTACT_PHONE } from '@/constants/contact-info';
+import ViaViaImage from './image';
+import { IMAGES } from '@/constants/images';
+
+export default function ContactUs({ strings = defaultStrings }: { strings?: any }) {
+    return (
+        <section className={styles.contactSection}>
+            <div className={styles.container}>
+                <h3 className={styles.title}>{strings.contact.title}</h3>
+                <div className={styles.contactTiles}>
+                    <div className={styles.contactInfo}>
+                        <div className={styles.contactTile}>
+                            <h4 className={styles.contactTileTitle}>{strings.contact.writeUs}</h4>
+                            <a href={`mailto:${CONTACT_EMAIL}`} className={styles.contactLink}>
+                                {CONTACT_EMAIL}
+                            </a>
+                        </div>
+                        
+                        <div className={styles.contactTile}>
+                            <h4 className={styles.contactTileTitle}>{strings.contact.sayHi}</h4>
+                            <a href={`tel:${CONTACT_PHONE}`} className={styles.contactLink}>
+                                {CONTACT_PHONE}
+                            </a>
+                        </div>
+
+                        <div className={styles.contactTile}>
+                            <h4 className={styles.contactTileTitle}>{strings.contact.weMightSpeakYourLanguage}</h4>
+                            <p className={styles.contactTileDescription}>{strings.contact.weMightSpeakYourLanguageDescription}</p>
+                        </div>
+                    </div>
+
+                    <div className={styles.imageContainer}>
+                        <ViaViaImage 
+                            className={styles.contactImage}
+                            imageId={IMAGES.JENNA_AND_NATHAN_VIA_VIA.id} 
+                            alt={IMAGES.JENNA_AND_NATHAN_VIA_VIA.alt} 
+                            context="GALLERY"
+                        />
+                        <p className={styles.contactImageCaption}>{strings.contact.contactImageCaption}</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/src/components/email-signup.css

@@ -0,0 +1,151 @@
+/* Email signup form styles */
+.email-signup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2rem;
+    width: 100%;
+    max-width: 500px;
+    margin: 1rem auto;
+}
+
+.email-signup h3 {
+    color: var(--accent-white);
+    font-family: 'Poppins';
+    font-weight: 800;
+    font-size: 1.5rem;
+    text-align: center;
+    margin: 0;
+    text-transform: lowercase;
+}
+
+.email-signup-form {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 450px;
+}
+
+.email-signup-input {
+    flex: 1;
+    padding: 0.5rem;
+    border: 2px solid var(--accent-white);
+    border-radius: 8px;
+    background-color: transparent;
+    color: var(--accent-white);
+    font-family: 'Figtree';
+    font-size: 0.92rem;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+.email-signup-input::placeholder {
+    color: var(--accent-white-70);
+}
+
+.email-signup-input:focus {
+    border-color: var(--accent-white);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+
+.email-signup-submit {
+    padding: 0.75rem 1.5rem;
+    background-color: var(--accent-white);
+    color: var(--accent-orange);
+    border: 2px solid var(--accent-white);
+    border-radius: 8px;
+    font-family: 'Poppins';
+    font-size: 1rem;
+    font-weight: 800;
+    text-transform: lowercase;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.email-signup-submit:hover {
+    background-color: transparent;
+    color: var(--accent-white);
+}
+
+.email-signup-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.email-signup-success {
+    color: var(--accent-white);
+    font-family: 'Figtree';
+    font-size: 1rem;
+    text-align: center;
+    margin-top: 0.5rem;
+}
+
+.email-signup-error {
+    color: #ffcccb;
+    font-family: 'Figtree';
+    font-size: 1rem;
+    text-align: center;
+    margin-top: 0.5rem;
+}
+
+/* Modal-specific styles for white background */
+.email-signup-modal .email-signup h3 {
+    color: var(--accent-orange) !important;
+}
+
+.email-signup-modal .email-signup-input {
+    border: 2px solid var(--accent-orange) !important;
+    background-color: #fff !important;
+    color: var(--primary-text) !important;
+}
+
+.email-signup-modal .email-signup-input::placeholder {
+    color: var(--grey-text) !important;
+}
+
+.email-signup-modal .email-signup-input:focus {
+    border-color: var(--accent-orange) !important;
+    box-shadow: 0 0 0 2px var(--accent-orange-10) !important;
+}
+
+.email-signup-modal .email-signup-submit {
+    background-color: var(--accent-orange) !important;
+    color: var(--accent-white) !important;
+    border: 2px solid var(--accent-orange) !important;
+}
+
+.email-signup-modal .email-signup-submit:hover {
+    background-color: var(--accent-orange-70) !important;
+    color: var(--accent-white) !important;
+}
+
+.email-signup-modal .email-signup-success {
+    color: #28a745 !important;
+}
+
+.email-signup-modal .email-signup-error {
+    color: #dc3545 !important;
+}
+
+/* Mobile styles for email signup */
+@media (max-width: 768px) {
+    .email-signup {
+        max-width: 320px;
+    }
+    
+    .email-signup h3 {
+        font-size: 1.25rem;
+    }
+    
+    .email-signup-form {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    
+    .email-signup-input,
+    .email-signup-submit {
+        padding: 0.8rem;
+        font-size: 0.92rem;
+    }
+}

package/src/components/email-signup.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useEmailSubscription } from '@/hooks/useEmailSubscription';
+import './email-signup.css';
+
+interface EmailSignupProps {
+    strings: any;
+    initialEmail?: string;
+    autoSubmit?: boolean;
+    source?: string;
+}
+
+export default function EmailSignup({ strings, initialEmail = '', autoSubmit = false, source }: EmailSignupProps) {
+    const { email, setEmail, isSubmitting, submitStatus, subscribeEmail } = useEmailSubscription({
+        initialEmail,
+        autoSubmit,
+        source
+    });
+
+    const handleEmailSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!email || isSubmitting) return;
+        await subscribeEmail(email);
+    };
+
+    return (
+        <div className="email-signup">
+            <h3>{strings.footer.emailSignup.title}</h3>
+            <form className="email-signup-form" onSubmit={handleEmailSubmit}>
+                <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder={strings.footer.emailSignup.placeholder}
+                    className="email-signup-input"
+                    required
+                />
+                <button
+                    type="submit"
+                    disabled={isSubmitting || !email}
+                    className="email-signup-submit"
+                >
+                    {isSubmitting ? '...' : strings.footer.emailSignup.submit}
+                </button>
+            </form>
+            {submitStatus === 'success' && (
+                <div className="email-signup-success">
+                    {strings.footer.emailSignup.success}
+                </div>
+            )}
+            {submitStatus === 'error' && (
+                <div className="email-signup-error">
+                    {strings.footer.emailSignup.error}
+                </div>
+            )}
+            {submitStatus === 'duplicate' && (
+                <div className="email-signup-success">
+                    {strings.footer.emailSignup.duplicate}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/faq-wrapper.module.css

@@ -0,0 +1,47 @@
+.faqWrapper {
+    padding-top: var(--spacing-large);
+    padding-bottom: var(--spacing-large);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.faqWrapperRow {
+    display: flex;
+    padding-bottom: var(--spacing-medium);
+    box-sizing: border-box;
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .faqWrapper {
+        width: 70%;
+    }
+
+    .faqWrapperRow {
+        flex-direction: row;
+    }
+    
+    .faqWrapperTitle {
+        width: 30%;
+    }
+    
+    .faqSection {
+        width: 70%;
+        box-sizing: border-box;
+    }
+}
+
+@media (max-width: 1023px) {
+    .faqWrapper {
+        width: 100%;
+    }
+
+    .faqWrapperRow {
+        flex-direction: column;
+    }
+}
+

package/src/components/faq-wrapper.tsx

@@ -0,0 +1,15 @@
+import styles from "./faq-wrapper.module.css";
+import FAQSection from "@/app/faq/faq-section";
+import { faqSection } from "@/constants/faq";
+
+export default function FAQWrapper({faqSection, strings}: {faqSection: faqSection, strings: any}) {
+    return (
+        <div className={styles.faqWrapper}>
+            <div className={styles.faqWrapperRow}>
+                <h2 className={styles.faqWrapperTitle}>{strings.productThemePages.faqSection.title}</h2>
+                <FAQSection className={styles.faqSection} faqSection={faqSection} selectionMode="single" />
+            </div>
+            <a href="/faq" className={styles.faqWrapperLink}>{strings.common.seeMore} →</a>
+        </div>
+    )
+}

package/src/components/footer.css

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