# Wix Design Guild — Show & Tell Page v2
**Output:** `public/wix/index.html` — self-contained single HTML file  
**Live URL:** https://curiousendeavor.com/wix/  
**Audience:** Wix design guild — sophisticated designers and design leaders

---

## The Story (hero, 2 lines)
> "I ran a creative agency for 20 years. I encoded that knowledge into AI agents."  
> "Here's what we build."

---

## Visual References (from taste board — channel these)
- **Nicola Romei** (nicolaromei.com) — immersive, strong visual direction, refined motion, distinct design signature. Artboard aesthetic. Scroll-driven interactions with meaning.
- **Marfala** (marfala.com) — editorial, numbered work items, luxury art direction feel, minimal chrome
- **Buff Motion** — type that moves, typography as animation
- **NB Studio** — award-winning London agency, editorial grid, restrained palette with big type moments
- General tone: Awwwards-caliber. Not a startup landing page. Something a design director would respect.

---

## Visual Direction
- Background: `#111111` base  
- Type: `#F5F5F0` (warm white), `#888` secondary  
- CE accent: `#CC0000` — sparingly  
- Olevia case section: bg shifts to `#1A2E14` (deep olive), cream `#F4F1E8` text  
- Fonts: Typekit `https://use.typekit.net/ffj8sbd.css` (already CE standard) + Inter 300/400/500 from Google Fonts  
- Headlines: uppercase, tracked, editorial — minimum 72px on desktop  
- NO: glassmorphism, gradient backgrounds, cards with rounded corners everywhere, AI-cliche aesthetics  
- YES: big type, intentional negative space, grid discipline, effects that carry meaning  

---

## EFFECTS (GSAP + ScrollTrigger via CDN)
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
```

Effects to use:
- **Section reveals**: `clipPath` from `inset(0 100% 0 0)` → `inset(0 0% 0 0)` (horizontal curtain, left to right)
- **Team grid**: agents stagger in with `opacity: 0, y: 20` → `opacity: 1, y: 0`, 0.06s stagger
- **Case study tiles**: each deliverable fades+slides in sequentially on scroll
- **Color transition**: `gsap.to(section, {backgroundColor: '#1A2E14'})` on Olevia section entry
- **Hero text**: lines arrive with slight `y` offset, stagger 0.15s
- NO bounce, NO elastic, NO parallax on body copy. `ease: "power3.out"` everywhere.

---

## PAGE SECTIONS

### 0. HERO — Full viewport, centered
```
[CE wordmark, small, top-left]

"I ran a creative agency for 20 years.
 I encoded that knowledge into AI agents."

"Here's what we build."

