# Rite of Passage: Threshold Photography — layout directions

Three mobile-first redesigns of Carolee Beckham's one-page sales page ("Rite of Passage: Threshold Photography"), built alongside the untouched Pixieset export they're based on.

## What's here

| Path | What it is |
| --- | --- |
| `index.html` | Hub page linking the original and the three directions |
| `original/` | The complete Pixieset offline export, unmodified (index.html, 5 CSS files, 57 font files, 19 images; 82 files, ~20 MB) |
| `designs/direction-1/` | **Ivory Editorial**: the brand's white/ivory palette as a calm magazine layout, with a swipeable photo strip and a sticky "Work with Me" dock on phones |
| `designs/direction-2/` | **Night Ritual**: dark and cinematic with gold accents, a three-step ritual timeline, and edge-to-edge justified photo rows |
| `designs/direction-3/` | **Studio Gallery**: stone and terracotta, a sticky booking bar with section jump links, a sticky text column beside the gallery, a pricing card, and a tap-to-enlarge photo wall |
| `designs/shared/` | `fonts.css` (Lora + Montserrat, loaded from `original/assets/fonts`) and resized 800px and 1400px copies of the 19 photos |
| `COPY-REVIEW.md` | Conversion-focused copy and messaging suggestions (original line, suggested line, and why) |

## Ground rules the layouts follow

- **Copy is verbatim.** Every heading, paragraph, bullet, testimonial, price, and button label from the original is present, unchanged and in the original order. Suggested rewrites live only in `COPY-REVIEW.md`.
- **All 19 photos, uncropped.** Each image is shown at its native aspect ratio (no `object-fit: cover` cropping), in the original sequence. The two photos the original used as faded section backgrounds (Investment and Testimonials) are shown as full photos instead.
- **Same assets.** The fonts are the original files. The full-resolution originals are the largest `srcset` source, and the resized copies in `designs/shared/img` are the same photos downscaled so phones don't download 2500px images.
- **Mobile first.** Base styles target about 390px phones, and larger layouts are added with `min-width` media queries. The email and phone number are tappable links.
- Small additions that don't change copy: descriptive image alt text, a meta description reusing the hero sub-headline, and duplicate booking buttons (sticky dock, floating button, sticky bar) that reuse the existing "Work with Me" label and Calendly link.

## Run locally

It's all static HTML and CSS, so any static file server works:

```bash
python3 -m http.server 47219
# open http://localhost:47219/
```

Serve the repo root rather than a subfolder, because the designs load fonts and full-resolution images from `../../original/assets/`. Opening the files directly with `file://` also works in most browsers.

## Deploying a preview

The repo root can be deployed unchanged to any static host (Cloudflare Pages, Netlify, GitHub Pages, Vercel). Each direction will then be at `/designs/direction-N/`.