Build a web app for Trippr — an AI-powered travel concierge you message on WhatsApp. The app has two parts: a landing page and an interactive chat demo.
Landing Page
Dark theme (near-black background), green accents (#10B981 or similar). Clean and minimal.
- Nav: Trippr logo (✈️ icon + "trippr"), links for "How it works", "Pricing", "About", and a "Try the Demo" button that navigates to the chat view.
- Hero section: "AI-Powered Travel Concierge" badge, big headline — "Trips, no friction." (the "no friction" in italic green). Subtext: "Stop the 47-tab nightmare. Message Trippr on WhatsApp to book flights, hotels, and experiences optimized for your points and perks." Two buttons: "Start Your First Trip →" (green filled) and "Available on WhatsApp" (outlined). On the right side, show a beach/travel hero image with a small floating WhatsApp chat preview overlaid on it showing a sample exchange about booking Lisbon in business class using points.
- Features section: Heading: "The end of tab chaos." with subtext: "We've automated the complex math of travel loyalty so you don't have to." Three cards in a row: (1) Points Optimization — scans your Amex, Chase, and airline balances for best redemption value, (2) Global Concierge — flights, hotels, and local experiences via a simple text, (3) Preference Learning — learns your style (window seats, boutique hotels, morning flights) and applies it automatically.
- Simple footer with logo and copyright.
Chat Demo
A full-screen WhatsApp-style chat interface that users reach via "Try the Demo."
- WhatsApp-accurate styling: Dark header with back arrow, "Trippr AI" name, green "ONLINE" status, settings and menu icons. WhatsApp doodle-pattern background. Proper message bubbles (white/light gray for incoming, green-tinted for outgoing). Timestamps and read receipts.
- Initial state: One welcome message from Trippr: "Hello! I'm your Trippr travel concierge. I've already loaded your Amex (145k) and Marriott (210k) balances. Where are we heading next? Just text me like a friend."
- Quick-reply chips above the input: "Book Flight", "Points Balance", "Lisbon Weekend" — tapping one sends it as a message.
- Text input with send button at the bottom.
When the user sends a message (either by typing or tapping a chip), the bot should respond with realistic, contextual replies. Simulate AI responses — show a typing indicator for 1-2 seconds, then display a response that references the user's points balances and preferences. If someone asks to book a trip, the bot should return a rich itinerary card embedded in the chat with flight details (airline, route, times, points cost with crossed-out cash price), hotel details (name, neighborhood, points cost), and a "Confirm & Book" button. Make the data realistic — real airline codes, real Lisbon neighborhoods, math that makes sense.
The bot should feel smart: it should reference card perks ("your Amex Gold gets 3x on this"), show savings vs. cash, and mention preference learning ("I'll remember that for next time").