# Propeller Pitch Deck SOP

## Overview
Single-file HTML/CSS/JS pitch deck websites for nonprofit partnership proposals. Each follows the same template structure with org-specific branding. ~2,500 lines, zero build step — all CSS and JS inline, only external dependency is Google Fonts.

## Base Template
`/Users/brandonderoche/Desktop/support-feed-propeller-pitch.html`

## File Naming Convention
- Working file: `/Users/brandonderoche/Desktop/[org-slug]-propeller-pitch.html`
- Deploy folder: `/Users/brandonderoche/Desktop/[org-slug]-pitch-deploy/`
- Deploy file: `/Users/brandonderoche/Desktop/[org-slug]-pitch-deploy/index.html`
- IMPORTANT: Also copy `nk-invenue-screen.jpg` into deploy folder (local image ref on line ~1744)

## Page Structure (line numbers approximate)
1. **Stats banner** — fixed top bar with org name
2. **Hero grid** (~line 1266-1327) — 6 cols × 6 imgs parallax photo grid
3. **Hero sticky text** (~line 1333-1347) — "A Turnkey Fundraising..." with org name spans
4. **Overview cards** (~line 1350-1389) — logo card + 4 how-it-works cards
5. **Photo break 1** (~line 1391-1395) — 2 images side by side
6. **Section 01 Monthly Donors** (~line 1397-1644) — dark section with dashboard mockup
   - Dashboard mockup (~line 1427-1570): logo, profile, impact stats, recommended card, 6 action cards
7. **Section 02 Flyaway Sweepstakes** (~line 1646-1702) — custom-built iPhone mockup with org-specific artist flyaway (NOT an iframe)
8. **HRC Quote** (~line 1704-1752) — word-reveal testimonial (generic Propeller)
9. **Section 03 In-Venue** (~line 1721-1752) — uses local `nk-invenue-screen.jpg`
10. **Aly & AJ Quote** (~line 1754-1798) — word-reveal testimonial (generic Propeller)
11. **Section 04 Goal** (~line 1770-1798) — mission statement section
12. **Photo break 2** (~line 1800-1804) — 2 images side by side
13. **Section 05 Case Studies** (~line 1806-1882) — Propeller case study cards (generic)
14. **Section 06 Fee Breakdown** (~line 1884-1936) — fee structure with org abbreviation
15. **Artboard Gallery** (~line 1938-2040) — partner logos & screenshots
16. **Next Steps CTA** (~line 2042-2094) — call to action
17. **Footer** (~line 2096-2107) — org logo + Propeller logo
18. **JavaScript** (~line 2109-2524) — all scroll/animation logic

## Completed Pitches
| Org | Slug | Artist/Celebrity | Status |
|-----|------|------------------|--------|
| Support + Feed | support-feed | N/A (base template) | Complete |
| Fund 4 Good | f4g | Olivia Rodrigo | Complete |
| Born This Way Foundation | btw | Lady Gaga | Complete |
| Feel Your Way Through | fywt | Kelsea Ballerini | Complete |
| Ram Dass Love Serve Remember | ramdass | Ram Dass | Complete |
| The Big Bro Foundation | kidcudi | Kid Cudi | Complete |

## Step-by-Step Process

### Phase 1: Research
1. Visit org's main website — scrape mission, programs, key info
2. Visit related sites: artist merch store (Shopify CDN), sub-orgs, partner sites
3. Gather **40+ unique image URLs** for hero grid (36) + action cards (6) + photo breaks (4) + dashboard (2)
4. Identify **brand colors** (primary, dim/dark, and soft/light variant)
5. Choose a **heading font** that matches org's vibe
6. Collect **logo URLs** (need: overview card version, dashboard/dark bg version, footer version)
7. Note mission statement, key programs, 6 action items fans can take

### Phase 2: File Setup
```bash
cp /Users/brandonderoche/Desktop/support-feed-propeller-pitch.html /Users/brandonderoche/Desktop/[slug]-propeller-pitch.html
mkdir -p /Users/brandonderoche/Desktop/[slug]-pitch-deploy
```

### Phase 3: Title & Fonts
- Update `<title>` to `[Org Name] × Propeller — Fundraising Partnership Proposal`
- Add org-specific Google Font to the `<link>` tag (append `&family=FontName:wght@400;500;600;700;800`)
- Update `--font-heading` CSS variable to new font + appropriate fallback stack

### Phase 4: CSS Variables (`:root` ~line 20)
Update these three — they cascade through the entire page:
```css
--sf-green: #[PRIMARY];       /* buttons, accents, highlights */
--sf-green-dim: #[DARKER];    /* gradients, secondary accents */
--sf-green-soft: #[VERY LIGHT]; /* light background tints */
```

