Landing Page Overview

Purpose

The MaxShipping Info landing page is the public-facing marketing and information site for Max Shipping. It explains the service, shows pricing, lists office locations, allows new customer sign-up with email verification, and provides a package tracking chatbot.

File: maxshippinginfo_12_10_2025.html URL: https://maxshipping.info/

Technology Stack

Page Sections

1. Header / Navigation (Sticky)

• Max Shipping logo (WebP with JPG fallback)
• Desktop nav: How It Works, Pricing, Offices, Sign Up, Track my Package
• Language switcher: English (EN/GB/CA flags) / Espanol (HN flag)
• Mobile hamburger menu with slide-out drawer

2. Hero Section (#home)

• Full-width gradient banner (navy to red)
• Headline: “Reliable Shipping to Honduras”
• Service description: Amazon packages, vehicles, freight — Florida to Roatan
• “Get Started” CTA button linking to #signup

3. How It Works (#timeline)

6-step alternating left-right timeline:

Includes a combined logo + sign-up card above the timeline steps.

4. Pricing Section (#pricing)

Base rate: $17.50 per cubic foot

What’s Included:

• Receiving, photographing, storing at Florida warehouse
• Professional packing for ocean transport
• Weekly shipping every Friday Florida to Roatan
• 15% customs/duty fee (added to shipping cost)
• Optional consolidation: $1.50/package

Example calculation: 2 XL boxes ($215.68) + 15% customs ($32.35) = $248.03

5. Offices Section (#offices)

6. Sign Up Section (#signup)

Navy background with glassmorphism form card. See “Sign-Up Flow” section below.

7. Footer

Max Shipping logo, legal text, copyright 2025.

8. n8n Chat Widget (Floating)

• Sky-blue button with pulsing red glow
• “Track your package here” tooltip (bilingual)
• Flying package animation toward chat button with sparkle impact
• Webhook: max.lifeonroatan.net/webhook/.../chat
• “Track My Package” nav link opens chatbot instead of scrolling

Sign-Up Flow

Form Fields

Registration Process

1. Validate all fields client-side
2. Check emailAddress uniqueness in Firestore Clients collection
3. Check lastName uniqueness — if duplicate found, show dialog offering to cancel or send a report
4. If report requested: POST to reportDuplicateLastName Cloud Function (emails admin at jazelle.osp34@gmail.com)
5. Call sendVerificationEmail Cloud Function — generates 6-digit code, emails it to customer
6. Start 60-second resend cooldown timer
7. On submit: re-validate, check verification code (10-minute expiry)
8. Generate next client ID (2000-9999 range, skipping used IDs)
9. Determine location prefix: U (Utila), G (Guanaja), BA (Barbareta), empty (Roatan), etc.
10. Save new client to Firestore Clients collection with creationSource: "Max Shipping Website"
11. POST to Make.com webhook — creates Square CRM customer record
12. Update Firestore doc with returned Square customer ID
13. Show success alert with new client ID

Bilingual System (English / Spanish)

• All translatable elements use data-en and data-es attributes
• switchLanguage(lang) function updates all element innerHTML/textContent/placeholder/value
• Chatbot re-initialized in the selected language (destroyed and recreated)
• Initial language auto-detected from navigator.language — Spanish if es-*, otherwise English
• Form validation strings stored in a translations JavaScript object

External Integrations

Navigation

All navigation is anchor-based in-page scrolling (scroll-behavior: smooth). No client-side routing library. The “Track My Package” nav link programmatically clicks the n8n chat toggle button rather than scrolling.