# Concordia Build Guide — how to make a page that looks like ours

Pair this with [[CONCORDIA-DESIGN-SYSTEM]] (the visual language). This file is the how-to: structure, section patterns, images, and deploy. Written so Claude can go from a rough itinerary or brief to a finished, good-looking, live page.

---

## The workflow (follow in order)
1. **Load the design system first.** Paste `CONCORDIA-DESIGN-SYSTEM.md` in and copy `BTB/Concordia Brand/brand.css` + `fonts/` + `logo/` into the site. Do not start styling from scratch. (v4, 21 Oct 2026: green #072414 / cream / gold #AF7B3A, Times Now + Pinyon + Optima. The old Fraunces/Inter/black system is retired.)
2. **Gather the real content** (dates, crew, venues, times). Get it correct before styling. A pretty page with wrong info is useless.
3. **Gather real images** before writing HTML. List what each section needs, pull the ones we have from an existing Concordia repo, source the rest from Unsplash by the specific place name, compress with `sips -Z 1600`.
4. **Build one HTML file**, section by section, using the component patterns below.
5. **Check mobile first, then wide.** Drag the browser narrow-to-wide, it must reflow with no black bars and nothing misaligned.
6. **Deploy to Vercel** (below), verify it is live, then report the link.

## Page structure (welcome-pack / itinerary pattern)
A strong pack, in order:
1. **Hero** — full-screen image, brand top-left, big serif title, dates (show both "no yacht" and "with yacht" ranges if relevant), a fact bar (hotel / venue / key detail).
2. **A note from Callum** — short personal note, one image, signed "Callum Hughes, Founder, Concordia."
3. **Flights / arrival + departure** — a prominent callout block. Arrival: get there as early as possible. Departure: latest flight out; if a yacht is involved, spell out the hard "no flight before Xpm" rule.
4. **The crew** — grid of members: name, role, tappable Instagram pill, tier tag (Host / Elite / Team).
5. **Your base (hotel)** — real photos, stat chips (nights, breakfast, pool, restaurant). No star rating unless confirmed.
6. **The tournament / main activity** — real photo, the format, a schedule table, stat chips.
7. **The itinerary** — one day card per day: date, cover image, time-rail schedule with venue names + website links.
8. **The yacht / add-on** (if any) — image, who is on it, board/dock times, the flight rule.
9. **What's included / not included** — two clean lists. Be precise about what is and is not covered (kitty, flights, transfers, content).
10. **Dress code + what to pack** — compact.
11. **Logistics** — hotel address, airport, transfers, checkout, insurance, support contact.
12. **House rules** — short numbered list.
13. **Contact / sign-off** — Callum + team details, Instagram.

## Section pattern (repeat this shape)
```html
<section>
  <div class="eyebrow">Section Label</div>
  <h2 class="title serif">Headline with one <em style="color:var(--gold)">gold word</em>.</h2>
  <p class="lead">One or two tight sentences. No fluff.</p>
  <!-- then a grid / cards / image, all left-aligned to the same column -->
</section>
```

## Day card pattern (itinerary)
```html
<div class="card" style="margin-bottom:18px">
  <div style="padding:16px 18px">
    <div class="eyebrow">Thu 30 July</div>
    <h3 class="serif" style="font-size:22px">Arrival Day. <em style="color:var(--gold)">Get here early.</em></h3>
  </div>
  <img src="img/day.jpg" style="height:190px;object-fit:cover" alt="...">
  <div style="padding:6px 18px 16px">
    <div style="display:grid;grid-template-columns:74px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line)">
      <div style="color:var(--gold);font-weight:600;font-size:12px">5:00pm</div>
      <div><b style="font-size:14.5px">Tennis session</b><span style="display:block;color:var(--muted);font-size:13px">Ten Twenty Club, Voula</span></div>
    </div>
    <!-- repeat time rows -->
  </div>
</div>
```

## Instagram pill (make links obviously tappable)
```html
<a class="ig" href="https://instagram.com/HANDLE" target="_blank">@HANDLE</a>
```
```css
.ig{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gold);
    border:1px solid rgba(201,168,106,.45);border-radius:20px;padding:4px 11px 4px 8px}
.ig::before{content:"";width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'/%3E%3C/svg%3E") center/contain no-repeat}
```

## Images
- Folder: `img/` next to `index.html`. Reference as `img/name.jpg`.
- Pull existing Concordia photos from a prior repo (e.g. the Athens itinerary has yacht, clay court, Acropolis, Ace hotel shots).
- Source missing ones from Unsplash (keys in `BTB TRIPS CLAUDE/.env`), search the exact place. Note `.avif` files exist too, convert with `sips -s format jpeg in.avif --out out.jpg`.
- Compress: `for f in img/*.jpg; do sips -Z 1600 "$f"; done`. Keep the page under a few MB, `loading="lazy"` on all non-hero images.
- Every image: `object-fit:cover` in a fixed-height/ratio container.

## Deploy (static HTML to Vercel)
From the folder that contains `index.html` + `img/`:
```bash
npx --yes vercel@54 --prod --yes --scope callum-hughes-projects --name concordia-<slug>
```
Then verify it is live: `curl -s -o /dev/null -w "%{http_code}" https://concordia-<slug>.vercel.app` and spot-check an image URL returns 200.

## Final checklist before sending Cal a link
- [ ] Info correct (dates, times, names, venues, links) — checked against the source
- [ ] Zero "BTB" / "Burn The Boats" / "old money" / em dashes
- [ ] Fills the screen at every width, no black bars, nothing misaligned
- [ ] Every section: eyebrow + Times Now title + one gold word; exactly one Pinyon phrase on the page; Optima body
- [ ] brand.css loaded, no leftover #0f0e0c / #c9a86a / Fraunces / Inter
- [ ] Official lockup (crest + script Concordia + Members' Club) top-left and in the footer
- [ ] Served from <name>.theconcordiaclub.com, not a vercel.app URL
- [ ] Real photos, compressed, `object-fit:cover`, hero looks great
- [ ] Instagram / key links are obvious tappable pills
- [ ] Reads cleanly on a phone (most people view on mobile)

Related: [[CONCORDIA-DESIGN-SYSTEM]], [[btb-trip-builder-workflow]].