### Phase 5: Global Color Replacements (replace_all, in order)
1. `#00FF29` → new primary hex
2. `rgba(0,255,41,` → new primary rgba (no space variant)
3. `rgba(0, 255, 41,` → new primary rgba (spaced variant)
4. `#00cc21` → new dim hex (catches gradient endpoints)
5. Verify: grep for any remaining `00FF29` or `00cc21`

### Phase 6: Inline Font Replacements (replace_all)
- `'Space Grotesk', sans-serif` → `'[New Font]', [fallback]`

### Phase 7: Text Replacements (replace_all, in order)
1. `Support + Feed` → `[Full Org Name]`
2. `S+F` → `[Abbreviation]` (catches comments, alt text, fee section)
3. Fix hero `<span class="hw hw-green">` elements for org name words
4. Fix recommended card text: "Become a [Org] Sustainer & [Mission CTA]"
5. Fix 6 action card titles with mission-aligned actions

### Phase 8: Logo Replacements (4 locations)
| Location | Line Area | Notes |
|----------|-----------|-------|
| Overview card | ~1366 | Org logo, normal display |
| Dashboard logo | ~1461 | On black bg — may need `filter: brightness(0) invert(1); opacity: 0.9;` if logo isn't already white |
| Footer logo | ~2102 | On dark bg — may need invert filter |
| Dashboard profile | ~1465 | Circular avatar image |

**Logo filter rule**: If logo file has white text (check filename), no filter needed. If logo is dark/colored, add `filter: brightness(0) invert(1); opacity: 0.9;` for dark backgrounds.

### Phase 9: Hero Grid Images (36 slots, ~line 1270-1327)
- 6 columns × 6 images each
- Each column is `.hero-grid-col` with `data-speed` for parallax
- Some images have `class="wide"` for spanning effect
- Use diverse mix: press photos, merch, album art, event photos, programs, community
- Optimal image width: 800-1200px (Shopify CDN: `&width=1080`)
- BubbleUp CDN: replace `width640/quality35` with `width1920/quality80`

### Phase 10: Dashboard Mockup (~line 1457-1567)
- **Recommended card** (~1498-1509): title text + background image
- **6 Action cards** in 2 rows of 3 (~1514-1566):
  - Each card: `<img>` (34px tall) + title text + points + "Take Action" button
  - Actions should be mission-aligned: sign petition, volunteer, share content, donate, refer friend, enroll in program
- All card images should be ~400-600px wide

### Phase 11: Photo Breaks (2 locations)
- **Photo break 1** (~line 1391-1395): 2 images between Overview and Section 01
- **Photo break 2** (~line 1800-1804): 2 images between Goal section and Case Studies
- Use high-impact, wide community/event photos
- CSS default is `object-position: center center` — for portrait images, add inline `style="object-position: center 25%;"` to show faces/upper portion

### Phase 11b: Flyaway Mockup Customization
- The flyaway section contains a **custom iPhone mockup** (NOT an iframe) — must be rebuilt per org
- Replace artist photo, artist name, destination, tour/venue details, prize details
- Replace nonprofit logo and "Benefiting [Org]" text
- Use "meet" (not "see") for artist flyaway titles: "Win a trip to [City] to meet [Artist]"
- **Do NOT include a caption below the iPhone mockup** — no "Example:" or "Mockup:" text

### Phase 12: Verification
```bash
# Must return 0 results:
grep -i -c "support + feed\|supportandfeed\|support+feed" [file].html
# Check for remaining S+F-specific copy:
grep -i "plant-based\|food justice\|cooking demo\|maggie\|billie\|finneas" [file].html
```