↓  [small scroll cue]
```
Typography: headline at 80-100px, bold. Second line slightly smaller. White on black.

---

### 1. THE SYSTEM — Humans + Agents

**Section label:** `THE TEAM`

Two rows, clear visual hierarchy:

**ROW A — The Humans (4 people)**
Pull photos from `/root/.openclaw/workspace/public/brandwatch-v2/assets/`:
- `assaf.jpg` → **Assaf** / Creative Director
- `dan-direct.png` → **Dan** / Art Direction  
- `lukas.png` → **Lukas** / Strategy
- `felipe.png` → **Felipe** / Engineering

Show as a horizontal 4-column grid. Large square/portrait photos, name + role below. Minimal.

**ROW B — The Agents (8 AI specialists)**
Pull avatars from `/root/.openclaw/workspace/public/assets/`:
`kitt.png`, `gerri.png`, `ogilvy.png`, `tatiana.png`, `jessica.jpg`, `julia.png`, `thibault.png`, `anton.png`

Show as 8-column grid of smaller circular avatars with name + role beneath. 
Roles:
- Kitt → CEO / Orchestrator
- Gerri → Project Management
- Ogilvy → Copywriting
- Tatiana → Visual Direction
- Jessica → Art Direction  
- Julia → Research
- Thibault → Engineering
- Anton → Quality Control

Between the two rows, a single line of text:
> *"4 operators. 8 AI specialists. One system."*

---

### 2. BRANDING — Phat / Olevia Case Study

**Section label:** `BRANDING`

**Opening line:** *"A deeptech food startup. Zero brand. Three weeks."*

Show the work as a visual journey — NOT descriptions, actual reconstructed visuals inline.

Read these source files and extract/reconstruct the content:
- `/root/.openclaw/workspace/public/phat-foods/naming-study-v2.html` — extract the naming candidates (Olevia, Aria, etc.) and present as a typographic naming grid
- `/root/.openclaw/workspace/agents/tatiana/phat-foods/logo-exploration/logo-grid.html` — extract logo concepts and brand colors; recreate a logo grid showing Classic Serif, Script, Geometric variants  
- `/root/.openclaw/workspace/public/projects/Olevia/Brandbook/index.html` — extract color palette (#2D4A22 olive, #F4F1E8 cream, supporting colors), typography choices, brand personality
- `/root/.openclaw/workspace/agents/ogilvy/working-files/olevia-brand-book.md` — extract brand voice, positioning line

Visual layout — build a real case study display:
1. **Naming grid**: 6 name candidates displayed as large typographic tiles (cream on dark olive)
2. **Logo exploration**: 6 logo concepts as SVG/CSS text treatments showing different typographic styles for "Olevia"
3. **Color palette**: 4-5 color swatches with hex codes — the actual Olevia palette
4. **Brand positioning**: One large quote from the brand book in Olevia olive green

This entire section has `background-color: #1A2E14` (deep olive). Type in cream `#F4F1E8`.

---

### 3. ASSET CREATION — Future Forward Generator

**Section label:** `ASSET CREATION`  
**Opening line:** *"Client describes a need. AI generates. Canvas editor. Download."*

Read `/root/.openclaw/workspace/public/future-forward-generator/index.html` to understand the UI.

Then BUILD a high-fidelity UI mockup of the tool inline — make it look like a real product screenshot:
- Left panel: text input area ("Describe your asset...") + "Generate" button
- Center: canvas/preview area with a sample branded image (use a CSS gradient + geometric shapes to simulate)
- Right panel: a few tool controls (format selector, brand palette dots)

Style it as a dark UI (`#1A1A1A` panels, `#CC0000` accent button). Show it as a framed browser window / device mockup.

---

### 4. MARKET RESEARCH — eToro Competitive Intelligence

**Section label:** `MARKET RESEARCH`  
**Opening line:** *"17 global competitors. Each analyzed at brand level."*

Read `/root/.openclaw/workspace/public/etoro-competition/index.html` to understand the gallery structure.
Read 2-3 brand sub-folders in `/root/.openclaw/workspace/public/etoro-competition/` (e.g. `robinhood/`, `coinbase/`, `revolut/`) for brand details.

BUILD an inline UI mockup:
- A grid of 6 competitor brand tiles (use real brand names: Robinhood, Coinbase, Revolut, Monzo, Fidelity, Plus500)
- Each tile: brand name in large type, a colored block representing their brand color, a category tag
- Show it as a framed product interface

---

## Image Path Notes
All image paths will be relative. The file lives at `public/wix/index.html`.  
Human photos: `../brandwatch-v2/assets/assaf.jpg` etc.  
Agent avatars: `../assets/kitt.png` etc.  

---

## Quality Bar
This goes in front of Wix designers. It must look like it was designed by the system it describes.
- Every section should feel intentional and editorial
- The case study section (Section 2) must show real visual work — not placeholder boxes
- The tool mockups (Sections 3+4) must look like real product interfaces
- Awwwards-caliber execution or don't ship it

---

## Done When
- File at `public/wix/index.html`, self-contained
- Desktop-first (min 1280px), works at 768px tablet
- All 4 sections present: hero, team, branding case, tools
- Real team photos shown
- 8 agent avatars shown  
- Olevia brand work shown as actual visual content
- Tool UIs shown as credible mockups
- GSAP effects working
- Commit: `git add public/wix/ && git commit -m "feat: Wix design guild show-and-tell page"`