Zadanie 1: cennik-tlo-hero

Treść zadania

User (Kuba): „w sekcji Cennik wrzuć zdjęcie pod zielonym tłem (to samo zdjęcie) co jest w nagłówku hero na stronie głównej. Sekcja cennik ma mieć takie samo tło jak sekcja hero na stronie głównej."

Decyzja po klaryfikacji: implementacja tylko sekcji id="cennik" (bez cennik-raty).

Specyfikacja

SDD Spec: Cennik — tło jak w sekcji hero na stronie głównej

Cel

Sekcja Cennik (id="cennik") na stronie głównej convertere.pl ma mieć takie samo tło jak sekcja hero — zielone tło bg-primary-600 + to samo zdjęcie (hero screenshot) jako subtelna warstwa opacity-5.

Zakres

• Plik: pages/index.vue (repo: /root/convertere/www_v3)
• Sekcja: (ok. linia 190–222)
• NIE ruszaj: sekcji cennik-raty, hero, innych sekcji i stron.

Stan istniejący (zweryfikowany)

Hero (linie 53–58):

<div class="bg-primary-600 absolute top-0 h-[625px] sm:h-[755px] lg:h-[895px] inset-x-0" />
<div
  class="absolute top-0 h-[625px] sm:h-[755px] lg:h-[895px] inset-x-0 bg-cover bg-center opacity-5"
  :style="{ backgroundImage: `url(${page.hero.screenshot.src})` }"
></div>

Zdjęcie: page.hero.screenshot.src = https://docs.convertere.pl/uploads/663816cd-51f3-4e75-b856-3c7bdcb0b67d.jpg (HTTP 200, zweryfikowane curl).

Cennik (linie 190–222): tylko class="bg-primary-600" — brak warstwy zdjęcia.

Zmiany do wprowadzenia

1. W sekcji id="cennik" zmień class="bg-primary-600" na:

class="bg-primary-600 relative overflow-hidden"

1. Dodaj jako pierwszy element wewnątrz (przed UPricingGrid):

```html

class="absolute inset-0 bg-cover bg-center opacity-5 pointer-events-none"

:style="{ backgroundImage: url(${page.hero.screenshot.src}) }"

>

```

• inset-0 zamiast top-0 h-[...] — warstwa ma pokrywać CAŁĄ sekcję Cennik (hero używa sztywnych wysokości, bo jest przy topie strony; sekcja jest w środku strony).
• relative overflow-hidden na sekcji — kotwiczenie warstwy + przycięcie do sekcji (ULandingSection nie ma domyślnie position: relative).
• pointer-events-none — warstwa nie może blokować kliknięć w przyciski/karty cenowe.
• opacity-5 identycznie jak w hero.

Kryteria akceptacji

• [ ] pages/index.vue zmieniony zgodnie z powyższym (tylko sekcja id="cennik").
• [ ] Build przechodzi (yarn build bez błędów).
• [ ] Po deployu: https://convertere.pl/ zwraca HTTP 200.
• [ ] Na produkcji sekcja Cennik ma zielone tło z widoczną (subtelną) fakturą zdjęcia hero — wizualnie spójna z sekcją hero.
• [ ] Przyciski w sekcji Cennik działają (klikalne).

Wykonanie (kolejność — wykonaj dokładnie)

1. Edytuj pages/index.vue — tylko sekcja id="cennik".
2. Weryfikacja diff: git diff pages/index.vue.
3. Build: yarn build (jeśli potrzeba: NODE_OPTIONS=--max-old-space-size=4096).
4. Commit (konwencjonalny message, np. feat(cennik): tlo sekcji cennik jak w hero) — NIE commituj .superpowers/*.
5. Push: git push origin production.
6. Deploy: yarn deploy (deploy.sh — build lokalny, tar .output, scp na [email protected], pm2 restart convertere). Czekaj aż skrypt wypisze [deploy] Gotowe.
7. Weryfikacja produkcji: curl -s -o /dev/null -w "%{http_code}" https://convertere.pl/ → 200 oraz curl -s https://convertere.pl/ | grep -c "Cennik" > 0.
8. Raport końcowy: co zmienione, commit hash, wyniki build/deploy/curl.

Poza zakresem

• Sekcja cennik-raty — NIE zmieniać.
• Żadne inne strony/pliki.

Status

✅ Zrobione i zweryfikowane (CEO, 2026-08-26):

• Commit: 3705d88 feat(cennik): tło jak hero (tylko pages/index.vue, +2/-1)
• Build: yarn build OK (46.52s); Deploy: yarn deploy → [deploy] Gotowe., PM2 restart OK, health check pong
• Produkcja: https://convertere.pl/ HTTP 200; HTML zawiera bg-primary-600 relative overflow-hidden + warstwę absolute inset-0 bg-cover bg-center opacity-5 pointer-events-none (zdjęcie hero 663816cd)

Źródła (Pliki)

• Spec: /root/convertere/www_v3/.superpowers/sdd-cennik-tlo-spec.md
• Repo: /root/convertere/www_v3 (plik pages/index.vue)

Źródła (Linki URL)

• https://convertere.pl/
• https://docs.convertere.pl/uploads/663816cd-51f3-4e75-b856-3c7bdcb0b67d.jpg