# Deliverables Section — Horizontal Scroll Redesign
**Art Direction: Jessica | For: Thibault (Implementation — awaiting Assaf greenlight)**
**Section: #deliverables on brandwatch-v2**
**Date: 2026-03-11**

---

## 1. Concept

Replace the current 3+2 grid of deliverable cards with a **horizontal scroll carousel in a sticky container**. Cards display in **pairs (2 side by side)**, with much larger images and drastically reduced text. The section pins to viewport while the user scrolls vertically, translating into horizontal card movement.

**Why:** Current grid crams 5 cards with dense text and tiny dark mockups. Nothing breathes. The horizontal scroll lets each deliverable own real screen estate — big readable mockups, minimal copy.

---

## 2. Layout Structure

```
┌─────────────────────────────────────────────────┐
│  Section header (Deliverables + H2 + desc)      │  ← scrolls normally
├─────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐               │
│  │  Card 1     │  │  Card 2     │               │  ← sticky viewport
│  │  [BIG IMG]  │  │  [BIG IMG]  │               │     scrolls horizontally
│  │  Title      │  │  Title      │               │
│  │  1-line desc│  │  1-line desc│               │
│  │  → BW value │  │  → BW value │               │
│  └─────────────┘  └─────────────┘               │
│                                                  │
│     ← scroll indicators (dots or progress) →     │
├─────────────────────────────────────────────────┤
│  Next section continues                          │  ← scrolls normally
└─────────────────────────────────────────────────┘
```

**Pairs:**
- Pair 1: Strategy Brief + Campaign Architecture
- Pair 2: Production-Ready Assets + Multi-Market Localization  
- Pair 3: Execution Playbook + (empty or CTA card)

---

## 3. HTML Structure

```html
<section id="deliverables">
  <div class="container">
    <div class="section-divider" data-anim="scroll"><span class="section-label">Deliverables</span></div>
    <h2 data-anim="scroll">What the system produces</h2>
    <p class="section-desc" data-anim="scroll">Every output starts from your client's Brandwatch data and feeds directly into your publishing tools.</p>
  </div>

  <!-- Sticky scroll wrapper -->
  <div class="deliverables-scroll-wrapper">
    <div class="deliverables-scroll-track">
      <div class="deliverables-scroll-inner">

        <!-- Pair 1 -->
        <div class="deliverable-pair">
          <div class="deliverable-card">
            <div class="deliverable-image">
              <img src="assets/strategy-brief-mockup.png" alt="Strategy Brief">
            </div>
            <h3>Strategy Brief</h3>
            <p>Brandwatch data → positioning strategy with specific campaign directions.</p>
            <p class="bw-value">→ Clients see their data producing actionable strategy. ROI becomes obvious.</p>
          </div>
          <div class="deliverable-card">
            <div class="deliverable-image">
              <img src="assets/campaign-architecture-mockup.png" alt="Campaign Architecture">
            </div>
            <h3>Campaign Architecture</h3>
            <p>Strategy → channel-by-channel blueprint their team can execute from.</p>
            <p class="bw-value">→ Eliminates the agency dependency that pulls clients off your platform.</p>
          </div>
        </div>

        <!-- Pair 2 -->
        <div class="deliverable-pair">
          <div class="deliverable-card">
            <div class="deliverable-image">
              <img src="assets/production-assets-mockup.png" alt="Production-Ready Assets">
            </div>
            <h3>Production-Ready Assets</h3>
            <p>Finished creative loaded directly into Publish and Advertise. Not drafts.</p>
            <p class="bw-value">→ Drives direct platform engagement. More assets deployed = stronger renewal.</p>
          </div>
          <div class="deliverable-card">
            <div class="deliverable-image">
              <img src="assets/localization-mockup.png" alt="Multi-Market Localization">
            </div>
            <h3>Multi-Market Localization</h3>
            <p>Regional Brandwatch data → market-specific campaigns, produced in parallel.</p>
            <p class="bw-value">→ More markets = more seats = higher ARPU.</p>
          </div>
        </div>

        <!-- Pair 3 -->
        <div class="deliverable-pair">
          <div class="deliverable-card">
            <div class="deliverable-image">
              <img src="assets/execution-playbook-mockup.png" alt="Execution Playbook">
            </div>
            <h3>Execution Playbook</h3>
            <p>Step-by-step deployment: what to publish when, what to track in Brandwatch.</p>
            <p class="bw-value">→ Closes the loop back into Measure. Clients prove ROI continuously.</p>
          </div>
          <div class="deliverable-card deliverable-card--cta">
            <div class="deliverable-cta-inner">
              <h3>Five deliverables.<br>One pipeline.</h3>
              <p>Data in. Campaigns out. Every step inside Brandwatch.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
```

---

## 4. CSS Specs

### 4.1 Sticky Scroll Container

```css
.deliverables-scroll-wrapper {
  position: relative;
  /* Height = (number of pairs - 1) * 100vh + 100vh for the sticky frame */
  height: 300vh; /* 3 pairs */
}

.deliverables-scroll-track {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.deliverables-scroll-inner {
  display: flex;
  gap: 0;
  /* JS translates this horizontally based on scroll position */
  will-change: transform;
}
```

