# Deploy — WEC Mockups Hub

Rekomendacja: **Cloudflare Pages + Cloudflare Access** (darmowe, dobrze skaluje się na "hub", ochrona hasłem/emailem bez płacenia).

## ✅ Status

| Krok | Stan |
|---|---|
| Optymalizacja zdjęć (125 MB → 4.4 MB) | gotowe |
| `git init` + initial commit | gotowe |
| Prywatne repo na GitHub: [wjojczyk-max/wec-mockups](https://github.com/wjojczyk-max/wec-mockups) | gotowe |
| Pierwszy push (50 plików, 4.7 MB) | gotowe |
| **Podpięcie repo do Cloudflare Pages** | **← TY teraz** |
| Cloudflare Access (ochrona hasłem) | opcjonalne, kiedykolwiek później |
| Custom domain `mockupy.wec24.pl` | opcjonalne, kiedykolwiek później |

## 🚀 Co teraz zrobić — Cloudflare Pages (panel web, ~3 min)

1. **Zarejestruj się** na [dash.cloudflare.com](https://dash.cloudflare.com) — darmowe, jeśli już masz konto (bo np. masz tam domeny), pomiń.

2. W lewym menu kliknij **Workers & Pages** → przycisk **Create application** → zakładka **Pages** → **Connect to Git**.

3. **Połącz GitHub** — kliknij "Connect GitHub account", autoryzuj Cloudflare GitHub App, **wybierz tylko repo `wec-mockups`** (albo "All repositories", ale wybranie jednego jest bezpieczniejsze).

4. Po połączeniu zobaczysz listę repo. Wybierz `wjojczyk-max/wec-mockups` → **Begin setup**.

5. **Build settings:**
   - Project name: `wec-mockups` (URL będzie `wec-mockups.pages.dev`)
   - Production branch: `main`
   - **Framework preset:** `None`
   - **Build command:** *zostaw puste* (nasz projekt jest czysto statyczny)
   - **Build output directory:** `/` (zostaw domyślne)

6. **Save and Deploy** → pierwszy deploy ~30 sekund.

7. **Gotowe.** Twój link: `https://wec-mockups.pages.dev`

**Od teraz każde `git push` na branch `main` automatycznie buduje i wgrywa nową wersję.** Pull request na inny branch dostanie własny preview URL (np. `https://abc123.wec-mockups.pages.dev`) — przydatne do iteracji bez ruszania produkcji.

## 🔒 Cloudflare Access — ochrona hasłem/emailem (opcjonalne)

Włącz kiedy zechcesz pokazać link np. tylko zespołowi WEC.

1. CF panel → **Zero Trust** (lewe menu) → akceptuj utworzenie organizacji (np. nazwa `wec24`).
2. **Access** → **Applications** → **Add an application** → **Self-hosted**.
3. **Application Configuration:**
   - Application name: `WEC Mockups`
   - Session Duration: 24 hours (lub jak chcesz)
   - Application domain: `wec-mockups.pages.dev` (lub Twoja custom domain)
4. **Identity providers**: zostaw "One-time PIN" (domyślne — wysyła PIN na maila).
5. **Policies** → **Add a policy**:
   - Policy name: `Zespół WEC`
   - Action: `Allow`
   - **Configure rules** → Include → Selector: `Emails ending in` → wpisz `@wec24.pl`
   - (Lub Selector: `Emails` → wklej listę konkretnych adresów dla freelancerów/klientów)
6. Save.

Następne wejście na `wec-mockups.pages.dev` poprosi o email. Po wpisaniu maila z domeny `@wec24.pl`, CF wyśle PIN, wpisujesz → wchodzisz na stronę. Sesja trzyma 24h.

Plan darmowy Zero Trust daje **50 user seats** — w pełni wystarcza.

## 🌐 Custom domain (opcjonalne)

Jeśli chcesz `mockupy.wec24.pl` zamiast `wec-mockups.pages.dev`:

1. CF Pages → projekt `wec-mockups` → **Custom domains** → **Set up a custom domain** → wpisz `mockupy.wec24.pl`.
2. CF pokaże Ci CNAME do dodania w DNS-ach domeny `wec24.pl`. Jeśli DNS-y `wec24.pl` też hostujesz w Cloudflare — CF doda rekord sam.
3. SSL/TLS wystawi się automatycznie w ~5 min.

## 🔄 Aktualizacja mockupów (workflow code → live)

Edytujesz pliki w `c:\claude\strona wec communication\`, potem w terminalu:

```bash
cd "c:\claude\strona wec communication"
git add -A
git commit -m "Update: opis zmiany"
git push
```

CF Pages w ~30 sek wykryje push i wgra nową wersję. W panelu CF Pages zobaczysz historię wszystkich deployów i możesz cofnąć do dowolnego.

**Mogę też robić to za Ciebie** — wystarczy powiedzieć "wypchnij zmiany" w naszej rozmowie, użyję `git push` Twoim tokenem.

## 🧹 Wyłączenie paska dev przed prawdziwym launchem

Pasek dev `mockup-switcher.js` (żółto-czarna taśma na górze) jest dobry na warsztaty z klientem ("widzisz wprost że to mockupy"), ale nie chcesz tego w finalnej wersji. Trzy opcje:

- **Nic nie rób** — Cloudflare Access zasłania całość loginem, pasek dev ma sens
- **Wyłącz dla konkretnej domeny** — w `shared/mockup-switcher.js`, na samym początku funkcji, dodaj: `if (location.hostname === "wec24.pl" || location.hostname === "mockupy.wec24.pl") return;`
- **Usuń całkowicie** — usuń linijkę `<script src="../shared/mockup-switcher.js"></script>` z każdego HTML

## 📋 Co podmienić zanim pokażesz klientowi/zespołowi

| Co | Gdzie | Status |
|---|---|---|
| Imiona w "Twarze WEC" | `shared/content.js` → `WEC.zespol.osoby` | placeholder |
| Stanowiska | jw. | placeholder |
| Liczby (50+ marek, 200+ projektów, 12 osób) | `shared/content.js` → `WEC.liczby` | placeholder |
| Logotypy klientów | `shared/clients/*.svg` | placeholder (wordmarki) |
| Claim hero | `shared/content.js` → `WEC.marka.claim` | przykładowy |
| Manifest | `shared/content.js` → `WEC.marka.manifest` | przykładowy |

Edycja jednego pliku (`shared/content.js`) zmienia treść we wszystkich 4 wariantach naraz.

---

## (poniżej: oryginalne alternatywne opcje hostingu)


## Opcja A — Cloudflare Pages (najszybsze)

### 1. Konto i przygotowanie
1. Zarejestruj się na [dash.cloudflare.com](https://dash.cloudflare.com) (darmowe).
2. W menu po lewej: **Workers & Pages** → **Create application** → **Pages** → **Upload assets**.

### 2. Upload bez gita (drag & drop)
1. Nazwij projekt: np. `wec-mockups` (URL będzie `wec-mockups.pages.dev`).
2. **Spakuj cały folder do ZIP-a:** zawartość `c:\claude\strona wec communication` *bez folderu* `Zdjecia zespołu - sesja w biurze - kwiecień 2024` (te zdjęcia są już skopiowane do `shared/team/` pod krótkimi nazwami — oryginalny folder z polskimi znakami nie jest potrzebny, a może powodować problemy na hostingu).
3. Przeciągnij ZIP w panel Cloudflare.
4. Klik **Deploy site** → po ~30 sek dostaniesz URL `https://wec-mockups.pages.dev`.

### 3. Z git (lepsze długoterminowo)
1. Stwórz repo na GitHub (np. `wec-mockups`).
2. W lokalnym folderze: `git init && git add . && git commit -m "initial mockups" && git remote add origin <repo> && git push -u origin main`.
3. W CF Pages: **Connect to Git** → wybierz repo → **Save and Deploy**.
4. Każdy push automatycznie deploy'uje nową wersję.

### 4. Ochrona hasłem przez Cloudflare Access (darmowo, 50 user seats)
1. W panelu CF: **Zero Trust** (lewe menu) → potwierdź teamname.
2. **Access** → **Applications** → **Add an application** → **Self-hosted**.
3. Wpisz nazwę (`WEC Mockups`) i domenę: `wec-mockups.pages.dev` (lub własną).
4. **Policy** (jak ma działać dostęp). Trzy najpopularniejsze:
   - **Po emailu zespołu:** Action `Allow`, Include = `Emails ending in @wec24.pl` → wszyscy z tej domeny logują się przez "One-time PIN" wysłany na maila.
   - **Konkretna lista emaili:** Include = `Emails` → wpisujesz adresy. Każdy dostanie PIN mailem.
   - **Współdzielony PIN:** Include = `Service Token` (dla całej organizacji, jeden klucz). Trudniejsze, ale bez emaili.
5. Save → następnym razem wejście na link wymaga zalogowania.

Plan darmowy Cloudflare Zero Trust daje **50 użytkowników**. Wystarcza w pełni.

### 5. Custom domena (opcjonalnie)
Możesz podłączyć np. `mockupy.wec24.pl`:
1. CF Pages → projekt → **Custom domains** → **Set up a custom domain**.
2. Dodaj CNAME w DNS-ach domeny prowadzący na `wec-mockups.pages.dev`.
3. SSL CF wystawi automatycznie.

## Opcja B — Netlify Drop (najszybsze, ale bez darmowej ochrony hasłem)

1. Wchodzisz na [app.netlify.com/drop](https://app.netlify.com/drop).
2. Przeciągasz cały folder (bez `Zdjecia zespołu - sesja w biurze - kwiecień 2024`).
3. Dostajesz URL `xxx.netlify.app`.
4. Bez konta link wygasa po 24h. Z darmowym kontem permanent.
5. Password protection wymaga Pro plana ($19/m).

## Opcja C — Vercel (jeśli kiedyś przejdziesz na Next.js)

1. `npm i -g vercel` (lub use [vercel.com](https://vercel.com) GUI).
2. `cd "c:\claude\strona wec communication" && vercel` → przejdziesz przez konfigurator.
3. Domyślnie wykrywa static site, deployuje na `xxx.vercel.app`.
4. Password protection — Pro plan.

## Co trzeba sprawdzić po wgrniu

1. **Otwórz** `https://<URL>/` → powinien się pojawić landing hub.
2. **Kliknij każdy wariant** — A, A-jasny, A2-graficzny, C.
3. **Pasek dev na górze** powinien działać (przełączanie między wariantami).
4. **Zdjęcia zespołu** w bannerach i masonry powinny się załadować.
5. **Logo klientów (SVG placeholdery)** w marquee powinny być widoczne.
6. **Animacje GSAP / fade-ins** powinny działać (CDN się załaduje).

## Co podmienić zanim pokażesz klientowi/zespołowi

| Co | Gdzie | Status |
|---|---|---|
| Imiona w "Twarze WEC" | `shared/content.js` → `WEC.zespol.osoby` | placeholder |
| Stanowiska | jw. | placeholder |
| Liczby (50+ marek, 200+ projektów, 12 osób) | `shared/content.js` → `WEC.liczby` | placeholder |
| Logotypy klientów | `shared/clients/*.svg` | placeholder (wordmarki) |
| Claim hero | `shared/content.js` → `WEC.marka.claim` | przykładowy |
| Manifest | `shared/content.js` → `WEC.marka.manifest` | przykładowy |

Edycja jednego pliku (`shared/content.js`) zmienia treść we wszystkich 4 wariantach naraz.

## Aktualizacje

- **Bez gita (drag&drop):** ponownie spakuj folder, wrzuć w CF Pages → **Create new deployment**.
- **Z gitem:** `git push` → CF Pages buduje automatycznie.

## Wyłączenie paska dev przed prawdziwym launchem

Pasek `mockup-switcher.js` jest jawnie oznaczony jako "internal". Przed pokazaniem klientowi możesz:

- **Zostawić** (jasny komunikat że to mockupy, OK na warsztat z klientem)
- **Wyłączyć po prostu** — usuń linijkę `<script src="../shared/mockup-switcher.js"></script>` z każdego HTML, lub w switcher.js wczesny `return` na podstawie `window.location.hostname === "prawdziwa-domena.pl"`