# WEC Communication — mockupy strony (15-lecie)

Dwa kontrastujące propozycje wizualne nowej strony agencji WEC Communication. Wspólne DNA: **fioletowa paleta** (bogata, nowoczesna) i **mocny akcent na zespół** (sesja kwiecień 2024).

> Wariant B (editorial swiss) został odrzucony na etapie rewizji.

## Jak uruchomić

Otwórz dowolny `index.html` dwuklikiem w Chrome lub Firefoxie — wszystko działa z `file://`. Bez serwera, bez builda.

```
mockup-A-bezpieczny/index.html
mockup-C-dziki/index.html
```

Każdy wariant zawiera:
- `index.html` — pełna strona główna z **dwoma sekcjami zespołu** (banner + galeria z portretami)
- `uslugi.html` — szkic podstrony usług
- `case-study.html` — szkic strony pojedynczego case (Acer Golf Cup)
- `styles.css` — warstwa CSS nad Tailwind

## Wspólne założenia

- **Kolor główny:** głęboki fiolet (paleta `#7C3AED` deep + `#A855F7` mid + `#C4B5FD` soft). Wybrany jako "bogaty, nowoczesny" zgodnie z briefem.
- **Zespół to bohater strony:** każdy wariant ma teraz:
  1. **Banner zespołu** — pełnoekranowe zdjęcie ze ścianą fioletowych paneli akustycznych
  2. **"Twarze WEC"** — 6 portretów z imieniem/nazwiskiem i stanowiskiem (placeholdery do uzupełnienia)
  3. **Reportażowa galeria masonry** — 12 zdjęć z sesji kwietniowej 2024 z opisami scen
  4. **CTA "Dołącz do zespołu"** jako wyraźny element kariery
  5. **Zdjęcie zespołu w hero** (w wariancie A) lub banner zaraz po hero (w wariancie C)
- **15-lecie:** subtelny akcent — badge `XV 2011—2026` w nawigacji, sekcja-manifest z liczbami.
- **Treści:** w `shared/content.js`. Edycja jednego pliku zmienia treść we wszystkich wariantach.
- **Zdjęcia zespołu:** lokalnie w `shared/team/` (12 zdjęć z sesji). Logo klientów: linkowane do `wec24.pl/wp-content/uploads/...` (działa, póki stara strona online).
- **Stack:** Tailwind CDN + waniliowy JS + GSAP/ScrollTrigger. Zero builda, zero `npm install`.

## Dwa warianty

### A — Bezpieczny (refresh)
**Pliki:** `mockup-A-bezpieczny/`
**Filozofia:** kontynuacja DNA obecnej strony, ale ze świeżą paletą i ludźmi na froncie. Klient rozpozna estetykę, ale poczuje skok jakościowy.

- Paleta: deep purple (`#0B0614`) tło + fioletowy gradient akcentu + soft lavender highlights
- Hero: zdjęcie zespołu (rozmowa przy oknie) zamiast wideo, z fioletowym glow w tle
- Sekcje płynnie scrollowane, fade-in animacje (GSAP)
- Banner zespołu z fioletowymi panelami akustycznymi w tle
- Galeria zdjęć: **masonry CSS columns** z fade-in opisami scen
- Portrety "Twarze WEC": karty z grayscale → color hover
- Marquee klientów: ciemny, w pętli

### C — Dziki (brutalist / motion-first)
**Pliki:** `mockup-C-dziki/`
**Filozofia:** agencja-rebel, ekspresyjna. Fiolet zastąpił neonowy lime — daje to "bogatszą", ale wciąż wyrazistą estetykę.

- Paleta: czerń + biel + electric violet (`#A855F7`) + hot pink (`#FF006E`) + deep violet (`#6D28D9`) na manifeście
- Typografia: JetBrains Mono + Archivo Black, grube 2px ramki, brutalistowe boxy
- Trzy tickery klientów w trzech kierunkach (przeplatane: paper → ink → violet)
- Floating "15" pływa po prawej stronie viewportu (skacze, znika przy footerze)
- **Pełnoekranowy banner zespołu** z ticker + zdjęciem fioletowych paneli akustycznych
- Twarze WEC w siatce 6 kart z grubymi czarnymi ramkami (naprzemiennie biały/fiolet)
- Masonry brutal: lekka rotacja zdjęć, hover = box-shadow fiolet 6px
- Easter egg: 5× klik w logo → invert colors + hue rotate
- Custom cursor crosshair

