Specyfikacja techniczna: Opracowanie wielostronicowej strony internetowej na WordPress (2 lokalizacje)
## 1. Ogólne zasady i cel projektu
**Cel projektu:** Opracowanie szybkiej, responsywnej (mobile-first) strony wizytówki z wieloma lokalizacjami dla firmy świadczącej usługi montażu i naprawy. Główne zadanie — przyjmowanie leadów przez formularz kontaktowy z **automatycznym przypisaniem do konkretnej lokalizacji i usługi** (bez wyboru ze strony klienta), a także optymalizacja pod kątem lokalnego wyszukiwania (SEO).
**Ważne:** W przyszłości zamawiający powinien mieć możliwość **samodzielnego dodawania nowych usług** przez standardowe strony WordPress, bez konieczności edytowania kodu lub menu.
**Silnik (CMS):** WordPress (najbardziej stabilna wersja).
**Budżet:** [Do uzgodnienia].
**Terminy:** [Podaj liczbę dni/tygodni].
---
## 2. Struktura strony (Mapa stron)
Należy zrealizować następującą hierarchię stron:
1. **Strona główna (/)**
* Pełni rolę strony wprowadzającej. Główne zadanie — zachęcenie użytkownika do wyboru swojego miasta.
2. **Strony lokalizacji (sekcje nadrzędne):**
* `/calgary/` (Calgary)
* `/oshawa/` (Oshawa)
3. **Strony usług (podrzędne w stosunku do lokalizacji):**
* `/calgary/tv-mounting/` (Montaż TV)
* `/calgary/furniture-assembly/` (Montaż mebli)
* `/calgary/house-painting/` (Malowanie domów)
* *(Analogiczna struktura dla `/oshawa/`)*
* **Ważne:** W przyszłości zamawiający będzie mógł tworzyć nowe podrzędne strony usług (np. `/calgary/new-service/`) standardowymi środkami WordPress.
4. **Blog:**
* `/blog/` (Sekcja ogólna)
* Możliwość publikacji artykułów zarówno w ogólnym blogu, jak i przypisania porad do konkretnych usług.
---
## 3. Wymagania dotyczące projektu i układu (Responsywność)
1. **Typ układu:** Mobile-first. Strona musi być doskonale wyświetlana na wszystkich typach urządzeń: smartfony (320px+), tablety (768px+), desktopy (1920px+).
2. **Wygląd wizualny:**
* Czysty, nowoczesny minimalizm, inspirowany dostarczonymi zrzutami ekranu.
* Główny nacisk — na wygodę czytania i zrozumiałe przyciski wezwania do działania (CTA).
---
## 4. Opis stron i bloków funkcjonalnych
### 4.1. Strona główna (Wprowadzająca)
* **Nagłówek:** Logo, minimalne menu (Strona główna, Blog, Kontakt).
* **Główny ekran (Hero):** Tytuł (H1): "Profesjonalne usługi domowe". Podtytuł: "Wybierz swoje miasto, aby kontynuować".
* **Blok wyboru lokalizacji:**
* Dwie duże przyciski: "Calgary" i "Oshawa" (jak na drugim zrzucie ekranu).
* **Stopka:** Krótkie informacje kontaktowe, prawa autorskie.
### 4.2. Strona lokalizacji (nadrzędna), np. /calgary/
* **URL:** `/calgary/` (Przyjazny URL).
* **Nagłówek:** Logo, **automatyczne menu** (powinno samo pobierać wszystkie podrzędne strony-usługi), przycisk "Get Quote".
* **Treść:**
* H1: "Usługi w Calgary".
* Blok "O nas / Opis": Unikalny tekst dla miasta.
* **Blok usług (usługi):** Automatyczne wyświetlanie wszystkich podrzędnych stron (usług) w formie kart. Każda karta zawiera: nazwę usługi, krótkie opisanie (z strony), przycisk "Dowiedz się więcej".
* **Blog (widget):** Wyświetlanie 2-3 ostatnich artykułów związanych z daną lokalizacją.
* **Mapa:** Interaktywna mapa Google Maps z oznaczeniem miasta.
* **Formularz "Get Quote":** Pola: Imię, Telefon, Email. **Żadnego rozwijanego menu usług!**
* **Stopka:** Kontakty (telefon, email), godziny otwarcia.
### 4.3. Strona usługi (podrzędna), np. /calgary/tv-mounting/
* **URL:** `/calgary/tv-mounting/` (Przyjazny URL).
* **Nagłówek i stopka:** Dziedziczone z nadrzędnej strony lokalizacji (menu z usługami automatyczne).
* **Treść:**
* H1: "Montaż telewizora w Calgary" (tworzy się automatycznie z tytułu strony i nadrzędnej lokalizacji).
* **Blok opisu:** Szczegółowy opis usługi.
* **Galeria:** Slider lub siatka obrazów (3-5 zdjęć) przykładów prac.
* **Blog (porady tematyczne):** Wyświetlanie 1-2 artykułów z odpowiedniej kategorii.
* **Przycisk "Get Quote"** (prowadzi do formularza).
* **Formularz kontaktowy:** Analogiczny do formularza na stronie nadrzędnej (Imię, Telefon, Email).
### 4.4. Blog
* Ogólny archiwum wpisów `/blog/`.
* Archiwa według kategorii (np. `/blog/tv-tips/`, `/blog/furniture-tips/`).
* Oddzielny wpis blogowy: standardowy widok (tytuł H1, data, tekst, obrazy).
---
## 5. Wymagania techniczne (Specyfikacja)
### 5.1. Kluczowe wymaganie: Łatwość dodawania nowych usług
* Wszystkie strony usług są tworzone jako **zwykłe podrzędne strony** odpowiednich lokalizacji (Calgary/Oshawa).
* **Menu w nagłówku musi być dynamiczne:** Musi automatycznie wyświetlać linki do WSZYSTKICH podrzędnych stron bieżącej lokalizacji. Zamawiający nie musi ręcznie edytować menu przy dodawaniu nowej usługi.
* **Blok usług** na stronie lokalizacji również musi automatycznie wyświetlać wszystkie podrzędne strony (usługi).
### 5.2. Integracja z Telegramem (automatyczne określenie)
1. **Zadanie:** Wszystkie dane z formularzy muszą być wysyłane do czatu Telegram.
2. **Format wiadomości (krytyczne znaczenie):**
* Wiadomość musi **automatycznie określać**:
* **Nazwa usługi** — pobierana z tytułu bieżącej strony (jeśli to strona usługi) lub przekazywana jako "Ogólne zgłoszenie z strony lokalizacji", jeśli formularz został wypełniony na stronie nadrzędnej.
* **Lokalizację** — pobieraną z tytułu nadrzędnej strony (Calgary / Oshawa).
* Klient **nie wybiera** usługi z listy — system sam rozumie, skąd pochodzi zgłoszenie.
3. *Przykład powiadomienia:*
> 🔥 **Nowe zgłoszenie!**
> **Usługa:** Montaż TV
> **Lokalizacja:** Calgary
> **Imię:** Ivan
> **Tel:**
> **Email:**
### 5.3. Ustawienia SEO
1. **Nagłówki:** Ścisła hierarchia. Jeden H1 na stronie.
2. **Wtyczka SEO:** Instalacja i konfiguracja Rank Math lub Yoast SEO (Tytuł, Opis, Przyjazny URL, mapa witryny).
3. **Mikroformat LocalBusiness:** Na wszystkich stronach lokalizacji. Zawiera nazwę firmy, adres (dla Calgary i Oshawy osobno), telefon, godziny otwarcia.
### 5.4. Silnik i prędkość
* Zakaz używania ciężkich konstruktorów stron (ciężki Elementor Pro). Dozwolone Gutenberg lub lekkie konstruktory (Kadence Blocks itp.) z kontrolą czystości kodu.
* Optymalizacja prędkości: kompresja obrazów, minimalizacja skryptów, buforowanie.
### 5.5. Blog
* Utworzyć kategorie odpowiadające usługom: "Montaż TV", "Montaż mebli", "Malowanie domów".
* Artykuły powinny być wyświetlane na odpowiednich stronach usług (jako "porady tematyczne").
---
## 6. Wynik pracy (Co oddajemy?)
1. W pełni gotowa strona na WordPressie.
2. Pliki źródłowe motywu.
3. Zrzut bazy danych (SQL).
4. **Instrukcja administracyjna (obowiązkowo):**
* Jak stworzyć nową usługę (krok po kroku, ze zrzutami ekranu).
* Jak zmienić telefon/kontakty dla lokalizacji.
* Jak sprawdzić działanie bota Telegram.
5. Wideo prezentacja działania formularzy i kluczowych funkcji.
---
## 7. Kryteria akceptacji
1. Strona poprawnie wyświetla się na wszystkich urządzeniach (mobilne, tablety, desktopy).
2. Przy tworzeniu nowej podrzędnej strony (usługi) dla Calgary lub Oshawy:
* Automatycznie pojawia się w menu na odpowiedniej stronie lokalizacji.
* Automatycznie pojawia się w bloku usług na stronie lokalizacji.
3. Formularze wysyłają dane do Telegramu. W wiadomości **automatycznie** podane są poprawna usługa i lokalizacja (bez wyboru ze strony klienta).
4. Sprawdzona hierarchia nagłówków (brak błędów).
5. W kodzie stron lokalizacji znajduje się mikroformat LocalBusiness.
6. Prędkość według Google PageSpeed Insights: nie mniej niż 85+ (mobilne) i 90+ (desktop).
---
## 8. Pytania do wykonawcy (dla platformy freelancerskiej)
Proszę o odpowiedzi na pytania przy zgłoszeniu:
1. W jaki sposób zrealizujesz **automatyczne menu**, aby przy tworzeniu nowej strony-usługi pojawiła się ona od razu w nagłówku bez mojego udziału?
2. Jak technicznie zostanie zrealizowane wysyłanie do Telegramu z **automatycznym określeniem nazwy usługi i lokalizacji** (bez pola wyboru w formularzu)?
3. Jakiego konstruktora/podejścia planujesz użyć do układu, aby strona była szybka?
