# FlyingInBusiness.com — Prototype Brief

A clickable HTML/CSS prototype for **flyinginbusiness.com**, a business & first class flight booking site modeled on SkyLuxTravel, Business-Class.com, and TravelBusinessClass.com.

This is round one: a working static prototype you can open in any browser, click around, and hand to a developer to turn into the real production site.

## What's in this folder

```
/Travel business/
├── index.html                 ← main landing page
├── search-results.html        ← search results + lead-capture form
├── pages/
│   ├── europe.html            ← ad landing: "Business Class to Europe"
│   └── nyc-london.html        ← ad landing: "NYC → London Business Class"
├── crm/
│   └── dashboard.html         ← internal CRM dashboard mockup
├── assets/
│   ├── styles.css             ← shared brand stylesheet
│   └── logo.svg               ← gold paper-plane mark on navy disc
└── BRIEF.md                   ← this document
```

To preview: open `index.html` in any browser. All pages are linked.

## Brand system

**Name & domain.** Flying*in*Business · flyinginbusiness.com  
**Logo.** Gold paper-plane silhouette on a navy disc + wordmark "Flying*in*Business" (the "in" set in italic gold for premium contrast).  
**Palette.** Deep navy (#0A1F44) primary, champagne gold (#C5A572) accent, cream (#FAF7F2) light surface. Classic premium-travel feel — directly comparable to SkyLux's brand language.  
**Typography.** Manrope across everything — a single clean geometric sans for headlines, numerals, and body. Heavy weights (700/800) with tight letter-spacing on display sizes for a business-software feel (think Stripe, Linear, Notion). No serif decoration anywhere.

Brand tokens live in `assets/styles.css` as CSS variables, so the whole prototype rebrands with a few line changes.

## How the user flow works

1. **Landing page (`index.html`)** — hero with full search form (route, dates, pax, cabin), real-customer fare cards pulled from competitor research, region tiles with from-prices, trust signals, FAQ.
2. **Search submitted →** redirects to `search-results.html?from=...&to=...&dep=...&ret=...&pax=...&cabin=...` (GET form, so all data flows via query string).
3. **Search results page** — shows 7 sample airline options for the requested route, side-by-side with a sticky **request-quote form**. The form is the actual lead capture — the prices are intentionally indicative (no live booking) because the business model is agent-callback, not self-serve booking.
4. **Lead form submit →** "Thanks" modal. In production this submits to your CRM (see below).
5. **Ad landing pages (`pages/europe.html`, `pages/nyc-london.html`)** — each has its own focused hero, pricing grid, and embedded lead form. Designed to be served from paid campaigns (Google Ads, Meta, etc.) with `?utm_campaign=X` parameters that get captured into the lead record for attribution.

## Pricing — where the numbers came from

All "from $X" prices in the prototype are sourced from **competitor research** done at build time:

| Region | Starting price | Source |
|---|---|---|
| Europe | $1,174 | TravelBusinessClass.com (Iceland) |
| Middle East | $1,271 | TravelBusinessClass.com |
| Asia | $1,639 | TravelBusinessClass.com |
| Africa | $1,676 | TravelBusinessClass.com |
| Indian Subcontinent | $1,593 | TravelBusinessClass.com |
| Oceania | $1,991 | TravelBusinessClass.com |
| Latin America | $1,420 | Estimated from peer data |

Specific route fares (JFK-LHR $2,625, ORD-FCO $3,530, SFO-FRA $3,870, LAX-HND $4,571, SFO-SIN $4,548, MIA-DXB $3,512, IAD-CAI $2,737) are real recent booking samples from TravelBusinessClass.com.

**Important:** these prices should be **swapped for your own actual fares** before going live. The agency model is built on the premise that you have private fare access — your "from" numbers will be your differentiation.

## How leads flow into the CRM

The user picked **email + Google Sheet** for the first version (the cheapest, fastest way to capture leads with zero hosting required). Here's the recommended setup:

```
[Web forms across all pages]
            ↓
   [Formspree.io endpoint]  ← single endpoint, all forms POST here
            ↓
            ├──→ Email notification to sales@flyinginbusiness.com
            ├──→ Webhook → Google Apps Script → append row in Google Sheet
            └──→ (optional) Webhook → Slack #leads channel
```

**Setup steps (under an hour, no coding):**

1. **Create a Formspree form** at formspree.io — get an endpoint like `https://formspree.io/f/abc123`.
2. **Edit each HTML form's `action` attribute** to point to that endpoint (or replace the `submitLead` / `submitLP` JS functions with a `fetch()` POST to Formspree).
3. **Create a Google Sheet** with columns: `timestamp, source, from, to, dep, ret, pax, cabin, name, email, phone, when, flex, notes, campaign`.
4. **Add a Google Apps Script** (10 lines) that receives Formspree's webhook and appends a row. (Formspree's docs walk through this.)
5. Each lead arrives in your inbox AND your sheet, sorted by source so you can see which landing page produces them.

