# TROPO — Plan Strony WWW (Claude Code) ## Stack ``` Symfony 8.0 + PHP 8.4 + Twig + Tailwind CSS Baza: MySQL 5.6 (Doctrine ORM) Auth (admin): Symfony Security (form_login) Asset bundler: AssetMapper (bez Webpack) Hosting: dowolny VPS z PHP + MySQL (OVH, Mikrus, DigitalOcean) Domena: [twoja domena] ``` --- ## Struktura strony ``` / .......................... Landing page (hero + CTA) /postacie .................. Przedstawienie 4 postaci /postacie/scout ............ Scout — historia, galeria, styl misji /postacie/blitz ............ Blitz /postacie/nova ............. Nova /postacie/echo ............. Echo /manifest .................. Manifest Zdrowej Zabawy /cennik .................... Pricing (Free vs Premium) /kontakt ................... Formularz kontaktowy /blog ...................... Blog (SEO, content marketing) /pobierz ................... Linki do App Store / Google Play /admin ..................... Panel admina (chroniony hasłem) /admin/misje ............... Lista wszystkich misji /admin/misje/[id] .......... Podgląd + edycja misji /admin/statystyki .......... Podstawowe statystyki ``` --- ## Faza 1: Setup projektu ### Prompt: ``` Stwórz projekt Symfony 8.0 z PHP 8.4. symfony new tropo-web --webapp Zainstaluj/skonfiguruj: - Doctrine ORM z MySQL 5.6 (doctrine/doctrine-bundle) - Symfony Security (form_login do panelu admina) - Twig jako template engine - AssetMapper (symfony/asset-mapper) — bez Webpack/Encore - Tailwind CSS przez AssetMapper (symfonycasts/tailwind-bundle) - symfony/ux-twig-component (komponenty w Twig) - symfony/ux-turbo (Turbo Drive dla płynnej nawigacji bez przeładowań) Tailwind — custom kolory w tailwind.config.js: scout: "#4A90D9" blitz: "#FF6B35" nova: "#7B2D8E" echo: "#2D8E5E" cream: "#FFF8F0" dark: "#2D3436" Font: Inter lub Poppins z Google Fonts (w base.html.twig) Favicon: placeholder (litera T na gradiencie) Stwórz base.html.twig z: - Navbar (logo TROPO + linki: Postacie, Manifest, Cennik, Pobierz) - Footer (copyright, linki, social media placeholders) - Blok {% block body %}{% endblock %} - Responsywny, mobile-first Struktura kontrolerów: - HomeController (/) - CharacterController (/postacie, /postacie/{slug}) - ManifestController (/manifest) - PricingController (/cennik) - BlogController (/blog, /blog/{slug}) - DownloadController (/pobierz) - ContactController (/kontakt) - Admin/DashboardController (/admin) - Admin/MissionController (/admin/misje, /admin/misje/{id}) ``` --- ## Faza 2: Landing page ### Prompt: ``` Stwórz stronę główną templates/home/index.html.twig z następującymi sekcjami: SEKCJA 1 — HERO (pełny viewport) - Nagłówek: "Przygody czekają za drzwiami" - Podnagłówek: "TROPO zamienia Twój dom i park w teren przygody. Zagadki, eksperymenty, wyzwania — prowadzone przez 4 zwierzęcych przewodników." - Dwa przyciski CTA: "Pobierz za darmo" (primary) + "Zobacz jak działa" (secondary, scroll do sekcji) - Tło: gradient cream → biały, miejsce na hero image (placeholder 1920x600) SEKCJA 2 — JAK TO DZIAŁA (3 kroki) - Krok 1: "Wybierz przewodnika" — ikona 4 postaci, krótki opis - Krok 2: "Dostań misję" — ikona telefonu z dymkiem dialogowym - Krok 3: "Odłóż telefon i graj!" — ikona dziecka biegnącego na zewnątrz - Styl: 3 kolumny desktop, 1 kolumna mobile, ikony z Heroicons/Lucide SVG SEKCJA 3 — POZNAJ DRUŻYNĘ (preview 4 postaci) - 4 karty w rzędzie, każda z: - Placeholder na obrazek postaci (okrąg 200px) - Imię + gatunek (np. "Scout — Pies Tropiciel") - 1 zdanie opisu - Kolor obramowania per postać - Link "Poznaj mnie →" do /postacie/[slug] SEKCJA 4 — MANIFEST (skrót) - Cytat: "Telefon to kompas, nie cel." - 3 ikony z zasadami: - "3 min ekranu / 20 min przygody" - "Zero reklam. Nigdy." - "Razem, nie osobno." - Link "Czytaj cały Manifest →" do /manifest SEKCJA 5 — CENNIK (preview) - 2 karty: Free vs Tropo+ - Free: "2 misje dziennie, 4 postacie, zero reklam — na zawsze" - Tropo+: "19,99 zł/mies. — nielimitowane misje, specjalne przygody, dziennik" - CTA: "Zacznij za darmo" - Link "Porównaj plany →" do /cennik SEKCJA 6 — SOCIAL PROOF (na razie placeholder) - "Dołącz do rodzin, które odkrywają świat z TROPO" - Placeholder na opinie/recenzje (3 karty z cytatami) - Liczniki: "X misji ukończonych" / "X minut zabawy" (statyczne na start) SEKCJA 7 — CTA KOŃCOWY - "Gotowy na pierwszą przygodę?" - Przyciski: App Store + Google Play (placeholders, linki #) - Alternatywa: "Zostaw email — damy Ci znać gdy wystartujemy" (input + button) Animacje: sekcje fade-in on scroll (CSS animations + IntersectionObserver w małym JS przez Stimulus lub vanilla). Responsywny: mobile-first, wszystko wygląda dobrze na telefonie. ``` --- ## Faza 3: Strony postaci ### Prompt: ``` Stwórz stronę /postacie (templates/character/index.html.twig): - Grid 2x2 z kartami postaci - Każda karta: duży placeholder na obrazek, imię, gatunek, kolor tła, 2-3 zdania opisu - Hover: lekkie powiększenie, cień - Klik → /postacie/[slug] Stwórz dynamiczną stronę /postacie/[slug] (templates/character/show.html.twig): - Dane postaci w pliku src/DataFixtures/CharacterData.php (lub config/characters.yaml): const characters = [ { slug: "scout", name: "Scout", species: "Pies Tropiciel", color: "#4A90D9", emoji: "🐕", motto: "Każdy ślad opowiada historię.", personality: "Spokojny, analityczny, cierpliwy. Scout nigdy się nie spieszy — bo wie, że najlepsze tropy wymagają uwagi. Ma fenomenalny nos i oko do szczegółów. Jest jak najlepszy przyjaciel, który zawsze Cię wysłucha.", skills: ["Zagadki tekstowe", "Szukanie i obserwacja", "Rebusy i łamigłówki"], backstory: "Scout pamięta dzień, kiedy znalazł pierwszą mapę Tropo — była ukryta pod starym dębem w parku. Od tamtej pory nie przestaje tropić. Każde mieszkanie, każdy park to dla niego teren pełen zagadek. Nosi ze sobą lupę, która świeci na niebiesko gdy jest blisko rozwiązania. W kieszeniach kamizelki trzyma notatnik, w którym zapisuje każdy trop.", funFact: "Scout potrafi rozpoznać 300 różnych zapachów. Jego ulubiony? Zapach mokrej trawy po deszczu.", missionTypes: "Misje Scouta to detektywistyczne śledztwa. Szukasz ukrytych symboli, rozwiązujesz zagadki, łączysz poszlaki. Scout prowadzi Cię spokojnym głosem i nigdy nie daje gotowej odpowiedzi — pomaga Ci ją znaleźć samemu.", locations: ["Dom", "Park"], difficulty: ["Łatwy", "Średni"] }, { slug: "blitz", name: "Blitz", species: "Królik Sprinter", color: "#FF6B35", emoji: "🐇", motto: "Szybciej! Wyżej! Dalej!", personality: "Hiperaktywny, entuzjastyczny, głośny. Blitz nie potrafi stać w miejscu — zawsze coś się rusza. Mówi WIELKIMI LITERAMI i kończy zdania wykrzyknikami! Jest jak trener, który wierzy w Ciebie bardziej niż Ty sam.", skills: ["Wyzwania ruchowe", "Szukanie na czas", "Tory przeszkód"], backstory: "Blitz był NAJSZYBSZYM królikiem w Tropo — ale pewnego dnia odkrył, że szybkość to nie wszystko. Nauczył się, że prawdziwa siła to wytrwałość i współpraca. Mimo to — nadal biega WSZĘDZIE. Jego buty z błyskawicami to jego duma i radość. Mówi, że dają mu +10 do szybkości.", funFact: "Blitz raz przebiegł cały park w 47 sekund. Nikt nie wie, czy to prawda — bo nikt nie zdążył go zmierzyć.", missionTypes: "Misje Blitza to wyzwania fizyczne — sprinty, skoki, tory przeszkód, rzuty. Blitz krzyczy BIEGNIJ! i liczy do 15. Energia gwarantowana.", locations: ["Dom", "Park"], difficulty: ["Łatwy", "Średni"] }, { slug: "nova", name: "Nova", species: "Szop Wynalazca", color: "#7B2D8E", emoji: "🦝", motto: "A co jeśli spróbujemy TEGO?", personality: "Ciekawska, chaotyczna, entuzjastyczna. Nova nie widzi problemu — widzi eksperyment do przeprowadzenia. Jej laboratorium to cały dom. Mówi szybko, myśli jeszcze szybciej, a jej oczy świecą jak latarki gdy odkryje coś nowego.", skills: ["Eksperymenty naukowe", "Zadania matematyczne", "Budowanie i tworzenie"], backstory: "Nova znalazła swoje gogle na strychu — należały do legendarnego wynalazcy z Tropo. Od tamtej pory nie zdejmuje ich z głowy. Jej fartuch jest pokryty plamami z setek eksperymentów: wulkan z sody, niewidzialne pismo, telefon ze sznurka. Każda plama to wspomnienie.", funFact: "Nova zbudowała kiedyś katapultę z łyżki, która wystrzelił pompon na 4 metry. To nadal jej osobisty rekord.", missionTypes: "Misje Novy to eksperymenty i budowanie — wulkany z octu, łódki z papieru, telefony ze sznurka, zegary słoneczne. Bałagan gwarantowany, nauka w pakiecie.", locations: ["Dom", "Park"], difficulty: ["Łatwy", "Średni"] }, { slug: "echo", name: "Echo", species: "Żółw Mędrzec", color: "#2D8E5E", emoji: "🐢", motto: "Każde słowo ma swoją historię.", personality: "Mądry, cierpliwy, ciepły. Echo mówi powoli i z namysłem. Każde jego zdanie waży. Jest jak dziadek, który zawsze ma czas na opowieść. Nigdy się nie spieszy — bo wie, że najlepsze rzeczy wymagają czasu.", skills: ["Zadania ortograficzne", "Zagadki językowe", "Opowiadanie historii"], backstory: "Echo podróżuje po Tropo od tak dawna, że nikt nie pamięta kiedy zaczął. Na jego pancerzu widnieją wzory konstelacji — mówi, że każda to mapa innego miejsca, które odwiedził. W dzienniku zapisuje słowa, przysłowia i opowieści. Mówi, że słowa są jak nasiona — sadzisz je, a potem wyrastają z nich całe światy.", funFact: "Wzory na pancerzu Echo zmieniają się z porami roku. Zimą widać Oriona, latem — Wielki Wóz.", missionTypes: "Misje Echo to przygody ze słowami — szukanie liter, rymowanki, przysłowia, pisanie zdań, opowiadanie historii. Echo nie pogania — daje czas na myślenie.", locations: ["Dom", "Park"], difficulty: ["Łatwy", "Średni"] } ]; Na stronie postaci wyświetl: - Hero z kolorem postaci jako tło (gradient kolor → biały) - Placeholder na duży obrazek postaci (po lewej) - Po prawej: imię, gatunek, motto (w cudzysłowie, italic) - Sekcja "Osobowość" — tekst personality - Sekcja "Historia" — tekst backstory, stylizowany jak stara kartka/pergamin - Sekcja "Ciekawostka" — funFact w karcie z ikoną 💡 - Sekcja "Jakie misje?" — tekst missionTypes + lista skills jako badge'e - Sekcja "Lokalizacje" i "Trudność" jako małe tagi - Na dole: "Chcesz zagrać ze [imię]? → Pobierz TROPO" - Nawigacja: strzałki ← poprzednia postać / następna postać → ``` --- ## Faza 4: Manifest Zdrowej Zabawy ### Prompt: ``` Stwórz stronę /manifest (templates/manifest/index.html.twig): Pełna treść manifestu (wkleję ją poniżej). Stylizacja: - Hero: duży cytat "Telefon to kompas, nie cel." na tle gradientu - Sekcja zasad: 5 zasad, każda z: - Numer i tytuł (bold) - Opis (tekst) - Ikona ilustrująca zasadę (Heroicons/Lucide SVG) - Naprzemiennie: tekst po lewej/prawej, jak w storytellingu - Sekcja "Transparentność": - Infografika: "3 min ekranu vs 17 min przygody" (pasek proporcji, animowany) - "Zero reklam. Nigdy. Serio." - "Minimalne zbieranie danych — tylko to, co potrzebne do gry" - Sekcja "4 wersje manifestu": - Tabs: Pełna | Krótka (onboarding) | Prasowa (1 akapit) | Bio (1 zdanie) - Każdy tab to inna wersja tego samego tekstu - CTA na dole: "Zgadzasz się? Dołącz do TROPO." Treść manifestu: [TU WKLEJ CAŁY TEKST Z tropo_manifest.md] Design: ciepły, spokojny, dużo whitespace. Fonty: duże, czytelne. Nie krzykliwy — manifest to poważny dokument, nie reklama. ``` --- ## Faza 5: Cennik ### Prompt: ``` Stwórz stronę /cennik (templates/pricing/index.html.twig): Dwie karty cenowe obok siebie (mobile: jedna pod drugą): KARTA 1 — FREE (na zawsze) - Cena: "0 zł" - Kolor obramowania: szary - Lista: ✅ 2 misje dziennie, ✅ 4 postacie, ✅ Wszystkie lokalizacje, ✅ Podstawowe odznaki, ✅ Zero reklam - CTA: "Pobierz za darmo" KARTA 2 — TROPO+ (wyróżniona, border gradient) - Cena: "19,99 zł / miesiąc" + mniejszy tekst "lub 149,99 zł/rok (oszczędność 37%)" - Badge "Popularne" w rogu - Lista: ✅ Wszystko z Free, PLUS: ✅ Nielimitowane misje, ✅ Misje sezonowe (Halloween, Boże Narodzenie), ✅ Tryb drużynowy, ✅ Dziennik przygód (eksport PDF), ✅ Ekskluzywne odznaki, ✅ Priorytet wsparcia - CTA: "Wypróbuj 7 dni za darmo" Pod kartami: - FAQ (accordion): - "Czy mogę anulować w dowolnym momencie?" → Tak, zero zobowiązań. - "Co się stanie z moimi danymi po anulowaniu?" → Twoje odznaki i postępy zostają. - "Czy naprawdę nie ma reklam?" → Nigdy. To jest w naszym Manifeście. - "Dlaczego nie ma planu rodzinnego?" → Pracujemy nad tym! Na razie jedno konto = jedno dziecko. - "Czy mogę płacić rocznie?" → Tak, 149,99 zł/rok to 37% oszczędności. - Sekcja porównawcza: "Za cenę jednego wejścia na salę zabaw, Twoje dziecko ma przygody na cały miesiąc." ``` --- ## Faza 6: Blog + SEO ### Prompt: ``` Stwórz strukturę bloga: - templates/blog/index.html.twig — lista postów (karty z tytułem, datą, excerpt, placeholder na obrazek) - templates/blog/show.html.twig — pojedynczy post (markdown → HTML) - Posty w plikach .mdx w katalogu content/blog/ - Metadata SEO: title, description, og:image per post Stwórz 3 placeholder posty: 1. "Jak TROPO zamienia nudne popołudnie w przygodę" — opis produktu 2. "5 gier terenowych, które możesz zrobić z dzieckiem w parku" — content marketing 3. "Manifest Zdrowej Zabawy — dlaczego to napisaliśmy" — behind the scenes Każdy post: tytuł, data, excerpt, treść (lorem ipsum na start), tagi. ``` --- ## Faza 7: Panel admina — przeglądarka misji ### Prompt: ``` Stwórz panel admina chroniony przez Symfony Security (form_login). Login: /admin/login — email + hasło. Entity User z rolą ROLE_ADMIN. Stwórz użytkownika przez fixture lub komendę: php bin/console app:create-admin admin@tropo.app [hasło] Po zalogowaniu → /admin STRONA: /admin (templates/admin/dashboard.html.twig) - Dashboard z kafelkami: - Łączna liczba misji - Misje per postać (Scout: X, Blitz: X, Nova: X, Echo: X) - Misje per trudność (easy: X, medium: X) - Misje per lokalizacja (dom: X, park: X) STRONA: /admin/misje (templates/admin/mission/index.html.twig) - Tabela wszystkich misji z tropo_all_missions.json - Kolumny: ID, tytuł, postać, lokalizacja, trudność, wiek, kroków, status - Filtry: dropdown postać, lokalizacja, trudność - Wyszukiwarka: po tytule i ID - Status: "zatwierdzona" / "do sprawdzenia" / "odrzucona" (domyślnie: zatwierdzona) - Klik na wiersz → /admin/misje/[id] STRONA: /admin/misje/[id] (templates/admin/mission/show.html.twig) - Pełny podgląd misji w czytelnym formacie: - Nagłówek: tytuł, ID, postać (z kolorem), lokalizacja, trudność, wiek - Intro dialog w dymku (z kolorem postaci) - Instrukcje dla rodzica (rozwijane) - Każdy krok jako karta: - Numer kroku + tytuł - Dialog postaci (dymek) - Zagadka (wyróżniona) - Opcje odpowiedzi (jeśli choice) z zaznaczoną poprawną (zielona) - Podpowiedź (żółta) - Ciekawostka (niebieska) - Dialog sukcesu (zielony dymek) - Zakończenie: dialog + odznaka + XP - Na dole: przyciski statusu: ✅ Zatwierdź | ✏️ Do poprawki | ❌ Odrzuć - Pole na notatki (textarea) — np. "zagadka w kroku 2 za trudna dla 6-latka" STRONA: /admin/misje/[id]/edytuj (templates/admin/mission/edit.html.twig) - Formularz edycji misji: - Edytowalne pola: tytuł, intro_dialog, parent_instructions - Dla każdego kroku: character_dialog, riddle_text, answer, answer_options, hint, fun_fact, success_dialog - Zapis → aktualizuje dane w MySQL przez Doctrine (entity Mission z polami edytowalnymi) - Przycisk "Podgląd" obok "Zapisz" Dane misji: - Na start załaduj z pliku public/data/missions.json (skopiuj tropo_all_missions.json) — MissionService ładuje i parsuje - Statusy i notatki trzymaj w MySQL (Doctrine): - tabela mission_reviews: mission_id, status, notes, reviewed_at, reviewed_by - Endpoint: Admin/MissionController::review() — route /admin/misje/{id}/review (POST) — zapisuje status + notatki - Endpoint: Admin/MissionController::index() — route /admin/misje (GET) — zwraca wszystkie misje z dołączonymi statusami Panel admina powinien być CZYTELNY — to narzędzie do przeglądania 101 misji. Duże fonty, czytelne dymki, kolorowe karty per postać. ``` --- ## Faza 8: Strona "Pobierz" + Waitlista ### Prompt: ``` Stwórz stronę /pobierz (templates/download/index.html.twig): Jeśli app jest w App Store/Google Play: - Duże przyciski "Pobierz z App Store" i "Pobierz z Google Play" - QR code do pobrania (placeholder) - Screenshot z apki (placeholder 3 telefony obok siebie) Jeśli app jeszcze NIE jest wydana (MVP): - "TROPO startuje wkrótce!" - Formularz waitlisty: imię + email + przycisk "Powiadom mnie" - Zapisz do MySQL (tabela waitlist: id, name, email, created_at) - API route: /api/waitlist (POST) - Po zapisie: "Dziękujemy! Damy Ci znać jako pierwszemu." - Licznik: "Już X osób czeka na TROPO" (count z bazy) Na start użyj wersji waitlisty. Łatwo przełączyć na linki do sklepu potem. ``` --- ## Faza 9: SEO + Metadata + OG Images ### Prompt: ``` Dodaj do każdej strony odpowiednie metadata: - / → title: "TROPO — Przygody czekają za drzwiami", description: "Aplikacja, która zamienia Twój dom i park w teren przygody. Zagadki, eksperymenty, wyzwania dla dzieci 6-9 lat." - /postacie → "Poznaj drużynę TROPO — 4 zwierzęcych przewodników" - /postacie/scout → "Scout — Pies Tropiciel | TROPO" - /manifest → "Manifest Zdrowej Zabawy | TROPO" - /cennik → "Cennik TROPO — zacznij za darmo" - /blog → "Blog TROPO — porady dla rodziców" Dodaj: - og:image per strona (placeholder 1200x630) - Structured data (JSON-LD): Organization, Product, FAQ - Sitemap.xml (automatyczny z presta/sitemap-bundle) - robots.txt - Favicony: 16, 32, 180, 512px - manifest.json (PWA basic) — w public/ Zainstaluj presta/sitemap-bundle lub stwórz prosty SitemapController generujący XML. Dodaj meta tagi przez Twig block {% block meta %}{% endblock %} w base.html.twig. ``` --- ## Faza 10: Kontakt + Legal ### Prompt: ``` Stwórz stronę /kontakt: - Formularz: imię, email, temat (dropdown: pytanie, współpraca, bug, inne), wiadomość - Zapisz do MySQL (tabela contacts) - Endpoint: ContactController::submit() — route /kontakt/wyslij (POST) - Po wysłaniu: "Dziękujemy! Odpowiemy w ciągu 48h." Stwórz strony /regulamin i /prywatnosc: - Placeholder tekst z TODO do uzupełnienia przez prawnika - Regulamin: warunki korzystania z aplikacji - Polityka prywatności: RODO, jakie dane, jak długo, prawa użytkownika - Link do obu w footerze Footer na każdej stronie: - Logo TROPO - Linki: Postacie, Manifest, Cennik, Blog, Kontakt - Legal: Regulamin, Polityka prywatności - Social: Instagram, Facebook, YouTube (placeholder linki) - "© 2026 TROPO. Przygody czekają za drzwiami." ``` --- ## Pliki wejściowe (wrzuć do projektu) | Plik | Gdzie | Użycie | |---|---|---| | `tropo_all_missions.json` | `public/missions.json` | Panel admina | | `tropo_manifest.md` | `content/manifest.md` | Strona /manifest | | Wygenerowane grafiki postaci | `public/characters/` | Strony postaci, landing | | Logo TROPO | `public/logo.svg` | Navbar, footer | --- ## Kolejność w Claude Code 1. Setup projektu (Faza 1) 2. Landing page (Faza 2) — masz stronę do pokazania 3. Panel admina (Faza 7) — możesz przeglądać misje 4. Strony postaci (Faza 3) — content 5. Manifest (Faza 4) — content 6. Cennik (Faza 5) — monetyzacja 7. Pobierz/Waitlista (Faza 8) — zbieranie leadów 8. Blog (Faza 6) — SEO 9. SEO + Legal (Fazy 9-10) — polish Admina zrób WCZEŚNIE — przyda się do przeglądania i zatwierdzania misji zanim apka powstanie.