📋 Podsumowanie Wdrożenia - Architektura "Stron Firm"

Data przygotowania: 2026-01-XX
Projekt: Vertalist - Platforma Stron Firm
Wersja: 1.0.0

---

🎯 Cel Dokumentu

Niniejszy dokument zawiera kompletne zestawienie wszystkich stron w systemie Vertalist, przygotowane dla grafika i właściciela projektu. Zawiera ścieżki lokalne, linki produkcyjne oraz szczegółowe opisy elementów UI do zaprojektowania.

---

📊 Tabela Wszystkich Stron

---

🏗️ Architektura "Firma -> Wiele Stron"

Logika Biznesowa

1. CompanyProfile (Profil Firmy)

   • Jeden profil = jedna firma
   • Zawiera: nazwa, logo, dane kontaktowe, social media
   • Dostęp: vertalist.pl/subdomain/[tenant-slug]

2. BusinessPage (Strona Biznesowa)

   • Jedna firma może mieć wiele BusinessPage
   • Każda strona = jedna usługa/lokalizacja
   • Zawiera: tytuł, kategoria, region, miasto, treść, zdjęcia
   • Dostęp: vertalist.pl/katalog/[region]/[city]/[slug]

3. Relacje

   • CompanyProfile → wiele BusinessPage
   • BusinessPage → jeden CompanyProfile
   • Każda BusinessPage ma region i miasto (filtrowanie)

Przykładowa Struktura Danych

Mechanik123 (CompanyProfile)
├── Wulkanizacja Opon (BusinessPage)
│   └── /katalog/podkarpackie/rzeszow/wulkanizacja-opon
└── Mechanika Pojazdowa (BusinessPage)
    └── /katalog/podkarpackie/rzeszow/mechanika-pojazdowa

---

🎨 Design System - Industrial Minimalism

Zasady Projektowania

1. Kolorystyka:

   • Tło główne: bg-white (strony SaaS) lub bg-gray-900 (strony firm)
   • Tekst: text-gray-900 (jasne tło) lub text-white (ciemne tło)
   • CTA: bg-gray-900 text-white (wysoki kontrast)
   • Akcenty: text-green-500 (checkmarks), text-red-500 (problemy)

2. Typografia:

   • Font: System font (Inter/Geist) - font-family: system-ui, -apple-system, sans-serif
   • Nagłówki: text-4xl sm:text-5xl font-bold
   • Body: text-lg lub text-base

3. Spacing:

   • Sekcje: py-24 px-4 sm:px-6 lg:px-8 (utility class: .section-padding)
   • Karty: p-6 lub p-8
   • Gaps: gap-6 (grid), gap-4 (flex)

4. Zaokrąglenia:

   • Karty: rounded-xl
   • Przyciski: rounded-xl
   • Inputy: rounded-xl lub rounded-2xl

5. Cienie:

   • Karty: shadow-sm hover:shadow-lg
   • CTA: shadow-sm hover:shadow-md

---

📱 Instrukcja Testowania RWD (Responsive Web Design)

Narzędzia do Testowania

1. Chrome DevTools:

   • Otwórz Chrome → F12 (lub Cmd+Option+I na Mac)
   • Kliknij ikonę urządzenia (Toggle device toolbar) lub Cmd+Shift+M
   • Wybierz urządzenie z listy lub ustaw własne wymiary

2. Zalecane Rozdzielczości do Testowania:

   Urządzenie	Szerokość	Wysokość	Uwagi
   Mobile (iPhone SE)	375px	667px	Najmniejszy ekran
   Mobile (iPhone 12/13)	390px	844px	Standardowy mobile
   Tablet (iPad)	768px	1024px	Tablet portrait
   Tablet (iPad Pro)	1024px	1366px	Tablet landscape
   Desktop (Laptop)	1280px	720px	Standardowy laptop
   Desktop (Full HD)	1920px	1080px	Duży ekran

3. Breakpoints w Tailwind CSS:

   • sm: - 640px i więcej (tablet)
   • md: - 768px i więcej (tablet landscape)
   • lg: - 1024px i więcej (desktop)
   • xl: - 1280px i więcej (duży desktop)
   • 2xl: - 1536px i więcej (bardzo duży ekran)