### 4.2 Card Pairs

```css
.deliverable-pair {
  display: flex;
  gap: 32px;
  min-width: 100vw;
  max-width: 100vw;
  padding: 0 calc((100vw - 1100px) / 2); /* Center within container max-width */
  align-items: stretch;
  flex-shrink: 0;
}
```

### 4.3 Cards (Redesigned)

```css
.deliverable-card {
  flex: 1;
  background: #fafafa;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.deliverable-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* Much bigger image area */
  overflow: hidden;
  line-height: 0;
}

.deliverable-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deliverable-card h3 {
  font-family: 'larken', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--black);
  letter-spacing: -0.02em;
  padding: 24px 32px 8px;
}

.deliverable-card p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.5;
  padding: 0 32px;
}

.deliverable-card .bw-value {
  font-size: 13px;
  color: var(--red);
  font-weight: 400;
  padding: 12px 32px 28px;
  margin-top: auto; /* Push to bottom */
}
```

### 4.4 CTA Card (6th slot)

```css
.deliverable-card--cta {
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.deliverable-cta-inner h3 {
  font-family: 'larken', serif;
  font-size: 28px;
  line-height: 1.3;
  padding: 0;
}

.deliverable-cta-inner p {
  color: var(--light);
  padding-top: 12px;
}
```

---

## 5. JavaScript — Scroll-to-Horizontal Translation

```javascript
/* Deliverables horizontal scroll */
(function() {
  'use strict';

  var wrapper = document.querySelector('.deliverables-scroll-wrapper');
  var track = document.querySelector('.deliverables-scroll-track');
  var inner = document.querySelector('.deliverables-scroll-inner');
  if (!wrapper || !track || !inner) return;

  var pairs = inner.querySelectorAll('.deliverable-pair');
  var totalPairs = pairs.length;

  /* Respect reduced motion */
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    wrapper.style.height = 'auto';
    track.style.position = 'relative';
    inner.style.overflowX = 'auto';
    inner.style.scrollSnapType = 'x mandatory';
    pairs.forEach(function(p) { p.style.scrollSnapAlign = 'start'; });
    return;
  }

  function onScroll() {
    var rect = wrapper.getBoundingClientRect();
    var wrapperTop = -rect.top;
    var scrollRange = wrapper.offsetHeight - window.innerHeight;

    if (wrapperTop < 0) wrapperTop = 0;
    if (wrapperTop > scrollRange) wrapperTop = scrollRange;

    var progress = wrapperTop / scrollRange; /* 0 → 1 */
    var maxTranslate = (totalPairs - 1) * window.innerWidth;
    var translateX = progress * maxTranslate;

    inner.style.transform = 'translateX(-' + translateX + 'px)';
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

---

## 6. Mobile (≤768px)

On mobile, the sticky horizontal scroll is disabled. Cards stack vertically in a normal scroll — single column, full width, same reduced copy.

```css
@media (max-width: 768px) {
  .deliverables-scroll-wrapper {
    height: auto;
  }

  .deliverables-scroll-track {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .deliverables-scroll-inner {
    flex-direction: column;
    transform: none !important;
  }

  .deliverable-pair {
    flex-direction: column;
    min-width: 100%;
    max-width: 100%;
    padding: 0 24px;
    gap: 16px;
    margin-bottom: 16px;
  }

  .deliverable-image {
    aspect-ratio: 16 / 10;
  }
}
```

---

## 7. Copy — Trimmed

Each card goes from ~60 words → ~15 words. One sentence max. The BW value line stays but shorter.

| Card | Description (new) | BW Value (new) |
|------|-------------------|----------------|
| Strategy Brief | Brandwatch data → positioning strategy with specific campaign directions. | → Data producing strategy. ROI becomes obvious. |
| Campaign Architecture | Strategy → channel-by-channel blueprint their team can execute from. | → Eliminates agency dependency. Keeps clients on-platform. |
| Production-Ready Assets | Finished creative loaded directly into Publish and Advertise. Not drafts. | → More assets deployed = stronger renewal. |
| Multi-Market Localization | Regional Brandwatch data → market-specific campaigns, produced in parallel. | → More markets = more seats = higher ARPU. |
| Execution Playbook | Step-by-step deployment: what to publish when, what to track. | → Closes the loop back into Measure. |

---

## 8. Quality Gate (CE UI)

| Check | Status |
|-------|--------|
| White background | ✅ |
| Only Larken / Inter / JetBrains Mono | ✅ |
| CE colors only | ✅ |
| No font-weight above 500 | ✅ |
| No gradients | ✅ |
| No box-shadow | ✅ |
| No border-radius > 4px | ✅ |
| All borders 1px solid #eee | ✅ |
| `prefers-reduced-motion` respected | ✅ (falls back to native horizontal scroll) |
| Container max-width 1100px | ✅ (cards centered within) |

---

## 9. What Gets Removed

Current CSS classes replaced:
- `.deliverables-grid` → replaced by `.deliverables-scroll-wrapper` + inner structure
- Card styles stay but are modified (bigger image, less padding)
- All `data-anim="stagger-deliver"` removed from cards (scroll handles reveal)

---

*— Jessica*
*"Let the mockups do the talking. The copy just introduces them."*