**Hidden fields already wired into every form:**
- `source` — which page produced the lead (`home`, `lp-europe`, `lp-nyc-lhr`, etc.)
- `campaign` — captured from `?utm_campaign=` for paid-ad attribution
- `route`, `from`, `to`, `dep`, `ret`, `pax`, `cabin` — the trip details

## The CRM dashboard

`crm/dashboard.html` is a **mockup** of what your agents will see — a Kanban-style pipeline (New → Contacted → Quoted → Booked), stats at the top, sidebar by source.

In production this becomes either:
- **Phase 1 (cheap, immediate):** the Google Sheet IS your CRM. Filter by status column. Agents update rows manually. Good for up to ~50 leads/day.
- **Phase 2 (when you outgrow the sheet):** swap in Pipedrive, HubSpot Free, or Notion. The Formspree webhook can post directly into any of them.
- **Phase 3 (full custom):** rebuild this mockup as a real React/Next.js dashboard backed by Postgres or Supabase. Estimated 2–3 weeks of developer time.

I'd recommend phase 1 until you're seeing 20+ leads/day consistently — don't overbuild before you have volume.

## Adding more ad landing pages

The two examples (`europe.html`, `nyc-london.html`) show the two patterns you'll repeat:
- **Region pages** — "Business Class to [Asia / Middle East / Africa / etc.]" — destination grid with from-prices.
- **Route pages** — "[City A] → [City B] Business Class" — airline comparison cards.

To add more: copy one of the existing files, swap the hero image, headline, price data, and the `source` hidden field. Each new page takes ~20 minutes to clone.

## What's NOT in this prototype (intentionally)

- **No live booking engine.** Your business is agent-callback, so the prototype matches: people request a quote, you call back. No payment integration, no GDS connection.
- **No authentication on the CRM mockup.** In production you'd add a simple login (Auth0, Clerk, or even basic auth).
- **No analytics.** Add Google Analytics 4 + Meta Pixel before paid traffic. Conversion event = lead form submitted.
- **No backend.** Everything is static HTML + JS. Production hosting can be Cloudflare Pages, Netlify, or Vercel — all free for this scale.

## Recommended next steps (in priority order)

1. **Look at the prototype** and tell me what to change — colors, copy, layout, any missing pages or sections.
2. **Decide on the phone number** — the prototype uses `+1 (855) 555-0199` as a placeholder. Get a real toll-free or local number.
3. **Set up Formspree + Google Sheet** (~1 hour, instructions above) so the lead flow actually works end to end.
4. **Get a developer to deploy.** Drop the files into Cloudflare Pages or Netlify (free, takes 15 minutes), point flyinginbusiness.com at it.
5. **Source your real pricing** — replace the indicative competitor-derived prices with your own private fares.
6. **Build out 5–10 more landing pages** for the routes/regions you'll advertise on Google.
7. **Add analytics + Meta Pixel** before driving paid traffic.

## Questions to answer before going live

- What is your real toll-free / sales phone number?
- What email should leads go to? (`sales@`, `leads@`, etc.)
- Are you running this as a US-market business, or also targeting UK/EU? (Prototype is US-focused based on the three competitor sites you referenced. Easy to swap currency/phone if needed.)
- Are you an ARC/IATA-accredited agency yourself, or operating under a host agency? (Trust badges in the prototype assume yes — adjust if not.)
- Do you want to add a live-chat widget (Intercom, Crisp) on the landing pages? Often lifts lead capture 20–30% in this category.

---

Built with research on SkyLuxTravel.com, Business-Class.com, and TravelBusinessClass.com.

Sources:
- [TravelBusinessClass.com — homepage with real fare data](https://travelbusinessclass.com/)
- [TravelBusinessClass.com — Europe deals](https://travelbusinessclass.com/best-deals/region/europe)
- [SkyLuxTravel.com — homepage](https://www.skyluxtravel.com/)
- [BusinessClass.com — flights page](https://www.businessclass.com/en-us/flights/business-class)