### Phase 13: Deploy
```bash
cp /Users/brandonderoche/Desktop/[slug]-propeller-pitch.html /Users/brandonderoche/Desktop/[slug]-pitch-deploy/index.html
cp /Users/brandonderoche/Desktop/nk-invenue-screen.jpg /Users/brandonderoche/Desktop/[slug]-pitch-deploy/
```
For shareable links: drag deploy folder to [app.netlify.com/drop](https://app.netlify.com/drop)

## Brand Reference

### Support + Feed (BASE TEMPLATE)
- Primary: `#00FF29` | Dim: `#00cc21` | Soft: `#e6ffe6`
- Font: `Space Grotesk`
- Gradient: `linear-gradient(135deg, #00FF29, #00cc21)`

### Fund 4 Good (Olivia Rodrigo)
- Primary: `#dbd7fc` | Dim: `#b8b0f7` | Soft: `#f0eeff`
- Font: `DM Serif Display`
- Special: Notebook-paper card aesthetic with tape strips, ruled lines, slight rotations

### Born This Way Foundation (Lady Gaga)
- Primary: `#23c8d2` | Dim: `#1aa8b0` | Soft: `#e0f7f9`
- Font: `Poppins`
- Gradient: `linear-gradient(135deg, #23c8d2, #7d78ff)`

### Feel Your Way Through (Kelsea Ballerini)
- Primary: `#D4889C` | Dim: `#B8708A` | Soft: `#faf0f3`
- Font: `Playfair Display`
- Gradient: `linear-gradient(135deg, #D4889C, #C9A0DC)` (rose to lavender)
- Logo: CFMT FYWT logo from cfmt.org
- Images: BubbleUp CDN (width1920/quality80) + store.kelseaballerini.com

### Ram Dass Love Serve Remember Foundation
- Primary: `#0280b3` | Dim: `#01374d` | Soft: `#e8f4f8`
- Font: `Cormorant Garamond` (spiritual, elegant serif)
- Gradient: `linear-gradient(135deg, #0280b3, #01374d)` (blue to deep teal)
- Logo: White text version from shop.ramdass.org Shopify CDN (no invert needed)
- Images: shop.ramdass.org (books, prayer flags, art, apparel, meditation photos)

### The Big Bro Foundation (Kid Cudi)
- Primary: `#e43d32` | Dim: `#173a76` | Soft: `#fef2f1`
- Font: `Bebas Neue` (bold display, streetwear/hip-hop)
- Gradient: `linear-gradient(135deg, #e43d32, #173a76)` (red to navy)
- Logo: framerusercontent.com (Framer-hosted site — needs invert for dark bg)
- Images: shop.kidcudi.com Shopify CDN (merch, album art, action figures) + consequence.net press photos + framerusercontent.com foundation images

## Image Sourcing Strategy
| Source Type | How to Get Images | Notes |
|-------------|-------------------|-------|
| Shopify stores | `shop.[domain].com/cdn/shop/...&width=1080` | Best source. Append `&width=` for sizing |
| BubbleUp CDN | Replace `width640/quality35` with `width1920/quality80` | Used by artist sites |
| WordPress sites | `/wp-content/uploads/...` URLs | Direct links work |
| Framer sites | `framerusercontent.com/images/...?width=X&height=Y` | Append dimensions |
| Instagram | **DOES NOT WORK** — JavaScript rendering blocks scraping | |
| Getty/stock | **DO NOT USE** — licensed, not embeddable | |

## Sections That Stay Generic (don't change per org)
- Partner thumbnail logos (HRC, Sierra Club, etc.) — these showcase Propeller's existing partners
- HRC/Dane testimonial quote — generic Propeller social proof
- Aly & AJ testimonial quote — generic Propeller social proof
- Case study cards — generic Propeller examples
- In-venue IMAG screen — always shows Noah Kahan example (`nk-invenue-screen.jpg`)
- Stats block ("50,000+ Monthly Members Activated" / "MILLIONS In Recurring Revenue")

## Sections That ARE Org-Specific
- **Flyaway iPhone mockup** — each org gets a custom-built iPhone mockup with an org-relevant artist/experience (NOT a generic iframe). S+F = Hayley Williams, F4G = Olivia Rodrigo. Title uses "meet" (not "see") for artist flyaways.
- **Photo breaks** — 2 sets of dual images, sourced from the org's site
- **Dashboard mockup** — org-branded member dashboard with org-specific actions
- **Always-on panel text** — standardized: "The program runs 24/7 - no reliance on seasonal campaigns, no lapsed donors. Propeller helps generate a sustainable revenue engine that compounds month after month."

## Key Technical Notes
- CSS variables (`--sf-green`, `--sf-green-dim`, `--sf-green-soft`) are single source of truth for brand colors
- `--font-heading` variable controls all heading typography
- `filter: brightness(0) invert(1)` turns any dark logo white for dark backgrounds
- IntersectionObserver handles viewport-based fade-in animations
- Scroll progress percentages drive sequential card drop-in animations
- The `nk-invenue-screen.jpg` is the ONLY local file dependency — everything else is remote URLs
- **Horizontal scroll JS** uses a `holdStep()` smoothstep function for panel transitions — panels hold in the center of their segment, with smooth easing at transition boundaries. Do NOT revert to simpler snapping approaches.
- **Photo row `object-position`**: CSS default is `center center`. For portrait-oriented images (taller than wide), add inline `style="object-position: center 25%;"` to show the upper portion (faces/heads) instead of the middle.
- **No captions under mockups** — iPhone mockups (dashboard, flyaway, in-venue) should NOT have italic caption text below them. Remove any `<p>` tags with "Example:" or "Mockup:" text below iPhone frames.
- **Panel structure**: The intro panel ("01 - Monthly Donors") is OUTSIDE `#monthly-hscroll-track` in its own `<section>`. Only 6 panels are inside the track (panels 0-5). panelCount = 6.

## Execution Rules
- **NO questions, NO permission requests** — just execute autonomously
- Always verify 0 remaining S+F references before deploying
- Always copy `nk-invenue-screen.jpg` into deploy folders
- When unilateral edits are needed across all pitches, apply to every file