Checklist Testowania RWD

Mobile (375px - 390px)

• Nawigacja przekształca się w hamburger menu
• Grid kart firm: 1 kolumna
• Teksty są czytelne (min. 16px)
• Przyciski CTA są wystarczająco duże (min. 44x44px)
• Formularze są łatwe do wypełnienia
• Zdjęcia są responsywne (nie wychodzą poza ekran)

Tablet (768px - 1024px)

• Grid kart firm: 2 kolumny
• Filtry województw układają się w 2-3 rzędy
• Sidebar (jeśli występuje) jest czytelny
• Formularze wykorzystują dostępną przestrzeń

Desktop (1280px+)

• Grid kart firm: 3 kolumny
• Filtry województw układają się w jeden rząd
• Wszystkie sekcje są wycentrowane (max-width)
• Białe przestrzenie są zachowane

Testowanie na Rzeczywistych Urządzeniach

1. iOS (iPhone/iPad):

   • Safari → Develop → [Twoje urządzenie] → [Strona]
   • Lub użyj narzędzia BrowserStack

2. Android:

   • Chrome → Menu → More tools → Remote devices
   • Lub użyj Android Studio Emulator

3. Testowanie Lokalne na Urządzeniu:

   # Uruchom dev server z dostępem z sieci lokalnej
   npm run dev -- --hostname 0.0.0.0
   # Następnie otwórz na telefonie: http://[IP-KOMPUTERA]:3001
   

---

🔗 Linki do Testowania (Lokalne)

Strona Główna

• http://localhost:3001/

Katalog

• http://localhost:3001/katalog
• http://localhost:3001/katalog/podkarpackie/rzeszow/wulkanizacja-opon
• http://localhost:3001/katalog/podkarpackie/rzeszow/mechanika-pojazdowa

Profil Firmy

• http://localhost:3001/subdomain/mechanik123

Dashboard

• http://localhost:3001/dashboard
• http://localhost:3001/dashboard/new
• http://localhost:3001/dashboard/strona-firmy

Inne

• http://localhost:3001/pricing

---

📝 Uwagi dla Grafika

1. Mock Data:

   • Wszystkie strony używają mock data (przykładowe dane)
   • Firma testowa: "Mechanik123"
   • Lokalizacja testowa: Rzeszów, Podkarpackie

2. Kolory:

   • Używaj tylko kolorów z Tailwind CSS (gray-50 do gray-900)
   • CTA zawsze: bg-gray-900 text-white
   • Akcenty: text-green-500 (sukces), text-red-500 (błąd)

3. Ikony:

   • Obecnie używane są emoji (📞, ✉️, 📍, ✓)
   • Można zastąpić ikonami SVG (np. Heroicons)

4. Zdjęcia:

   • Placeholder: /placeholder-logo.png
   • Przykładowe zdjęcia: Unsplash (już zintegrowane)

5. Fonty:

   • System font (Inter/Geist) - nie wymaga importu
   • Jeśli potrzebujesz custom font, dodaj do app/layout.tsx

---

✅ Status Wdrożenia

• Architektura danych (CompanyProfile + BusinessPage)
• Strona główna SaaS
• Katalog z filtrowaniem po województwach
• Dynamiczne strony biznesowe
• Profil główny firmy (subdomena)
• Dashboard do zarządzania
• Formularz tworzenia strony
• Panel edycji strony firmy
• Link do katalogu w stopce
• Nawigacja między stronami
• Mock data dla testów

---

🚀 Następne Kroki

1. Dla Grafika:

   • Przejrzyj wszystkie strony na różnych rozdzielczościach
   • Zaprojektuj finalne wersje zgodnie z Design System
   • Przygotuj assets (logo, ikony, zdjęcia)

2. Dla Developera:

   • Integracja z backend API (Open Mercato)
   • Implementacja rzeczywistego filtrowania
   • Dodanie autentykacji użytkowników

3. Dla Product Managera:

   • Testy użyteczności (UX)
   • Optymalizacja konwersji
   • Analiza metryk (Google Analytics)

---

Przygotował: AI Assistant (Senior Project Manager)
Data: 2026-01-XX
Wersja dokumentu: 1.0.0