{"id":711,"date":"2026-05-06T12:33:21","date_gmt":"2026-05-06T12:33:21","guid":{"rendered":"https:\/\/www.labiryntywiary.pl\/?page_id=711"},"modified":"2026-05-12T12:22:49","modified_gmt":"2026-05-12T12:22:49","slug":"poznaj-llw-app","status":"publish","type":"page","link":"https:\/\/www.labiryntywiary.pl\/?page_id=711","title":{"rendered":"Poznaj LLW APP"},"content":{"rendered":"\n<!-- ==========================================\n     KOMPONENT: STRONA INSTRUKCJA LLW APP (Wizerunkowo-Sprzeda\u017cowa)\n     STYL: NEO-BRUTALISM \/ CATHOLIC SCOUTING\n=========================================== -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n                fontFamily: {\n                    sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n                    mono: ['\"Roboto Mono\"', 'monospace'],\n                },\n                colors: { brutal: { accent: '#4F46E5', red: '#DC2626', green: '#22C55E', yellow: '#EAB308', blue: '#3B82F6' } }\n            }\n        }\n    }\n<\/script>\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&family=Roboto+Mono:wght@400;700&display=swap');\n    .font-sans-brutal { font-family: 'Plus Jakarta Sans', sans-serif; }\n    \n    .neo-badge { border: 4px solid #000; border-radius: 1.5rem; box-shadow: 6px 6px 0px 0px #000; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }\n    .neo-badge:hover { transform: translateY(-6px); box-shadow: 12px 12px 0px 0px #000; }\n    \n    .neo-btn { border: 4px solid #000; border-radius: 1rem; box-shadow: 4px 4px 0px 0px #000; transition: all 0.15s ease-in-out; }\n    .neo-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px 0px #000; }\n    .neo-btn:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px 0px #000; }\n<\/style>\n\n<div class=\"font-sans-brutal bg-white min-h-screen pb-24 selection:bg-brutal-accent selection:text-white relative\">\n    <!-- Subtelna siatka w tle (Topografia Mapy) -->\n    <div class=\"absolute inset-0 z-0 opacity-40 pointer-events-none\" style=\"background-image: radial-gradient(#d1d5db 2px, transparent 2px); background-size: 32px 32px;\"><\/div>\n\n    <main class=\"max-w-7xl mx-auto px-4 md:px-6 xl:px-8 py-6 xl:py-12 relative\">\n        \n        <!-- HERO -->\n        <section class=\"mb-16 mt-0 text-center xl:text-left relative z-10\">\n            <span class=\"font-mono text-[10px] font-bold uppercase tracking-widest bg-brutal-accent text-white border-[3px] border-black inline-block px-4 py-1 mb-8 shadow-[4px_4px_0px_0px_#000]\">Cz\u0119\u015b\u0107 Cyfrowa Pakietu Formacyjnego<\/span>\n        <\/section>\n\n        <!-- G\u0141\u00d3WNA MAPA \/ O\u015a CZASU -->\n        <div class=\"max-w-5xl mx-auto relative z-10 mt-24\">\n            \n            <!-- Start Mapy -->\n            <div class=\"flex items-center gap-4 mb-4 ml-2 md:ml-4\">\n                <div class=\"w-8 h-8 bg-black border-[3px] border-black rounded-full flex items-center justify-center\">\n                    <div class=\"w-3 h-3 bg-white rounded-full animate-pulse\"><\/div>\n                <\/div>\n                <span class=\"font-mono text-xs font-bold uppercase tracking-widest text-black bg-white px-2 py-1 border-[2px] border-black\">Eksploracja Systemu<\/span>\n            <\/div>\n\n            <!-- 01: MOTYWACJA I GRYWALIZACJA -->\n            <section class=\"flex gap-4 md:gap-8 group\">\n                <!-- Waypoint (Znacznik mapy) -->\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-black text-white flex items-center justify-center font-black text-2xl md:text-3xl group-hover:bg-brutal-accent transition-colors z-10\">1<\/div>\n                    <div class=\"w-0 h-full border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <!-- Zawarto\u015b\u0107 -->\n                <div class=\"flex-1 pb-16 md:pb-24 pt-2 md:pt-3\">\n                    <h2 class=\"text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8 group-hover:text-brutal-accent transition-colors\">Wizualizacja Post\u0119p\u00f3w<\/h2>\n                    <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                        <div class=\"neo-badge p-6 md:p-8 bg-white flex flex-col justify-center\">\n                            <span class=\"font-mono text-[10px] font-bold bg-brutal-accent text-white px-3 py-1 mb-4 inline-block tracking-widest uppercase w-max border-[2px] border-black\">Interfejs U\u017cytkownika<\/span>\n                            <h3 class=\"text-2xl font-black uppercase mb-4 text-black border-b-[4px] border-black pb-4 tracking-tighter\">Osobista Tablica Osi\u0105gni\u0119\u0107<\/h3>\n                            <p class=\"text-base font-bold text-black leading-relaxed mb-6\">\n                                Dla ch\u0142opc\u00f3w aplikacja to cyfrowe \u015brodowisko, w kt\u00f3rym tradycyjne zadania formacyjne staj\u0105 si\u0119 <strong class=\"text-brutal-accent\">Sprawno\u015bciami (Odznakami)<\/strong> do odblokowania. Taka wizualna reprezentacja rozwoju zach\u0119ca ich do aktywno\u015bci.\n                            <\/p>\n                            <div class=\"bg-gray-50 p-4 border-[3px] border-black shadow-[4px_4px_0px_0px_#000]\">\n                                <span class=\"font-mono text-[10px] font-bold tracking-widest text-black uppercase\">PROGRES WIDOCZNY NA \u017bYWO<\/span>\n                                <p class=\"text-sm font-bold text-gray-900 mt-2\">Pasek post\u0119pu odlicza drog\u0119 do kolejnego awansu. Ministrant loguj\u0105c si\u0119 na swoim telefonie dok\u0142adnie wie, co musi jeszcze zrobi\u0107, by zdoby\u0107 nowy stopie\u0144.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"neo-badge bg-brutal-accent p-6 md:p-8 flex items-center justify-center relative overflow-hidden group\/card\">\n                            <div class=\"absolute inset-0 opacity-20\" style=\"background-image: radial-gradient(#fff 2px, transparent 2px); background-size: 20px 20px;\"><\/div>\n                            <div class=\"relative z-10 grid grid-cols-2 gap-4 w-full\">\n                                <div class=\"bg-white border-[4px] border-black shadow-[4px_4px_0px_0px_#000] p-4 text-center transform group-hover\/card:-translate-y-2 transition-transform\">\n                                    <div class=\"w-12 h-12 mx-auto rounded-full bg-brutal-green border-[3px] border-black mb-2\"><\/div>\n                                    <span class=\"font-black uppercase text-xs tracking-tighter\">O\u0142tarz<\/span>\n                                <\/div>\n                                <div class=\"bg-white border-[4px] border-black shadow-[4px_4px_0px_0px_#000] p-4 text-center transform group-hover\/card:translate-y-2 transition-transform\">\n                                    <div class=\"w-12 h-12 mx-auto rounded-full bg-brutal-blue border-[3px] border-black mb-2\"><\/div>\n                                    <span class=\"font-black uppercase text-xs tracking-tighter\">Zakrystia<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- 02: AUTOMATYZACJA I ODCI\u0104\u017bENIE -->\n            <section class=\"flex gap-4 md:gap-8 group\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-black text-white flex items-center justify-center font-black text-2xl md:text-3xl group-hover:bg-brutal-red transition-colors z-10\">2<\/div>\n                    <div class=\"w-0 h-full border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <div class=\"flex-1 pb-16 md:pb-24 pt-2 md:pt-3\">\n                    <h2 class=\"text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8 group-hover:text-brutal-red transition-colors\">Przejrzysta Kwalifikacja<\/h2>\n                    \n                    <div class=\"neo-badge p-6 md:p-10 bg-gray-50 text-black flex flex-col lg:flex-row gap-8 relative\">\n                        <div class=\"flex-1\">\n                            <span class=\"font-mono text-[10px] font-bold bg-brutal-red text-white px-3 py-1 mb-4 inline-block tracking-widest uppercase border-[2px] border-black\">System Weryfikacji<\/span>\n                            <h3 class=\"text-2xl md:text-3xl font-black uppercase mb-6 text-black tracking-tighter\">Obiektywny Modu\u0142 Testowy<\/h3>\n                            <p class=\"text-base md:text-lg font-bold text-black leading-relaxed mb-6\">\n                                Modu\u0142 pomaga w kwalifikacji na kolejne stopnie, zapewniaj\u0105c przejrzysto\u015b\u0107 i sprawiedliwo\u015b\u0107 dla ca\u0142ej grupy. Oparty na wiedzy zawartej w drukowanych Zeszytach Formacyjnych, generuje kr\u00f3tkie pytania sprawdzaj\u0105ce teori\u0119 przed ka\u017cdym awansem.\n                            <\/p>\n                            <ul class=\"space-y-4 font-mono text-[10px] sm:text-xs font-bold text-gray-900 tracking-widest uppercase\">\n                                <li class=\"flex items-center gap-3\"><span class=\"text-white bg-brutal-green border-[2px] border-black px-2 py-0.5 shadow-[2px_2px_0px_0px_#000]\">\u2714<\/span> Filar 1: Zaliczenie sprawno\u015bci (Aplikacja)<\/li>\n                                <li class=\"flex items-center gap-3\"><span class=\"text-white bg-brutal-green border-[2px] border-black px-2 py-0.5 shadow-[2px_2px_0px_0px_#000]\">\u2714<\/span> Filar 2: Test Wiedzy Teoretycznej (Aplikacja)<\/li>\n                                <li class=\"flex items-center gap-3\"><span class=\"text-black bg-white border-[2px] border-black px-2 py-0.5 shadow-[2px_2px_0px_0px_#000]\">\u2714<\/span> Filar 3: Weryfikacja Praktyczna (Przy o\u0142tarzu)<\/li>\n                            <\/ul>\n                        <\/div>\n                        \n                        <div class=\"w-full lg:w-1\/3 bg-white p-6 border-[4px] border-black text-black flex flex-col justify-center shadow-[6px_6px_0px_0px_#DC2626]\">\n                            <span class=\"bg-black text-white font-mono tracking-widest uppercase px-2 py-1 inline-block w-max text-[10px] mb-4\">Ostatnie S\u0142owo<\/span>\n                            <h4 class=\"font-black uppercase tracking-tighter text-xl mb-3\">Filar 4: Mentor<\/h4>\n                            <p class=\"font-mono text-[10px] sm:text-xs font-bold text-gray-900 leading-relaxed uppercase tracking-widest\">\n                                Gdy system potwierdzi teori\u0119, a Ty zweryfikujesz technik\u0119, aplikacja poprosi Ci\u0119 o refleksj\u0119 nad postaw\u0105 kandydata. To Ty ostatecznie zatwierdzasz awans jako Mentor.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- 03: TABLICA POST\u0118P\u00d3W -->\n            <section class=\"flex gap-4 md:gap-8 group\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-black text-white flex items-center justify-center font-black text-2xl md:text-3xl group-hover:bg-brutal-yellow group-hover:text-black transition-colors z-10\">3<\/div>\n                    <div class=\"w-0 h-full border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <div class=\"flex-1 pb-16 md:pb-24 pt-2 md:pt-3\">\n                    <h2 class=\"text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8 group-hover:text-brutal-yellow transition-colors\">Tablica Post\u0119p\u00f3w Wsp\u00f3lnoty<\/h2>\n                    <div class=\"neo-badge p-6 md:p-8 bg-white text-black flex flex-col lg:flex-row items-center gap-8 lg:gap-10 border-[4px]\">\n                        <div class=\"flex-1 relative z-10\">\n                            <span class=\"font-mono text-[10px] font-bold bg-gray-100 text-black px-3 py-1 tracking-widest uppercase border-[2px] border-black mb-4 inline-block shadow-[2px_2px_0px_0px_#000]\">Centrum Lidera<\/span>\n                            <p class=\"text-base md:text-lg font-bold text-black leading-relaxed mb-6 mt-2\">\n                                Serce aplikacji i interaktywne zestawienie. Jednym spojrzeniem oceniasz stan formacji ca\u0142ej grupy i sprawnie ni\u0105 zarz\u0105dzasz.\n                            <\/p>\n                            <ul class=\"space-y-4 font-mono text-[10px] md:text-xs font-bold uppercase tracking-widest\">\n                                <li class=\"flex items-center gap-3\"><div class=\"w-4 h-4 bg-gray-100 border-[2px] border-black rounded-none shrink-0\"><\/div> Nierozpocz\u0119te wyzwania<\/li>\n                                <li class=\"flex items-center gap-3\"><div class=\"w-4 h-4 bg-brutal-yellow border-[2px] border-black rounded-none shrink-0\"><\/div> Wyzwania &#8222;W Trakcie&#8221;<\/li>\n                                <li class=\"flex items-center gap-3\"><div class=\"w-4 h-4 bg-brutal-blue border-[2px] border-black rounded-none shrink-0\"><\/div> Odznaki Zdobyte<\/li>\n                            <\/ul>\n                        <\/div>\n                        \n                        <div class=\"w-full lg:w-1\/3 bg-brutal-accent p-5 border-[4px] border-black shadow-[4px_4px_0px_0px_#000] z-10\">\n                            <h3 class=\"font-black uppercase tracking-tighter text-xl mb-4 text-white\">Praca Masowa \u26a1<\/h3>\n                            <p class=\"font-mono text-[10px] sm:text-xs font-bold text-white\/90 leading-relaxed mb-2 uppercase tracking-wider\">\n                                Nie tra\u0107 czasu na wyklikiwanie pojedynczych os\u00f3b. Zaznacz ca\u0142\u0105 grup\u0119 jednym klikni\u0119ciem z poziomu Modu\u0142u Agendy (np. za obecno\u015b\u0107 na zbi\u00f3rce). Dodatkowo z \u0142atwo\u015bci\u0105 generujesz arkusz do druku (Print CSS).\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- 04: PUNKTY (Jak to dzia\u0142a) -->\n            <section class=\"flex gap-4 md:gap-8 group\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-black text-white flex items-center justify-center font-black text-2xl md:text-3xl group-hover:bg-brutal-blue transition-colors z-10\">4<\/div>\n                    <div class=\"w-0 h-full border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <div class=\"flex-1 pb-16 md:pb-24 pt-2 md:pt-3\">\n                    <h2 class=\"text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8 group-hover:text-brutal-blue transition-colors\">Punkty z Materia\u0142\u00f3w<\/h2>\n                    <div class=\"neo-badge p-6 md:p-8 bg-white flex flex-col md:flex-row gap-8 items-start\">\n                        <div class=\"flex-1\">\n                            <p class=\"text-base font-bold text-black leading-relaxed mb-6\">\n                                Aplikacja cyfrowa jest integralnym uzupe\u0142nieniem materia\u0142\u00f3w drukowanych. Zamawiaj\u0105c Zeszyty Formacyjne, na instrukcji wewn\u0105trz znajdziesz kod QR. Po wype\u0142nieniu formularza weryfikacyjnego otrzymasz jednorazowy kod aktywacyjny odpowiadaj\u0105cy liczbie nabytych podr\u0119cznik\u00f3w.\n                            <\/p>\n                            <ul class=\"space-y-3 font-mono text-[10px] md:text-xs font-bold tracking-widest uppercase\">\n                                <li class=\"flex justify-between items-center border-b-2 border-gray-100 pb-2\">\n                                    <span>Kandydat<\/span>\n                                    <span class=\"bg-black text-white px-2 py-1 border-[2px] border-black\">KOSZT: 1 PKT<\/span>\n                                <\/li>\n                                <li class=\"flex justify-between items-center border-b-2 border-gray-100 pb-2\">\n                                    <span>Ministrant (B)<\/span>\n                                    <span class=\"bg-black text-white px-2 py-1 border-[2px] border-black\">KOSZT: 2 PKT<\/span>\n                                <\/li>\n                                <li class=\"flex justify-between items-center\">\n                                    <span class=\"text-brutal-red\">Lektor \/ Cer.<\/span>\n                                    <span class=\"bg-brutal-red text-white px-2 py-1 border-[2px] border-black\">KOSZT: 3 PKT<\/span>\n                                <\/li>\n                            <\/ul>\n                        <\/div>\n                        <div class=\"w-full md:w-1\/3 bg-gray-100 border-[3px] border-black p-4 mt-auto shadow-[4px_4px_0px_0px_#000]\">\n                            <h4 class=\"font-black uppercase tracking-tighter text-sm mb-2 text-black\">Generator Masowy<\/h4>\n                            <p class=\"font-mono text-[10px] font-bold text-gray-900 leading-relaxed uppercase tracking-wider\">\n                                Tworzenie kont jest proste. Wklejasz list\u0119 z nazwiskami, a system na podstawie zdobytych punkt\u00f3w sam generuje gotowe has\u0142a startowe dla podopiecznych.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- 05: KREATOR -->\n            <section class=\"flex gap-4 md:gap-8 group\/kreator\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-black text-white flex items-center justify-center font-black text-2xl md:text-3xl group-hover:bg-white group-hover:text-black transition-colors z-10 shadow-[0px_0px_0px_0px_#000] group-hover:shadow-[4px_4px_0px_0px_#000]\">5<\/div>\n                    <div class=\"w-0 h-full border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <div class=\"flex-1 pb-16 md:pb-24 pt-2 md:pt-3\">\n                    <h2 class=\"text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8\">Kreator 100% W\u0142asny<\/h2>\n                    <div class=\"neo-badge p-6 md:p-8 bg-brutal-red text-white flex flex-col lg:flex-row items-center justify-between gap-8 relative overflow-hidden\">\n                        <div class=\"absolute -right-10 -bottom-10 opacity-20 transform rotate-12 group-hover\/kreator:rotate-45 transition-transform duration-500\">\n                            <svg width=\"200\" height=\"200\" viewBox=\"0 0 100 100\"><polygon points=\"50,10 90,90 10,90\" fill=\"currentColor\" stroke=\"black\" stroke-width=\"4\"\/><\/svg>\n                        <\/div>\n                        <div class=\"relative z-10 flex-1\">\n                            <p class=\"text-base md:text-lg font-bold text-white\/90 leading-relaxed mb-4\">\n                                Chcesz stworzy\u0107 wyzwanie specyficzne dla Twojej parafii (np. <em>Pomoc przy stajence<\/em>)? Kreator zbudowany zgodnie z logik\u0105 Technicznego Brutalizmu na to pozwala.\n                            <\/p>\n                        <\/div>\n                        <div class=\"w-full lg:w-1\/3 bg-white text-black border-[4px] border-black p-4 relative z-10 shadow-[6px_6px_0px_0px_#000] transform rotate-1\">\n                            <p class=\"font-mono text-[10px] md:text-xs font-bold leading-relaxed uppercase tracking-widest\">\n                                Wybierz dzia\u0142, stw\u00f3rz checklist\u0119. System natychmiast wygeneruje na \u017cywo czyst\u0105 wektorow\u0105 odznak\u0119 SVG (Matematyka figury).\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- 06: BENTO DODATKI (Meta Mapy) -->\n            <section class=\"flex gap-4 md:gap-8 group\/bento\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-white text-black flex items-center justify-center font-black text-2xl md:text-3xl z-10 shadow-[4px_4px_0px_0px_#000]\">+<\/div>\n                    <div class=\"w-0 h-16 border-l-[4px] border-dashed border-gray-300 mt-2 mb-2 group-hover:border-black transition-colors duration-500\"><\/div>\n                <\/div>\n                <div class=\"flex-1 pb-16 pt-2 md:pt-3\">\n                    <h2 class=\"text-2xl md:text-4xl font-black uppercase tracking-tighter break-words mb-8\">Pozosta\u0142e Narz\u0119dzia<\/h2>\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n                        <div class=\"neo-badge p-5 bg-white flex flex-col hover:bg-brutal-yellow transition-colors group\">\n                            <h3 class=\"font-black uppercase tracking-tighter text-lg mb-2\">Ranking Parafii \ud83e\udd47<\/h3>\n                            <p class=\"font-mono text-[9px] sm:text-[10px] font-bold text-gray-900 leading-relaxed uppercase tracking-wider flex-grow\">\n                                Zestawienie najlepszych. System wyr\u00f3\u017cnia TOP 3 na wizualnym podium. Mo\u017cesz wygenerowa\u0107 plakat i powiesi\u0107 go w zakrystii!\n                            <\/p>\n                        <\/div>\n                        <div class=\"neo-badge p-5 bg-white flex flex-col hover:border-brutal-blue group\">\n                            <h3 class=\"font-black uppercase tracking-tighter text-lg mb-2\">Agenda \ud83d\udcc5<\/h3>\n                            <p class=\"font-mono text-[9px] sm:text-[10px] font-bold text-gray-900 leading-relaxed uppercase tracking-wider flex-grow\">\n                                Wbudowany kalendarz spotka\u0144 i zbi\u00f3rek. Aktywuj sprawno\u015bci masowo wszystkim uczestnikom jednym klikni\u0119ciem.\n                            <\/p>\n                        <\/div>\n                        <div class=\"neo-badge p-5 bg-white flex flex-col hover:bg-gray-100 group\">\n                            <h3 class=\"font-black uppercase tracking-tighter text-lg mb-2\">Tablica Og\u0142osze\u0144 \ud83d\udcac<\/h3>\n                            <p class=\"font-mono text-[9px] sm:text-[10px] font-bold text-gray-900 leading-relaxed uppercase tracking-wider flex-grow\">\n                                Szybki komunikator. Dodawaj pilne informacje o dy\u017curach, kt\u00f3re natychmiast wy\u015bwietl\u0105 si\u0119 ch\u0142opcom na pulpitach.\n                            <\/p>\n                        <\/div>\n                        <div class=\"neo-badge p-5 bg-white flex flex-col group\">\n                            <h3 class=\"font-black uppercase tracking-tighter text-lg mb-2\">Katalog Sprawno\u015bci \ud83d\udcda<\/h3>\n                            <p class=\"font-mono text-[9px] sm:text-[10px] font-bold text-gray-900 leading-relaxed uppercase tracking-wider flex-grow\">\n                                Pe\u0142na baza wiedzy o dost\u0119pnych odznakach wraz z opisami. Zabezpieczona znakiem wodnym przed nieautoryzowanym kopiowaniem.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ZAKO\u0143CZENIE MAPY (CTA) -->\n            <section class=\"flex gap-4 md:gap-8\">\n                <div class=\"w-12 md:w-16 shrink-0 flex flex-col items-center\">\n                    <div class=\"w-12 h-12 md:w-16 md:h-16 border-[4px] border-black rounded-full bg-brutal-green text-black flex items-center justify-center font-black text-2xl md:text-3xl z-10 shadow-[4px_4px_0px_0px_#000]\">\u2714<\/div>\n                <\/div>\n                <div class=\"flex-1 pb-12 pt-0 md:pt-1\">\n                    <div class=\"neo-badge p-8 md:p-12 bg-white relative overflow-hidden\">\n                        <div class=\"absolute inset-0 opacity-5\" style=\"background-image: radial-gradient(#000 2px, transparent 2px); background-size: 24px 24px;\"><\/div>\n                        \n                        <div class=\"relative z-10 text-center\">\n                            <span class=\"font-mono text-[10px] md:text-xs font-bold uppercase tracking-widest text-black mb-4 block border-[3px] border-black bg-brutal-yellow px-4 py-2 w-max mx-auto shadow-[4px_4px_0px_0px_#000]\">Narz\u0119dzie zintegrowane w 100% z materia\u0142ami<\/span>\n                            <h2 class=\"text-3xl md:text-5xl xl:text-6xl font-black uppercase tracking-tighter mb-8 leading-none\">\n                                Przekszta\u0142\u0107 rutyn\u0119 <br>we wci\u0105gaj\u0105c\u0105 Formacj\u0119\n                            <\/h2>\n                            <p class=\"text-sm md:text-base font-bold text-black mb-10 max-w-2xl mx-auto\">\n                                Aplikacja Liturgiczne Labirynty Wiary nie funkcjonuje w oderwaniu. Odblokujesz do niej dost\u0119p zamawiaj\u0105c Zeszyty Formacyjne dla swojej s\u0142u\u017cby liturgicznej. Oszcz\u0119dzasz czas, podnosisz jako\u015b\u0107 i dajesz ch\u0142opakom to, co lubi\u0105 najbardziej \u2013 grywalizacj\u0119.\n                            <\/p>\n                            \n                            <div class=\"flex flex-col sm:flex-row items-center justify-center gap-6\">\n                                <a href=\"https:\/\/www.labiryntywiary.pl\/?page_id=653\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-brutal-red text-white font-black uppercase text-sm md:text-base tracking-widest neo-btn px-8 py-5 hover:bg-black transition-colors shadow-[6px_6px_0px_0px_#000]\">\n                                    ZAMAWIAM MATERIA\u0141Y\n                                <\/a>\n                                <a href=\"https:\/\/www.labiryntywiary.pl\/?page_id=687\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-white text-black font-black uppercase text-xs md:text-sm tracking-widest neo-btn px-8 py-5 hover:bg-gray-100 transition-colors\">\n                                    Mam ju\u017c Kod &#8211; Aktywuj\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n        <\/div>\n    <\/main>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Cz\u0119\u015b\u0107 Cyfrowa Pakietu Formacyjnego Eksploracja Systemu 1 Wizualizacja Post\u0119p\u00f3w Interfejs U\u017cytkownika Osobista Tablica Osi\u0105gni\u0119\u0107 Dla ch\u0142opc\u00f3w aplikacja to cyfrowe \u015brodowisko, w kt\u00f3rym tradycyjne zadania formacyjne staj\u0105 si\u0119 Sprawno\u015bciami (Odznakami) do odblokowania. Taka wizualna reprezentacja rozwoju zach\u0119ca ich do aktywno\u015bci. PROGRES WIDOCZNY NA \u017bYWO Pasek post\u0119pu odlicza drog\u0119 do kolejnego awansu. Ministrant loguj\u0105c si\u0119 na swoim [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-711","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=711"}],"version-history":[{"count":12,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/711\/revisions"}],"predecessor-version":[{"id":729,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/711\/revisions\/729"}],"wp:attachment":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}