## Sesja zdjęciowa

Sesja `kwiecień 2024 · biuro WEC, Kraków`. Z dostarczonych 32 zdjęć wybrałem 12 do `shared/team/`:

| Plik | Treść | Orientacja |
|---|---|---|
| `01-rozmowa-przy-oknie.jpg` | Dwójka rozmawia z kawą, słońce w oknie | poz. |
| `02-praca-przy-laptopie.jpg` | Para przy laptopie, focus | poz. |
| `03-portret-przy-monitorze.jpg` | Kobieta przy monitorze | poz. |
| `04-rozmowa-telefoniczna.jpg` | Portret z telefonem przy uchu | poz. |
| `05-magazyn.jpg` | Press review z magazynem | pion. |
| `06-magazyn-acer.jpg` | Półki magazynu Acer | pion. |
| `07.jpg` – `12.jpg` | Pozostała mieszanka | mix |

Plik `12.jpg` (dwóch nad gazetami na tle fioletowych paneli akustycznych) jest użyty jako **kluczowy banner zespołu w obu wariantach** — bo idealnie zgrywa fiolet biura z paletą strony.

## "Twarze WEC" — placeholder

Sekcja "Twarze WEC" pokazuje 6 osób z imieniem/stanowiskiem. Wszystkie imiona są placeholderem (`Imię Nazwisko`) — do uzupełnienia w `shared/content.js` (klucz `WEC.zespol.osoby`). Stanowiska są zgadnięte (Senior PR Manager, Head of Digital, itd.) — także do zmiany.

## Co dalej

1. **Wybór wariantu** (A czy C, lub miks: np. paleta A + brutalistowe elementy C)
2. **Uzupełnienie imion i stanowisk** w "Twarzach WEC" → `shared/content.js`
3. **Doprecyzowanie liczb** w sekcji 15-lecia (potwierdzić: ilość marek, projektów, osób)
4. **Selekcja portretów** — jeśli mamy więcej dobrych ujęć z sesji, zamienić w `shared/team/`
5. **Nowe teksty** — claim hero i manifest jubileuszowy (jeśli odejść od archiwum)
6. **Pełne podstrony** (O nas, Kariera, Kontakt, Aktualności, Baza wiedzy)
7. **Wybór stacka docelowego** — WordPress (kontynuacja), Next.js (rewrite) lub Astro
8. **Responsive polish** — mobile pixel-perfect, breakpointy
9. **Mapa Google** w kontakcie (potrzeba API key)

## Pliki

```
strona wec communication/
├── README.md                                    ← ten plik
├── Zdjecia zespołu - sesja w biurze - …/        ← oryginalne 32 zdjęcia (źródło)
├── shared/
│   ├── content.js                               ← wspólne treści (edytuj tu)
│   └── team/                                    ← 12 wybranych zdjęć (krótkie ścieżki)
├── mockup-A-bezpieczny/
│   ├── index.html
│   ├── uslugi.html
│   ├── case-study.html
│   └── styles.css
└── mockup-C-dziki/
    ├── index.html
    ├── uslugi.html
    ├── case-study.html
    └── styles.css
```

## Znane ograniczenia mockupów

- Mobile: niedopolerowany (działa, ale nie pixel-perfect)
- Formularz kontaktowy: tylko UI, bez backendu
- Mapa Google: zastąpiona blokami informacyjnymi (mapa wymaga API key)
- Polityka prywatności / Cookies: linki są, ale prowadzą do `#`
- Aktualności / Baza wiedzy: zasygnalizowane w nawigacji, ale podstron nie ma w tej iteracji
- Imiona w "Twarzach WEC" są placeholderem