<!-- ========================================================================== SEKCJA: NAWIGACJA + HERO Korzysta z klas z mistrzowie-copilota-style-guide.css: .navbar, .navbar-links, .btn / .btn-primary / .btn-secondary / .btn-sm, .eyebrow, .h1, .text-violet, .text-lead, .text-body, .h3, .card-tile, .container Style specyficzne dla layoutu Hero (grid, avatary, kafelki) są w osobnym pliku hero-addon.css - dołącz go PO głównym style guide. ========================================================================== --> <style> .teams-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .teams-modal-overlay.is-open { display: flex !important; } .teams-modal-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(4px); cursor: pointer; } .teams-modal-container { position: relative !important; z-index: 2 !important; background: #ffffff !important; border-radius: 16px !important; width: 100% !important; max-width: 640px !important; max-height: 90vh !important; overflow-y: auto !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; padding: 36px 24px 24px !important; box-sizing: border-box !important; } .teams-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #f3f4f6 !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #374151 !important; cursor: pointer !important; transition: background-color 0.2s, color 0.2s !important; z-index: 10 !important; } .teams-modal-close:hover { background: #e5e7eb !important; color: #111827 !important; } .teams-modal-content { width: 100% !important; min-height: 200px !important; } </style> <div style="background-image: url('/files/pages/assets/2026-08-11/e191953535bf67cd17f8e1dfc01902f8268647f0_mson6onq.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;"> <header style="padding: 32px 0 0;"> <div class="container"> <nav class="navbar"> <a href="/" class="navbar-logo"> <img src="/files/pages/assets/2026-08-11/logo-1_msomw4yn.png" alt="Mistrzowie Copilota" height="36"> </a> <div class="navbar-links"> <a href="#prowadzacy" class="text-nav">Prowadzący</a> <a href="#program" class="text-nav">Program</a> <a href="#jak-to-dziala" class="text-nav">Jak to działa?</a> <a href="#oferta" class="text-nav">Oferta</a> <a href="#zespoly" class="text-nav btn-dla-zespolow" onclick="if(window.openTeamsModal){window.openTeamsModal(event); return false;}">Dla zespołów</a> <a href="#faq" class="text-nav">FAQ</a> <a href="#demo" class="text-nav">Materiały Demo</a> </div> <a href="#zapisy" class="btn btn-primary btn-sm">Dołącz teraz</a> </nav> </div> </header> <section class="hero" style="background: transparent;"> <div class="container hero-grid"> <div class="hero-content"> <p class="eyebrow">Start Mistrzów Copilota - program adopcji Microsoft 365 Copilot dla firm</p> <h1 class="h1 hero-title"> Macie licencje Copilota. Zróbmy z nich <span class="text-violet">codzienne narzędzie pracy zespołu.</span> </h1> <p class="text-lead"> Większość pracowników dostaje dostęp do Copilota i zostaje z tym bez wsparcia. Otwierają, wpisują, coś nie wychodzi, zamykają. Uczymy pracowników waszej firmy pracować z Copilotem na ich własnych zadaniach, dział po dziale. Nie zostajesz z tym w pojedynkę. </p> <p class="text-lead"> Nasz program uczy Twoich pracowników pracy z Copilotem metodą KREDO, opracowaną by Mateusza Cisowskiego i Aleksandrę Piskorz. To samodzielny kurs online dla całej firmy, w którym każdy dział uczy się Copilota na swoich realnych zadaniach. </p> <div class="hero-social-proof"> <div class="hero-avatars"> <img src="avatar-1.jpg" alt="" class="hero-avatar"> <img src="avatar-2.jpg" alt="" class="hero-avatar"> <img src="avatar-3.jpg" alt="" class="hero-avatar"> </div> <p class="hero-social-proof-text"> Tworzony z potrzeby, konsultowany z firmami, które ten problem znają. </p> </div> <div class="hero-actions"> <a href="#zapisy" class="btn btn-primary">Dołącz do Mistrzów</a> <a href="#program" class="btn btn-secondary">Poznaj program</a> </div> </div> <div class="hero-media"> <img src="/files/pages/assets/2026-08-11/50ec3e5e1bbef5ecc5d25e607118efca4e4b5985_msomw5hb.png" alt="Zespół pracujący razem z Copilotem" class="hero-image"> </div> </div> <div class="container hero-tiles" style="padding-bottom: 40px;"> <div class="card-tile"> <img src="/files/pages/assets/2026-08-12/group-821_mspz3v6i.webp" alt="" class="card-tile-icon"> <p class="text-body"> Tworzony na podstawie potrzeb rynku i ludzi, którzy pracują z Copilotem. </p> </div> <div class="card-tile"> <img src="/files/pages/assets/2026-08-12/group_mspz3vdo.webp" alt="" class="card-tile-icon"> <div class="hero-tile-date"> <p class="text-body">Start:</p> <p class="h3 hero-date-value">2 września 2026</p> </div> </div> <div class="card-tile"> <img src="/files/pages/assets/2026-08-12/group-820_mspz3vat.webp" alt="" class="card-tile-icon"> <p class="text-body"> Zbudowany na ponad 100+ rozmowach z ludźmi, którzy w firmach mają Copilota i z niego nie korzystają. </p> </div> </div> </section> </div> <!-- Modal dla zespołów --> <div id="teams-modal" class="teams-modal-overlay" aria-hidden="true"> <div class="teams-modal-backdrop" onclick="if(window.closeTeamsModal) window.closeTeamsModal(event)"></div> <div class="teams-modal-container" role="dialog" aria-modal="true"> <button type="button" class="teams-modal-close" onclick="if(window.closeTeamsModal) window.closeTeamsModal(event)" aria-label="Zamknij"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> <div class="teams-modal-content"> <div id="lead-form-slot"></div> <script src="https://superform.brave.courses/embed-lead-form.js" data-form-url="https://superform.brave.courses/embed/lead-form?no_background=1" data-target-id="lead-form-slot" data-brand="copilota" data-no-background="true" ></script> </div> </div> </div> <script> (function() { window.openTeamsModal = function(e) { if (e) { if (typeof e.preventDefault === 'function') e.preventDefault(); if (typeof e.stopPropagation === 'function') e.stopPropagation(); } var modal = document.getElementById('teams-modal'); if (modal) { modal.classList.add('is-open'); modal.style.setProperty('display', 'flex', 'important'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; } return false; }; window.closeTeamsModal = function(e) { if (e) { if (typeof e.preventDefault === 'function') e.preventDefault(); if (typeof e.stopPropagation === 'function') e.stopPropagation(); } var modal = document.getElementById('teams-modal'); if (modal) { modal.classList.remove('is-open'); modal.style.setProperty('display', 'none', 'important'); modal.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } return false; }; document.addEventListener('click', function(e) { var link = e.target.closest('a[href="#zespoly"], .btn-dla-zespolow'); if (link) { e.preventDefault(); e.stopPropagation(); window.openTeamsModal(e); } }, true); document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { window.closeTeamsModal(e); } }); })(); </script>
<!-- ========================================================================== SEKCJA: LICENCJA TO NIE TO SAMO CO ADOPCJA Korzysta z klas ze style guide: .section, .container, .card, .h2-lg, .text-violet, .text-lead Style layoutowe (podział na zdjęcie + tekst) są w intro-split-addon.css ========================================================================== */--> <section class="section"> <div class="container"> <div class="card intro-split"> <div class="intro-split-media"> <img src="/files/pages/assets/2026-08-11/b98369bfc528e3c6c256fcb066dde593bcfa16a6_msona2yc.webp" alt="Opinie i obawy pracowników dotyczące korzystania z Copilota" class="intro-split-image" > </div> <div class="intro-split-content"> <h2 class="h2-lg"> Licencja<br> to nie to samo <span class="text-violet">co adopcja</span> </h2> <p class="text-lead"> Copilot pojawia się w Teams, Outlooku i Wordzie z dnia na dzień. Nikt nie pokazuje pierwszego kroku. Ludzie próbują raz czy dwa, coś nie wychodzi, wracają do starego sposobu. To nie kwestia dobrej woli ani zdolności. Nikt im nie pokazał, jak zacząć. </p> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: ZANIM POKAŻEMY PROGRAM (CTA story) Korzysta z klas ze style guide: .container, .h2-lg, .text-violet, .text-lead, .btn / .btn-secondary Style layoutowe (tło, boczne ilustracje, pływające ikony, wycentrowanie) są w cta-story-addon.css ========================================================================== --> <section class="cta-story" style="background-image: url('/files/pages/assets/2026-08-11/e191953535bf67cd17f8e1dfc01902f8268647f0_msonhztv.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;"> <div class="cta-story-media cta-story-media-left"> <img src="/files/pages/assets/2026-08-11/94252a24a390baeff28c084c90dd4262c94d39cc_msoniqcj.webp" alt="Mateusz Cisowski - prowadzący" aria-hidden="true"> <!-- Pływająca ikona Copilota przypisana do Mateusza --> <img src="/files/pages/assets/2026-08-11/312cd49abd3455625c4d927014c56248324442e1_msonk9pq.webp" class="floating-icon floating-icon-left" alt="Copilot Icon" aria-hidden="true"> </div> <div class="cta-story-media cta-story-media-right"> <img src="/files/pages/assets/2026-08-11/39f7084c8b37b4d3aa53496f01deda9bd4d40287_msonjkwa.webp" alt="Aleksander Piskorz - prowadzący" aria-hidden="true"> <!-- Pływająca ikona Outlook Copilot przypisana do Aleksandra --> <img src="/files/pages/assets/2026-08-11/ad5b9486e80ee501c5cd83c403af4502c8c0f0bc_msonk9hz.webp" class="floating-icon floating-icon-right" alt="Outlook Copilot Icon" aria-hidden="true"> </div> <div class="container cta-story-content"> <div class="cta-story-text"> <h2 class="h2-lg"> Zanim pokażemy program, dwa słowa o tym, <span class="text-violet">skąd się wziął</span> </h2> <p class="text-lead"> Zaczęliśmy <strong>od ponad 100+ rozmów z ludźmi, którzy mieli Copilota</strong> w firmie i z niego nie korzystali. Pytaliśmy, co ich zatrzymało. Prawie nigdy nie chodziło o samo narzędzie. Chodziło o to, że <strong>nikt nie pokazał pierwszego kroku na ich własnej pracy.</strong> </p> <p class="text-lead"> <strong>Słuchaliśmy ludzi w konkretnych rolach, dział po dziale.</strong> Na ich codziennych zadaniach, nie na przykładach z prezentacji. Wiemy, co działa u technologa z długim stażem. Wiemy też, czego nie robić u handlowca, który boi się, że coś zepsuje. </p> <p class="text-lead"> Jeśli odpowiadasz za wdrożenie Copilota u siebie, to <strong>prawdopodobnie znasz to uczucie:</strong> licencje są, oczekiwania są, a wsparcia brak. <strong>Właśnie dla ciebie jest ta strona i ten program.</strong> </p> </div> <a href="#zapisy" class="btn btn-secondary">Zamów program dla firmy</a> </div> </section>
<!-- ========================================================================== SEKCJA: ZNASZ TO? / Z NAMI WYGLĄDA TO TAK (karty porównawcze) Korzysta z klas ze style guide: .section, .container, .card, .card-soft, .h2-lg, .h2, .text-violet, .text-body, .list-item. Ikony (.icon-badge / .icon-badge--arrow / .icon-badge--check) to inline SVG z poświatą przez CSS drop-shadow - zdefiniowane w compare-addon.css, NIE w głównym style guide. Style layoutowe (dwie kolumny, wewnętrzne odstępy) są w compare-addon.css ========================================================================== --> <section class="section"> <div class="container compare"> <h2 class="h2-lg compare-heading"> Tak zwykle wygląda wdrożenie Copilota.<br> <span class="text-violet">I tak może wyglądać u was.</span> </h2> <div class="card compare-wrap"> <!-- Kolumna "przed" - stan bez programu --> <div class="compare-col compare-col-before"> <h3 class="h2">Znasz to?</h3> <ul class="compare-list"> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Zarząd kupił licencje, a wdrożenie wylądowało na twoim biurku. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Masz uczyć narzędzia, którego sam(a) dopiero się uczysz. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Za pół roku ktoś zapyta o efekt, a ty nie masz go czym pokazać. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Pracownicy otwierają Copilota raz i wracają do starego sposobu pracy. </p> </li> </ul> </div> <!-- Kolumna "po" - stan z programem, karta w gradiencie --> <div class="compare-col compare-col-after card-soft"> <h3 class="h2 text-violet">Z nami wygląda to tak:</h3> <ul class="compare-list"> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Wdrożenie dostajesz jako gotowy pakiet SCORM do waszego systemu. Nie ogarniasz go w pojedynkę. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Metodę dają autorzy, którzy przeprowadzili to z ponad 10 000 osób. Nie zaczynasz od zera. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Pokazujesz jedną liczbę: aktywni użytkownicy po 30 dniach. Zarząd ją zrozumie. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body"> Ludzie ćwiczą na własnych mailach i dokumentach. Zostaje nawyk, nie jednorazowa próba. </p> </li> </ul> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: DLA KOGO JEST TEN PROGRAM Korzysta z klas ze style guide: .section, .container, .h2-lg, .text-violet, .h2, .text-body, .list-item. Ikony (.icon-badge / .icon-badge--check / .icon-badge--cross) to inline SVG z poświatą przez CSS drop-shadow - zdefiniowane w section-audience-addon.css, NIE w głównym style guide. Zweryfikowane w Figmie (node 2213:617 / 2213:623 / 2213:629): check = biały kwadrat z czarnym haczykiem, cross = fioletowe kółko z białym X. ========================================================================== --> <section class="section"> <div class="container audience"> <h2 class="h2-lg audience-heading"> <span class="text-violet">Dla kogo </span>jest ten program </h2> <div class="audience-grid"> <!-- Karta "dla kogo" - gradient fioletowy --> <div class="audience-card audience-card--yes"> <h3 class="h2 audience-card-title">Dla kogo:</h3> <ul class="audience-list"> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body audience-text--light"> Firmy na Microsoft 365 z licencjami Copilota, które chcą, by pracownicy realnie z nich korzystali. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body audience-text--light"> Działy szkoleń i HR odpowiadające za wdrożenie, które mają uczyć narzędzia, którego same dopiero się uczą. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--check" viewBox="0 0 30 30" fill="none" aria-hidden="true"> <rect x="1" y="1" width="28" height="28" rx="8" fill="var(--color-white)"/> <path d="M8.5 15.5L12.5 19.5L21.5 9.5" stroke="#111111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="text-body audience-text--light"> Organizacje, w których adopcja ma być mierzalna, a nie deklaratywna. </p> </li> </ul> </div> <!-- Karta "dla kogo nie" - jasne tło --> <div class="audience-card audience-card--no"> <h3 class="h2 audience-card-title">Dla kogo nie jest</h3> <ul class="audience-list"> <li class="list-item"> <svg class="icon-badge icon-badge--cross" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M12 12l9 9M21 12l-9 9" stroke="#fff" stroke-width="2" stroke-linecap="round"/> </svg> <p class="text-body"> Dla zespołów IT szukających governance, konfiguracji i zaawansowanych integracji. To osobny materiał, przygotujemy go dla waszego IT. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--cross" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M12 12l9 9M21 12l-9 9" stroke="#fff" stroke-width="2" stroke-linecap="round"/> </svg> <p class="text-body"> Dla firm, które chcą, żeby ktoś wdrożył Copilota za nich. My uczymy waszych ludzi robić to samodzielnie. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--cross" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M12 12l9 9M21 12l-9 9" stroke="#fff" stroke-width="2" stroke-linecap="round"/> </svg> <p class="text-body"> Dla kogoś, kto szuka wyłącznie prezentacji ROI dla zarządu. Taki materiał też mamy, ale to nie jest sedno programu. </p> </li> </ul> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: ŚCIEŻKA BAZOWA (pasek kroków programu) Korzysta z klas ze style guide: .section, .container, .h2-lg, .text-violet Style layoutowe (szklany panel, rząd kroków) są w section-path-addon.css ========================================================================== --> <section class="section"> <div class="container"> <div class="path-panel"> <div class="path-panel-inner"> <div class="path-header"> <p class="path-kicker">FUNDAMENT</p> <h2 class="h2-lg">Ścieżka <span class="text-violet">bazowa</span></h2> </div> <div class="path-steps"> <div class="path-step"> <p class="path-step-title">Twoje pierwsze KREDO</p> </div> <div class="path-step"> <p class="path-step-title">Komunikacja bez chaosu</p> </div> <div class="path-step"> <p class="path-step-title">Spotkania od A do Z</p> </div> <div class="path-step"> <p class="path-step-title">Konkret z długiego dokumentu</p> </div> <div class="path-step"> <p class="path-step-title">Pomocnik do rutyny</p> </div> <div class="path-step"> <p class="path-step-title">Trzy zadania w Twojej pracy</p> </div> <div class="path-step path-step--optional"> <p class="path-step-optional-label">Opcjonalna</p> <p class="path-step-title">Premium</p> </div> </div> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: SIATKA KORZYŚCI (bento grid, 7 kart w 3 kolumnach) Korzysta z klas ze style guide: .container, .text-violet, .text-lead Nagłówki kart (28px semibold) to nowa, lokalna klasa .bento-title - nie ma odpowiednika w głównym style guide (najbliższe .h3 to 30px/bold/ kolor fioletowy na sztywno, tu potrzeba 28px/semibold/czarny z opcją białego wariantu), więc zdefiniowana in section-bento-addon.css. Ikony to osobne ilustracje SVG/PNG do wyeksportowania z Figmy - zbyt złożone jak na ręcznie pisany inline SVG (wiele elementów w każdej). ========================================================================== --> <section class="section"> <div class="container bento-grid"> <!-- Kolumna 1 --> <div class="bento-col"> <div class="bento-card bento-card--stack bento-card--light"> <img src="/files/pages/assets/2026-08-11/isolationmode_msoptbm4.svg" alt="Ścieżka bazowa" class="bento-icon"> <div class="bento-content"> <h4 class="bento-title"> Ścieżka bazowa, <span class="text-violet">sześć krótkich lekcji.</span> </h4> <p class="text-lead"> Prowadzą od pierwszego KREDO po trzy zadania z twojej codziennej pracy. Każdą lekcję kończysz gotowym rozwiązaniem. </p> </div> </div> <div class="bento-card bento-card--stack bento-card--lilac"> <img src="/files/pages/assets/2026-08-11/isolationmode-5_msopw7li.svg" alt="Lekcja Premium" class="bento-icon"> <div class="bento-content"> <h4 class="bento-title"> Opcjonalna <span class="text-violet">lekcja Premium.</span> </h4> <p class="text-lead"> Dla tych, którzy po ścieżce bazowej chcą pójść dalej. </p> </div> </div> </div> <!-- Kolumna 2 --> <div class="bento-col"> <div class="bento-card bento-card--row bento-card--violet"> <div class="bento-content"> <h4 class="bento-title bento-title--white">Model KREDO.</h4> <p class="text-lead bento-text--white"> Prosty sposób pracy z Copilotem, oparty na pięciu decyzjach człowieka. Wracasz do niego przy każdym nowym zadaniu, długo po kursie. </p> </div> <img src="/files/pages/assets/2026-08-11/isolationmode-1_msoq661k.svg" alt="Model KREDO" class="bento-icon"> </div> <div class="bento-card bento-card--row bento-card--peach"> <img src="/files/pages/assets/2026-08-11/isolationmode-3_msopyftp.svg" alt="Dostęp do materiałów" class="bento-icon"> <div class="bento-content"> <h4 class="bento-title"> <span class="text-violet">Dostęp</span> do materiałów. </h4> <p class="text-lead"> Wracasz do lekcji, kiedy potrzebujesz odświeżyć konkretny krok. </p> </div> </div> <div class="bento-card bento-card--row bento-card--violet"> <div class="bento-content"> <h4 class="bento-title bento-title--white">Certyfikat ukończenia.</h4> <p class="text-lead bento-text--white"> Pokażesz go w firmie albo dodasz do profilu. </p> </div> <img src="/files/pages/assets/2026-08-11/layer1_msopuelz.svg" alt="Certyfikat ukończenia" class="bento-icon"> </div> </div> <!-- Kolumna 3 --> <div class="bento-col"> <div class="bento-card bento-card--stack bento-card--peach bento-card--tall"> <img src="/files/pages/assets/2026-08-11/isolationmode-2_msoq8ffl.svg" alt="Ćwiczenia na własnej pracy" class="bento-icon"> <div class="bento-content"> <h4 class="bento-title"> Ćwiczenia na <span class="text-violet">twojej własnej pracy.</span> </h4> <p class="text-lead"> Uczysz się na swoich mailach i dokumentach, we własnym tempie, po kilkanaście minut. </p> </div> </div> <div class="bento-card bento-card--stack bento-card--light bento-card--tall"> <div class="bento-card-header"> <img src="/files/pages/assets/2026-08-11/isolationmode-4_msoq5gaf.svg" alt="Wsparcie społeczności" class="bento-icon bento-icon--sm"> <h4 class="bento-title"> Wsparcie <span class="text-violet">społeczności.</span> </h4> </div> <p class="text-lead"> Miejsce, w którym pytasz i podglądasz, jak inni radzą sobie z Copilotem na co dzień. </p> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: MICROSOFT UCZY / JAK PROGRAM SIĘ ROZCHODZI / COPILOT JEST GOTOWY Jedna sekcja, trzy naprzemienne bloki zdjęcie+tekst (.split-row / .split-row--reverse), zamiast trzech osobnych sekcji - tak jak w Figmie (node 2041:20374 to jeden kontener na wszystkie trzy). Korzysta z klas ze style guide: .container, .text-violet, .list-item. Nagłówek (42px semibold), tekst listy (18px/32px) i ikona-strzałka to lokalne klasy w section-split-story-addon.css - nie ma ich w głównym pliku (najbliższy nagłówek to .h2-lg, ale to 50px, nie 42px). ========================================================================== --> <section class="split-section"> <div class="container split-section-inner"> <!-- Blok 1: zdjęcie po lewej --> <div class="split-row"> <div class="split-image split-image--violet"> <img src="/files/pages/assets/2026-08-11/e386f705489b0315d4857d06f414ffcf23796302_msoqhabv.webp" alt="Dwoje pracowników pracujących razem przy komputerze w otoczeniu interfejsu Copilot"> </div> <div class="split-content"> <h3 class="split-heading"> Microsoft uczy użytkownika Copilota. <span class="text-violet">My uczymy pracownika waszej firmy.</span> </h3> <ul class="split-list"> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Na realnych zadaniach. Ludzie ćwiczą na własnych mailach i dokumentach. Nie na przykładach z prezentacji. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Krótko i we własnym tempie. Lekcje po kilkanaście minut. Bez blokowania kalendarza. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Dział po dziale. Sprzedaż pracuje na czym innym niż księgowość. Zasada zostaje ta sama. </p> </li> </ul> </div> </div> <!-- Blok 2: zdjęcie po prawej --> <div class="split-row split-row--reverse"> <div class="split-content"> <h3 class="split-heading"> Jak program <span class="text-violet">rozchodzi się</span> po firmie </h3> <ul class="split-list"> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Zaczynamy od pracowników. Używają Copilota na co dzień. To ich praca ma się zmienić. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> W każdym dziale są osoby, które zostają ambasadorami. Pokazują reszcie swoje sposoby na Copilota. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Liderzy adopcji łączą to w całość. Dbają, żeby sposób z jednego działu trafiał do innych. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Zarząd dostaje obraz w liczbach: gdzie adopcja rośnie, a gdzie stoi. </p> </li> </ul> </div> <div class="split-image split-image--violet-light"> <img src="/files/pages/assets/2026-08-11/84dbc395700697a18c9876618582161e900745e0_msoqitms.webp" alt="Troje współpracowników przegląda tablet razem"> </div> </div> <!-- Blok 3: zdjęcie po lewej --> <div class="split-row"> <div class="split-image split-image--blue"> <img src="/files/pages/assets/2026-08-11/fcd49199028f8d2c1470dfbf20b899b11195de2f_msoqjov5.webp" alt="Mężczyzna pracujący samodzielnie na laptopie"> </div> <div class="split-content"> <h3 class="split-heading"> <span class="text-violet">Copilot jest gotowy.</span> Reszta to kilka decyzji człowieka. </h3> <ul class="split-list"> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Sam dostęp nie wystarczy. To jak karta na siłownię, na której hantle same się nie podniosą. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Analityczka streszcza spotkanie w minutę. Jej kolega z tego samego działu nie odsłucha nagrania w ogóle. Ten sam Copilot, ta sama licencja. </p> </li> <li class="list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="split-text"> Po programie nikt nie wpisuje już w ciemno. Zostaje powtarzalna metoda, którą nazywamy KREDO. </p> </li> </ul> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: MODEL KREDO Korzysta z klas ze style guide: .text-violet Reszta typografii i layoutu jest specyficzna dla tej sekcji (rozmiary nagłówków 42px/24px, trzykolumnowy układ szczegółów) - zdefiniowana lokalnie w section-kredo-addon.css, nie ma tego w głównym pliku. Karty na przemian: Kontekst (zdjęcie lewo), Rozmowa (prawo), Ekspertyza (lewo), Dowód (prawo), Odpowiedzialność (lewo) - kolejność w DOM decyduje o stronie, tak jak w sekcji split-story. ========================================================================== --> <section class="kredo-section" id="jak-to-dziala"> <div class="container kredo-inner"> <div class="kredo-header"> <p class="kredo-model-label">Model</p> <img src="/files/pages/assets/2026-08-12/kredotransparent_mspy1aiu.webp" alt="KREDO" class="kredo-logo"> <p class="kredo-intro"> Po programie nikt nie wpisuje już w ciemno. Zostaje powtarzalna metoda, którą nazywamy KREDO. </p> </div> <div class="kredo-cards"> <!-- K - Kontekst (zdjęcie lewo) --> <div class="kredo-card"> <div class="kredo-image"> <img src="/files/pages/assets/2026-08-12/1_mspx9euw.webp" alt="Wkładanie plików PDF i DOC do kostki Copilot"> </div> <div class="kredo-content"> <div class="kredo-content-header"> <img src="/files/pages/assets/2026-08-12/86572dc45c2b3a6562bab11fc5a01482504575ac_mspx1eg2.webp" alt="K" class="kredo-icon"> <div> <h3 class="kredo-heading">Kontekst</h3> <p class="kredo-rule">Zasada: Copilot wie tyle, ile mu powiesz</p> </div> </div> <div class="kredo-body"> <p class="kredo-lead"> Copilot pomaga lepiej, gdy zna twoją sytuację od początku. </p> <p class="kredo-desc"> <strong>Opisz zadanie.</strong> Wyjaśnij, w jakiej jesteś sytuacji i co chcesz osiągnąć. Nazwij formę wyniku. Zamiast prosić o "przygotowanie tekstu", powiedz: krótki mail, lista ustaleń, tabela albo szkic do dalszej pracy. </p> <div class="kredo-details"> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Daj właściwy materiał.</p> <p class="kredo-detail-text"> Wklej lub wskaż dokumenty, wiadomości i dane do pracy. Sprawdź, czy materiał jest aktualny i czy możesz bezpiecznie użyć go w danym narzędziu. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Podaj odbiorcę i intencję.</p> <p class="kredo-detail-text"> Powiedz, kto zobaczy wynik i co chcesz dzięki niemu osiągnąć. Inaczej pisze się do zespołu, inaczej do klienta, a jeszcze inaczej do zarządu. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Co zyskujesz:</p> <p class="kredo-detail-text"> zwykle mniej poprawek i szybciej użyteczny wynik. Pytanie kontrolne: czy Copilot wie, kto zobaczy wynik i po co? </p> </div> </div> </div> </div> </div> <!-- R - Rozmowa (zdjęcie prawo) --> <div class="kredo-card kredo-card--reverse"> <div class="kredo-content"> <div class="kredo-content-header"> <img src="/files/pages/assets/2026-08-12/89d2e32d33790902642af0a5ab6bc58954583160_mspx1eaa.webp" alt="R" class="kredo-icon"> <div> <h3 class="kredo-heading">Rozmowa</h3> <p class="kredo-rule">Zasada: Pierwsza odpowiedź to szkic</p> </div> </div> <div class="kredo-body"> <p class="kredo-lead"> Z Copilotem się rozmawia. Pierwszy wynik traktuj jak punkt wyjścia. </p> <p class="kredo-desc"> <strong>Oceń szkic względem celu.</strong> Sprawdź, czy odpowiedź obejmuje całe zadanie, ma właściwą formę i jest użyteczna. Ładnie brzmiący tekst bywa źle wykonaną pracą. </p> <div class="kredo-details"> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Prowadź wynik przez dialog.</p> <p class="kredo-detail-text"> Poproś o skrócenie, zmianę tonu, brakujący element, inną strukturę albo kolejne warianty. Pracujesz na szkicu dalej, zamiast zaczynać od zera. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Zakończ, gdy wynik wystarcza do celu.</p> <p class="kredo-detail-text"> Wynik ma być wystarczająco dobry do konkretnego zadania. Kolejne poprawki rób tylko wtedy, gdy realnie podnoszą jego wartość. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Co zyskujesz:</p> <p class="kredo-detail-text"> po nietrafionym szkicu poprawiasz, zamiast zaczynać całą pracę od nowa. Pytanie kontrolne: czego brakuje w tym szkicu do twojego celu? </p> </div> </div> </div> </div> <div class="kredo-image"> <img src="/files/pages/assets/2026-08-12/2_mspx9eyp.webp" alt="Bąbelki konwersacji nad kostką Copilot"> </div> </div> <!-- E - Ekspertyza (zdjęcie lewo) --> <div class="kredo-card"> <div class="kredo-image"> <img src="/files/pages/assets/2026-08-12/3_mspx9f3q.webp" alt="Raport analityczny wychodzący z kostki Copilot"> </div> <div class="kredo-content"> <div class="kredo-content-header"> <img src="/files/pages/assets/2026-08-12/d2ecb113702b34a443eb8e704e88202e3490ef40_mspx1eij.webp" alt="E" class="kredo-icon"> <div> <h3 class="kredo-heading"> Ekspertyza <span class="kredo-heading--sub">(ekspertem jesteś ty)</span> </h3> <p class="kredo-rule">Zasada: Ty wiesz co. Copilot wie jak</p> </div> </div> <div class="kredo-body"> <p class="kredo-lead"> Twoja wiedza i osąd prowadzą całą pracę. Copilot jest pomocnikiem. </p> <p class="kredo-desc"> <strong>Zdecyduj, co oddać Copilotowi.</strong> Rozłóż większe zadanie na części. Copilot może zbierać informacje, porządkować materiał, tworzyć szkice i proponować warianty. Ty zachowujesz elementy wymagające osądu, pewności i decyzji. </p> <div class="kredo-details"> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Wnieś to, czego Copilot nie zna.</p> <p class="kredo-detail-text"> Dodaj wiedzę o realiach, priorytetach, historii sprawy, relacjach i ograniczeniach. Nawet z dostępem do wielu dokumentów Copilot widzi tylko część sytuacji. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Rozstrzygnij, co ma sens.</p> <p class="kredo-detail-text"> Gdy Copilot proponuje kilka możliwości, wybierasz tę, która pasuje do celu, odbiorcy i okoliczności. Nawet jeśli inna brzmi ładniej. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Co zyskujesz:</p> <p class="kredo-detail-text"> twoja wiedza o firmie i ludziach prowadzi pracę - i zyskuje na wartości. Pytanie kontrolne: którą część tego zadania musi wykonać człowiek? </p> </div> </div> </div> </div> </div> <!-- D - Dowód (zdjęcie prawo) --> <div class="kredo-card kredo-card--reverse"> <div class="kredo-content"> <div class="kredo-content-header"> <img src="/files/pages/assets/2026-08-12/438b2a2d2566b754337233e2c974e73d6a36758e_mspx1ed6.webp" alt="D" class="kredo-icon"> <div> <h3 class="kredo-heading">Dowód</h3> <p class="kredo-rule">Zasada: AI nie wie, czego nie wie</p> </div> </div> <div class="kredo-body"> <p class="kredo-lead"> Copilot potrafi podawać informacje pewnym tonem także wtedy, gdy się myli, coś pomija albo opiera się na błędnym założeniu. </p> <p class="kredo-desc"> <strong>Sprawdź treść wyniku.</strong> Zwróć uwagę na liczby, daty, nazwiska, warunki, wyjątki i braki. Sprawdź też, czy uproszczenia zachowują sens sprawy. </p> <div class="kredo-details"> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Dopasuj sprawdzenie do stawki.</p> <p class="kredo-detail-text"> Robocza notatka wymaga mniej kontroli niż informacja dla klienta, decyzja finansowa albo sprawa pracownicza. Im większe konsekwencje błędu, tym dokładniejsze sprawdzenie. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Wróć do źródła.</p> <p class="kredo-detail-text"> Potwierdź ważną informację w dokumencie, systemie albo u osoby odpowiedzialnej. Copilot pomoże szybciej przeczytać źródło - potwierdzenie zostaje przy tobie. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Co zyskujesz:</p> <p class="kredo-detail-text"> spokój, że pod wynikiem możesz się podpisać. Pytanie kontrolne: skąd wiesz, że ta liczba jest prawdziwa? </p> </div> </div> </div> </div> <div class="kredo-image"> <img src="/files/pages/assets/2026-08-12/4_mspx9f72.webp" alt="Pytajniki i kolorowy dym nad kostką Copilot"> </div> </div> <!-- O - Odpowiedzialność (zdjęcie lewo) --> <div class="kredo-card"> <div class="kredo-image"> <img src="/files/pages/assets/2026-08-12/5_mspx9fbo.webp" alt="Podpisywanie zatwierdzonego raportu Copilot"> </div> <div class="kredo-content"> <div class="kredo-content-header"> <img src="/files/pages/assets/2026-08-12/dc79cc6ef21a9c03f1eba5fefa85830c34fa87fd_mspx1eky.webp" alt="O" class="kredo-icon"> <div> <h3 class="kredo-heading">Odpowiedzialność</h3> <p class="kredo-rule">Zasada: Zlecasz zadania, nie odpowiedzialność</p> </div> </div> <div class="kredo-body"> <p class="kredo-lead"> Copilot może przygotować materiał. Za jego wykorzystanie odpowiada człowiek. </p> <p class="kredo-desc"> <strong>Pomyśl o konsekwencjach.</strong> Przed użyciem wyniku zastanów się, co się stanie, jeśli okaże się błędny, niepełny albo trafi do niewłaściwej osoby. Na tej podstawie dobierz potrzebną kontrolę. </p> <div class="kredo-details"> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Podpisuj się pod sprawdzonym wynikiem.</p> <p class="kredo-detail-text"> Materiał z twoim nazwiskiem to twoja praca. Dlatego przed wysłaniem masz prostą kontrolę z zasady D. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Decyzje o ludziach, pieniądzach i uprawnieniach zostają przy człowieku.</p> <p class="kredo-detail-text"> Copilot może zebrać informacje, przygotować pytania i uporządkować argumenty. Decyzję podejmuje odpowiedzialna osoba. </p> </div> <div class="kredo-detail-col"> <p class="kredo-detail-lead">Co zyskujesz:</p> <p class="kredo-detail-text"> jasną granicę między pomocą narzędzia a twoją decyzją. Pytanie kontrolne: co się stanie, jeśli ten wynik okaże się błędny? </p> </div> </div> </div> </div> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: CO ZAWIERA PROGRAM (rozbudowane karty lekcji) To rozwinięcie 5 z 6 lekcji z paska "Ścieżka bazowa" (osobna sekcja zakodowana wcześniej jako section-path.html) - tu każda lekcja ma pełny opis: cel, kluczowe tematy, co zrobisz. Typografia i layout są specyficzne dla tej sekcji - zdefiniowane lokalnie w section-curriculum-addon.css. Dwie różne ikony-znaczniki list: strzałka (Kluczowe tematy) i haczyk w kółku (Co zrobisz) - zdefiniowane lokalnie, tak jak w innych sekcjach. ========================================================================== --> <section class="curriculum-section"> <div class="container curriculum-inner"> <div class="curriculum-header"> <div class="curriculum-start"> <p class="curriculum-start-label">Startujemy 2. września</p> </div> <h2 class="curriculum-heading">Co zawiera program?</h2> <p class="curriculum-intro"> Ścieżka bazowa uczy jednego sposobu pracy z Copilotem. To model KREDO. Ćwiczysz go na własnej pracy w sześciu lekcjach: komunikacja, spotkania, dokumenty, podział zadań. Kończysz z trzema własnymi zadaniami i przygotowanym startem pierwszego. </p> </div> <div class="curriculum-cards"> <!-- Lekcja 1: Pierwsze kroki z Copilotem --> <div class="curriculum-card"> <div class="curriculum-card-header"> <img src="/files/pages/assets/2026-08-12/agenda_mspy7cwq.svg" alt="Ikona modułu" class="curriculum-icon"> <div class="curriculum-title-block"> <p class="curriculum-title">Pierwsze kroki z Copilotem</p> <p class="curriculum-subtitle">Otwarcie Copilota i pierwszy własny wynik.</p> </div> </div> <div class="curriculum-body"> <div class="curriculum-goal-box"> <img src="/files/pages/assets/2026-08-12/isolationmode_mspy3l6x.svg" alt="Ikona celu" class="curriculum-goal-icon"> <div> <p class="curriculum-goal-label">Główny cel</p> <p class="curriculum-goal-text"> Poznajesz Copilota, uruchamiasz pierwsze polecenie i zakładasz swoją stronę KREDO. </p> </div> </div> <div class="curriculum-columns"> <div class="curriculum-col"> <p class="curriculum-col-label">Kluczowe tematy:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Bezpieczne firmowe środowisko Copilota</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Pierwsza zasada modelu KREDO: kontekst</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Skąd Copilot bierze odpowiedzi i dlaczego czasem się myli</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Twoja strona KREDO jako stałe miejsce na wnioski</p> </li> </ul> </div> <div class="curriculum-col"> <p class="curriculum-col-label">Co zrobisz:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Otworzysz Copilota kontem firmowym i sprawdzisz, czy działasz bezpiecznie.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Uruchomisz pierwsze polecenie i zobaczysz, jak kontekst zmienia wynik.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Wybierzesz jedną z dwóch dróg pracy z kontekstem.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Zapiszesz pierwszy wniosek na swojej stronie KREDO.</p> </li> </ul> </div> </div> </div> </div> <!-- Lekcja 2: Komunikacja i wiadomości --> <div class="curriculum-card"> <div class="curriculum-card-header"> <img src="/files/pages/assets/2026-08-12/agenda_mspy7cwq.svg" alt="Ikona modułu" class="curriculum-icon"> <div class="curriculum-title-block"> <p class="curriculum-title">Komunikacja i wiadomości</p> <p class="curriculum-subtitle">Od długiego wątku do gotowej, sprawdzonej wiadomości.</p> </div> </div> <div class="curriculum-body"> <div class="curriculum-goal-box"> <img src="/files/pages/assets/2026-08-12/isolationmode_mspy3l6x.svg" alt="Ikona celu" class="curriculum-goal-icon"> <div> <p class="curriculum-goal-label">Główny cel</p> <p class="curriculum-goal-text"> Przechodzisz cały proces pracy nad wiadomością i decydujesz, kiedy skończyć. </p> </div> </div> <div class="curriculum-columns"> <div class="curriculum-col"> <p class="curriculum-col-label">Kluczowe tematy:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Streszczenie długiego wątku pod konkretny cel</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Kontrola wyniku: fakty, pominięcia, założenia</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Prowadzenie szkicu w rozmowie zamiast szukania idealnego polecenia</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Odpowiedzialność za wynik, pod którym się podpisujesz</p> </li> </ul> </div> <div class="curriculum-col"> <p class="curriculum-col-label">Co zrobisz:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Streścisz długi wątek i sprawdzisz jeden ważny szczegół w źródle.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Napiszesz trudną wiadomość dopasowaną do odbiorcy i celu.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Poprowadzisz szkic kilkoma poprawkami zamiast pisać od nowa.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Zdecydujesz, kiedy wynik jest gotowy, i zapiszesz własny standard.</p> </li> </ul> </div> </div> </div> </div> <!-- Lekcja 3: Spotkanie od początku do końca --> <div class="curriculum-card"> <div class="curriculum-card-header"> <img src="/files/pages/assets/2026-08-12/agenda_mspy7cwq.svg" alt="Ikona modułu" class="curriculum-icon"> <div class="curriculum-title-block"> <p class="curriculum-title">Spotkanie od początku do końca</p> <p class="curriculum-subtitle">Jedno spotkanie: od przygotowania do notatki dla zespołu.</p> </div> </div> <div class="curriculum-body"> <div class="curriculum-goal-box"> <img src="/files/pages/assets/2026-08-12/isolationmode_mspy3l6x.svg" alt="Ikona celu" class="curriculum-goal-icon"> <div> <p class="curriculum-goal-label">Główny cel</p> <p class="curriculum-goal-text"> Prowadzisz spotkanie od przygotowania aż po przekazanie notatki zespołowi. </p> </div> </div> <div class="curriculum-columns"> <div class="curriculum-col"> <p class="curriculum-col-label">Kluczowe tematy:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Przygotowanie do spotkania z własną wiedzą spoza plików</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Ekspertyza: co wiesz Ty, czego nie wie Copilot</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Ustalenia z zapisu spotkania: decyzje, osoby, terminy</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Kontrola dobrana do tego, komu przekazujesz wynik</p> </li> </ul> </div> <div class="curriculum-col"> <p class="curriculum-col-label">Co zrobisz:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Przygotujesz notatkę na spotkanie i dołożysz wiedzę spoza materiałów.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Wyciągniesz ze spotkania decyzje, osoby odpowiedzialne i terminy.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Zamienisz rozsypane notatki w jedną notatkę do działania.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Dobierzesz kontrolę do tego, czy wynik idzie do zespołu, zarządu czy klienta.</p> </li> </ul> </div> </div> </div> </div> <!-- Lekcja 4: Praca z długim dokumentem --> <div class="curriculum-card"> <div class="curriculum-card-header"> <img src="/files/pages/assets/2026-08-12/agenda_mspy7cwq.svg" alt="Ikona modułu" class="curriculum-icon"> <div class="curriculum-title-block"> <p class="curriculum-title">Praca z długim dokumentem</p> <p class="curriculum-subtitle">Szybka odpowiedź z dokumentu, którą potwierdzasz w źródle.</p> </div> </div> <div class="curriculum-body"> <div class="curriculum-goal-box"> <img src="/files/pages/assets/2026-08-12/isolationmode_mspy3l6x.svg" alt="Ikona celu" class="curriculum-goal-icon"> <div> <p class="curriculum-goal-label">Główny cel</p> <p class="curriculum-goal-text"> Wyciągasz konkret z długiego dokumentu i potwierdzasz go w źródle. </p> </div> </div> <div class="curriculum-columns"> <div class="curriculum-col"> <p class="curriculum-col-label">Kluczowe tematy:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Znajdowanie właściwego pliku</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Odpowiedzi z widocznymi źródłami</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Dowód: potwierdzenie konkretu w samym dokumencie</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Notes na źródła tematu, który wraca</p> </li> </ul> </div> <div class="curriculum-col"> <p class="curriculum-col-label">Co zrobisz:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Znajdziesz właściwy plik i zadasz mu pytanie.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Sprawdzisz ważny szczegół w samym dokumencie, nie w odpowiedzi czatu.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Ustalisz, który dokument obowiązuje, gdy jest ich kilka.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Zbierzesz źródła powracającego tematu w jednym notesie.</p> </li> </ul> </div> </div> </div> </div> <!-- Lekcja 5: Podział pracy z Copilotem --> <div class="curriculum-card"> <div class="curriculum-card-header"> <img src="/files/pages/assets/2026-08-12/agenda_mspy7cwq.svg" alt="Ikona modułu" class="curriculum-icon"> <div class="curriculum-title-block"> <p class="curriculum-title">Podział pracy z Copilotem</p> <p class="curriculum-subtitle">Twój sposób pracy zapisany w jednym miejscu.</p> </div> </div> <div class="curriculum-body"> <div class="curriculum-goal-box"> <img src="/files/pages/assets/2026-08-12/isolationmode_mspy3l6x.svg" alt="Ikona celu" class="curriculum-goal-icon"> <div> <p class="curriculum-goal-label">Główny cel</p> <p class="curriculum-goal-text"> Zapisujesz swój sposób pracy i budujesz własnego pomocnika w Copilocie. </p> </div> </div> <div class="curriculum-columns"> <div class="curriculum-col"> <p class="curriculum-col-label">Kluczowe tematy:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Wybór pomocy dopasowanej do celu</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Podział zadania: co robi AI, co dokładasz Ty, co decydujesz</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Budowa i test własnego agenta</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--arrow-sm" viewBox="0 0 33 33" fill="none" aria-hidden="true"><circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/><path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Granice, których AI nie przekracza</p> </li> </ul> </div> <div class="curriculum-col"> <p class="curriculum-col-label">Co zrobisz:</p> <ul class="curriculum-list"> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Podzielisz zadanie na to, co robi AI, a co zostaje po Twojej stronie.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Zbudujesz własnego agenta i przetestujesz go na swoim zadaniu.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Ustawisz granicę, której agent nie przekroczy.</p> </li> <li class="curriculum-list-item"> <svg class="icon-badge icon-badge--check-sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="var(--color-violet)"/><path d="M6 10.2l2.2 2.2L14 6.8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> <p>Wybierzesz formę pracy: rozmowa, zapisane polecenie albo agent.</p> </li> </ul> </div> </div> </div> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: TWOI MENTORZY Typografia i layout są specyficzne dla tej sekcji - zdefiniowane lokalnie w section-team-addon.css, nie ma tego w głównym pliku. Zdjęcia "wystają" poza górną/dolną krawędź karty - rozwiązane przez skalowanie procentowe (transform: scale), a nie sztywne piksele z Figmy, żeby działało z dowolnym zdjęciem i na każdej szerokości ekranu (ta sama lekcja co przy ilustracjach w sekcji CTA). ========================================================================== --> <section class="team-section"> <div class="team-heading-wrap"> <h2 class="team-heading"> Twoi mentorzy:<br> <span class="text-violet">praktycy z pierwszej ligi</span> </h2> </div> <div class="team-cards"> <!-- Mateusz Cisowski - zdjęcie po lewej --> <div class="team-card team-card--peach"> <div class="team-photo"> <img src="/files/pages/assets/2026-08-12/61792e1bcdc8eb0caeb1f0380f56a40ec2737d14_msptth0c.webp" alt="Mateusz Cisowski"> </div> <div class="team-content"> <div class="team-header"> <h3 class="team-name">Mateusz Cisowski</h3> <span class="team-role">founder AI Hero</span> </div> <div class="team-bio"> <p> Wdrażałem AI w firmach mid-market i enterprise w Polsce, między innymi w <strong>PZU, Leroy Merlin i Tevie. Zawsze w środowisku Microsoft.</strong> </p> <p> Za każdym razem widzę ten sam moment. Świetne demo, entuzjazm zarządu, a potem cisza. Pilotaż, który nie zmienia niczyjej pracy. Dlatego zajmuję się jedną rzeczą. <strong>Doprowadzam wdrożenia do punktu, w którym z AI realnie korzysta 70-80% zespołu.</strong> Efekt widać w wyniku firmy. </p> <p> Wcześniej zbudowałem i sprzedałem w USA software house In'saneLab. Jako CTO prowadziłem trudne transformacje w regulowanych branżach. Od modelu projektowego do produktowego, od on-prem do chmury. </p> <p> <strong>Przekładam AI na decyzje biznesowe: koszt, ryzyko, efekt.</strong> I mówię wprost, gdzie AI dowozi, a gdzie płacicie za ładne slajdy. </p> </div> </div> </div> <!-- Aleksander Piskorz - zdjęcie po prawej --> <div class="team-card team-card--violet"> <div class="team-content"> <div class="team-header team-header--center"> <h3 class="team-name">Aleksander Piskorz</h3> <span class="team-role">Head of AI Education &amp; Enablement w AI Hero</span> </div> <div class="team-bio"> <p> Od 15 lat pracuję w nowych technologiach. Dziś skupiam się na jednym obszarze: adopcji Microsoft Copilota i Copilot Studio w dużych organizacjach. </p> <p> <strong>Pracowałem bezpośrednio z zarządami i kadrą menedżerską</strong> w firmach takich jak PZU, Polsat, Tauron, Leroy Merlin, MediaMarkt czy Teva. <strong>Odpowiadałem za programy rozwoju kompetencji AI dla kilkunastu tysięcy pracowników.</strong> </p> <p> Jako trener pracowałem na sali z ponad 10 tysiącami osób. <strong>W 2025 raport Favikon umieścił mnie w TOP 10 najbardziej wpływowych osób w AI</strong> na LinkedIn w Polsce. </p> <p> Jestem twórcą Prompt Hero i Agent Hero. To autorskie metody pracy z Copilotem i modelami językowymi. Zamknąłem je w dwóch narzędziach edukacyjnych. <br> Za wszystkim, co robię, stoi jedna misja. Technologia ma być łatwa do zrozumienia i ciekawa w nauce. </p> </div> </div> <div class="team-photo"> <img src="/files/pages/assets/2026-08-12/bdb5ffdc9704453f9c09082f1763031fe739d7ff_msptufs3.webp" alt="Aleksander Piskorz"> </div> </div> </div> </section>
<!-- ========================================================================== SEKCJA: PROGRAM (STARTUJEMY 2 WRZEŚNIA) - dwie karty cenowe + gwarancja Korzysta z klas ze style guide: .text-violet, .btn, .btn-primary, .btn-secondary. Reszta typografii i layoutu (karty cenowe, listy, kontakt, gwarancja) jest specyficzna dla tej sekcji - zdefiniowana lokalnie w section-pricing-addon.css. Ikona-strzałka (.icon-badge--arrow) zdefiniowana lokalnie w tym addonie, tak jak w innych sekcjach - każdy addon jest samodzielny. ========================================================================== --> <section class="pricing-section" id="cennik"> <div class="container pricing-inner"> <h2 class="pricing-heading"> Startujemy <span class="text-violet">2 września</span> </h2> <div class="pricing-grid"> <!-- Karta 1: Dostęp Indywidualny --> <div class="pricing-card-outer pricing-card-outer--individual"> <div class="pricing-card-inner pricing-card-inner--violet"> <img src="/files/pages/assets/2026-08-12/logo-2_mspu4pqo.png" alt="Mistrzowie Copilota" class="pricing-logo"> <div class="pricing-card-body"> <div class="pricing-title-block"> <p class="pricing-title pricing-title--violet">Dostęp Indywidualny</p> <p class="pricing-subtitle pricing-subtitle--violet"> Wszystko, żeby samodzielnie zacząć realnie korzystać z Copilota. </p> <p class="pricing-countdown">22dni 15h 43m 55s</p> </div> <div class="pricing-price-row"> <span class="pricing-price">290-990 zł</span> <span class="pricing-price-suffix">netto</span> </div> <a href="#zapisy" class="btn btn-secondary pricing-btn-full"> Dołącz teraz </a> <div class="pricing-list"> <p class="pricing-list-label">Otrzymasz:</p> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> 5-tygodniowy, intensywny program transformacyjny, gdzie każdy dzień przybliża Cię do działającego prototypu. </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Praktyczne sesje LIVE, na których podzielimy się naszym sposobem myślenia i case study, a nie tylko gotowymi slajdami. </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Praca nad WŁASNYM projektem, bo nic nie uczy tak, jak budowanie czegoś, co ma dla Ciebie znaczenie (i co ludzie pokochają). </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Sesje Q&amp;A i feedback od ekspertów-praktyków, którzy nie pozwolą Ci utknąć w martwym punkcie. </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Dostęp do wspierającej społeczności bohaterów takich jak Ty - bo nikt nie zrozumie Twoich wyzwań lepiej niż ludzie, którzy przechodzą przez to samo. </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Certyfikat AI Product Hero, który potwierdza Twoje praktyczne umiejętności budowania, a nie tylko obecność na wykładach. </p> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <p class="pricing-list-text"> Dostęp do wszystkich nagrań i materiałów na 12 miesięcy, więc wracasz do wiedzy, kiedy tylko chcesz i uczysz się w swoim tempie. </p> </div> </div> </div> </div> </div> <!-- Karta 2: Dostęp dla Zespołu --> <div class="pricing-card-outer pricing-card-outer--team"> <div class="pricing-card-inner pricing-card-inner--peach"> <div class="pricing-card-body"> <div class="pricing-title-block"> <p class="pricing-title">Dostęp dla Zespołu</p> <p class="pricing-subtitle"> Copilot wchodzi do całej firmy, dział po dziale, a efekt widać na liczbach. </p> </div> <a href="#kontakt" class="btn btn-primary pricing-btn-full"> Zapytaj o ofertę </a> <div class="pricing-list"> <p class="pricing-list-label">Dodatkowe korzyści:</p> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Ścieżki dla każdego działu.</p> <p class="pricing-list-item-desc"> Sprzedaż, marketing, zakupy, obsługa klienta, finanse, biuro i IT uczą się Copilota na zadaniach swojego działu. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Ścieżki wdrożeniowe dla liderów, HR i zarządu.</p> <p class="pricing-list-item-desc"> Pokazują, jak uruchomić adopcję i utrzymać ją, gdy pierwszy entuzjazm minie. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Kurs w waszym systemie szkoleniowym.</p> <p class="pricing-list-item-desc"> Dostajecie pakiet SCORM, więc program działa tam, gdzie już szkolicie ludzi. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Pomiar adopcji, nie obecności.</p> <p class="pricing-list-item-desc"> Widzicie, ilu ludzi korzysta z Copilota po 30 dniach i które działy mają aktywnego ambasadora. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Faktura proforma i przelew tradycyjny.</p> <p class="pricing-list-item-desc"> Rozliczacie zakup tak, jak wymaga tego dział finansowy. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Zniżki przy większych zespołach.</p> <p class="pricing-list-item-desc"> Im więcej pracowników zgłosicie, tym niższy koszt na osobę. </p> </div> </div> <div class="pricing-list-item"> <svg class="icon-badge icon-badge--arrow" viewBox="0 0 33 33" fill="none" aria-hidden="true"> <circle cx="16.5" cy="16.5" r="16.5" fill="var(--color-violet)"/> <path d="M11.5 16.5h11M18 11l6 5.5-6 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pricing-list-item-content"> <p class="pricing-list-item-title">Dłuższe terminy płatności.</p> <p class="pricing-list-item-desc"> Dopasowujemy je do waszego procesu zakupowego. </p> </div> </div> </div> <div class="pricing-contact-block"> <hr class="pricing-divider"> <div class="pricing-contact-row"> <p>Potrzebujesz proformę?</p> <a href="mailto:contact@aiproductheroes.pl" class="pricing-link">contact@aiproductheroes.pl</a> </div> <hr class="pricing-divider"> <p class="pricing-contact-question">Masz pytania?</p> <div class="pricing-contact-person-row"> <div class="pricing-contact-person"> <img src="/files/pages/assets/2026-08-12/061b8f47ae453ab16a8f54d97e87eb472db97efc_mspu4pm7.png" alt="Anna Piskorz-Nowak" class="pricing-contact-avatar"> <div> <p class="pricing-contact-name">Anna Piskorz-Nowak</p> <p class="pricing-contact-role">Strategic Growth Partner</p> </div> </div> <div class="pricing-contact-details"> <a href="tel:+48570570393" class="pricing-link">+48 570 570 393</a> <a href="mailto:contact@aiproductheroes.pl" class="pricing-link">contact@aiproductheroes.pl</a> </div> </div> <hr class="pricing-divider"> <div class="pricing-contact-row"> <p>Ulotka dla Szefostwa:</p> <a href="#" class="pricing-link">Pobierz PDF</a> </div> </div> </div> </div> </div> </div> <!-- Karta gwarancji --> <div class="guarantee-card"> <div class="guarantee-content"> <span class="guarantee-badge">14 DNI NA TEST</span> <h3 class="guarantee-heading">Gwarancja 100% zwrotu</h3> <div class="guarantee-text"> <p class="guarantee-lead">Masz 14 dni od startu, żeby sprawdzić program.</p> <p> Jeśli uznasz, że nie jest dla Ciebie, zwrócimy 100% wpłaconej kwoty.<br> Wystarczy jeden mail. Bez pytań i bez dodatkowych warunków. </p> <p> W tym czasie przejrzyj materiały z pierwszych dwóch tygodni. Wykonaj zadania. Wdróż pierwsze rozwiązania w swojej pracy. </p> <p class="guarantee-lead">Program tworzy BRAVE.</p> </div> <a href="#zapisy" class="btn btn-primary">Dołącz do Programu</a> </div> <img src="/files/pages/assets/2026-08-12/brave-logo_mspu37qo.svg" alt="BRAVE" class="guarantee-logo"> </div> </div> </section>
<!-- ========================================================================== SEKCJA: FAQ Korzysta z klas ze style guide: .text-violet Reszta typografii jest specyficzna dla tej sekcji - zdefiniowana lokalnie w section-faq-addon.css. Akordeon działa na natywnym <details>/<summary> - ZERO JavaScriptu. Przeglądarka sama obsługuje rozwijanie/zwijanie, więc to działa nawet jeśli edytor (easypage) wycina wklejone tagi <script>. Ostatnia odpowiedź (pkt 9) linkuje do #cennik - ten id musi być na sekcji z cennikiem (section-pricing.html) - już tam jest. ========================================================================== --> <section class="faq-section"> <div class="faq-container"> <!-- Lewa kolumna: nagłówek + kontakt --> <div class="faq-sidebar"> <div class="faq-sidebar-header"> <h2 class="faq-title">FAQ</h2> <p class="faq-subtitle">Masz dodatkowe pytania?</p> <p class="faq-subtitle-2">Odpisujemy błyskawicznie na każdy mail!</p> </div> <div class="faq-contact"> <div class="faq-contact-person"> <img src="/files/pages/assets/2026-08-12/bf82437aab0ea95fa38dcf63d70ae70e27b22d43_mspvfxzs.webp" alt="Anna Sarz" class="faq-contact-avatar"> <div> <p class="faq-contact-name">Anna Sarz</p> <p class="faq-contact-role">Projekt Manager</p> </div> </div> <div class="faq-contact-details"> <p>+48 696 361 551</p> <a href="mailto:a.sarz@brave.courses" class="faq-link">a.sarz@brave.courses</a> </div> </div> </div> <!-- Prawa kolumna: akordeon --> <div class="faq-accordion"> <details class="faq-item"> <summary class="faq-question"> <span>Dlaczego mam wam zaufać?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Program prowadzą Mateusz Cisowski i Aleksander Piskorz, którzy wdrażali AI w dużych organizacjach i przeszkolili na sali ponad 10 tysięcy osób. Treść powstała z ponad 40 rozmów z ludźmi, którzy mieli Copilota i z niego nie korzystali. Uczymy tego, co sprawdziło się przy realnych wdrożeniach, nie teorii ze slajdów. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Czym to się różni od szkolenia z Copilota od Microsoftu?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Microsoft uczy funkcji narzędzia, generycznie i bez kontekstu waszej pracy. My uczymy pracownika waszej firmy, dział po dziale, na jego realnych zadaniach. Dlatego ludzie zmieniają sposób pracy, a nie tylko oglądają kolejne demo. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Moi ludzie nie są techniczni. Poradzą sobie?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Tak. Copilot to nie programowanie. Jest wbudowany w Teams, Outlooka i Worda, których używają na co dzień. Ćwiczą na własnych mailach i dokumentach, krok po kroku, bez presji. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>W jakim formacie dostajemy kurs? Czy są spotkania na żywo?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Kurs jest w pełni samodzielny. Dostajecie go jako pakiet SCORM do waszego systemu szkoleniowego. Nie ma spotkań na żywo ani stałych terminów. Lekcje trwają po kilkanaście minut, każdy przechodzi je we własnym tempie. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Jak zmierzę, że to zadziałało, i co pokażę zarządowi?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Podstawowa miara to liczba aktywnych użytkowników Copilota po 30 dniach. Do tego liczba działów z aktywnym ambasadorem i czas zaoszczędzony na powtarzalnych zadaniach. Konkretne wskaźniki ustalamy z wami przed startem. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>AI czasem zmyśla. Jak nauczycie ludzi ufać wynikom?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> To jedna z pięciu zasad, których uczymy. Nazywamy ją Dowód. Ludzie sprawdzają wynik tym dokładniej, im większa stawka, i wracają do źródła przy ważnych informacjach. Efekt to wynik, pod którym można się podpisać. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Co z bezpieczeństwem danych?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Copilot działa w waszym środowisku Microsoft 365, na waszych zasadach dostępu. Program uczy pracowników, co można bezpiecznie wkleić i jak sprawdzić wynik przed użyciem. Na szczegółowe pytania techniczne przygotowujemy osobny materiał dla działu IT. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Co jeśli pracownicy nie znajdą czasu albo nie wejdą w kurs?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> Format jest pod to zaprojektowany. Lekcja trwa tyle co przerwa na kawę i nie blokuje kalendarza. W każdym dziale wspiera to ambasador, który pokazuje kolegom pierwsze kroki. Barierą jest czas, dlatego kurs jest krótki i samodzielny. </p> </div> </details> <details class="faq-item"> <summary class="faq-question"> <span>Ile to kosztuje?</span> <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5l8 7-8 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> </summary> <div class="faq-answer"> <p> W <a href="#cennik" class="faq-inline-link">sekcji z cennikiem</a> znajdziesz informację o najlepszej dostępnej teraz cenie oraz możliwościach finansowania. Zapraszamy! </p> </div> </details> </div> </div> </section>
<!-- ========================================================================== SEKCJA: CTA FINALNE (przed footerem) Korzysta z klas ze style guide: .h2-lg, .text-violet, .btn, .btn-primary Reszta (tło gradientowe, zdjęcie po prawej, opis 20px) jest specyficzna dla tej sekcji - zdefiniowana lokalnie w section-cta-final-addon.css. Zdjęcie po prawej jest tu JEDNYM złożonym obrazem (osoby + makiety UI + odznaka Copilot już wypalone w jeden plik z Figmy) - w przeciwieństwie do wcześniejszej sekcji CTA, nie trzeba rozdzielać zdjęcia i ikony. ========================================================================== --> <section class="cta-final"> <div class="cta-final-inner"> <div class="cta-final-content"> <h2 class="cta-final-heading"> Wasi ludzie mają <span class="text-violet">Copilota.</span><br> My pokażemy im, <span class="text-violet">jak zacząć.</span> </h2> <p class="cta-final-desc"> Program startuje 2 września. Kupujecie dostęp dla całej organizacji. My prowadzimy zespół przez adopcję, dział po dziale. Nie zostajecie z tym sami. </p> <img src="/files/pages/assets/2026-08-12/logo-2_mspvn6ul.png" alt="Mistrzowie Copilota" class="cta-final-logo"> <a href="#cennik" class="btn btn-primary"> Zamów program dla firmy </a> </div> <div class="cta-final-media"> <img src="/files/pages/assets/2026-08-12/f319c23d8fb3c5d2cb15c08d51e8eab6eccf4749_mspvmivo.webp" alt="Mateusz Cisowski i Aleksander Piskorz z Copilotem na urządzeniach"> </div> </div> </section>
<!-- ========================================================================== SEKCJA: FOOTER Korzysta z klas ze style guide: .section-dark, .container, .form-row, .input-pill, .btn, .btn-secondary, .text-legal, .text-credits, .h4, var(--color-lilac-muted) Reszta (kolumny linków, kontakty, social media, divider) jest specyficzna dla tej sekcji - zdefiniowana lokalnie w section-footer-addon.css. ========================================================================== --> <footer class="section-dark footer-section"> <div class="container footer-container"> <div class="footer-top"> <!-- Newsletter --> <div class="footer-newsletter"> <img src="logo-mistrzowie-copilota-white.svg" alt="Mistrzowie Copilota" class="footer-logo"> <p class="text-nav">Zapisz się i bądź na bieżąco z Mistrzami Copilota.</p> <form class="footer-form"> <div class="form-row"> <input type="email" class="input-pill" placeholder="Twój e-mail" required> <button type="submit" class="btn btn-secondary footer-btn-signup">Zapisz się</button> </div> <p class="text-legal"> Zapisując się akceptujesz <a href="https://app.easy.tools/policies/201346d68fdc45508ee9ddc5828d97dc" target="_blank" class="footer-legal-link">Politykę Prywatności</a> oraz wyrażasz zgodę na dołączenie do newslettera AI Product Heroes prowadzonego przez Wojtka Strzałkowskiego, Piotrka Kacałę i BRAVE Courses sp. z o.o. Spokojnie, w każdej chwili możesz się wypisać :) </p> </form> </div> <!-- Kolumny linków --> <div class="footer-links"> <!-- Kontakty --> <div class="footer-col footer-col--contacts"> <p class="h4">Oferta dla Zespołów</p> <div class="footer-contact"> <div class="footer-contact-person"> <img src="footer-avatar-anna-p.jpg" alt="Anna Piskorz-Nowak" class="footer-contact-avatar"> <div> <p class="footer-contact-name">Anna Piskorz-Nowak</p> <p class="footer-contact-role">Strategic Growth Partner</p> </div> </div> <div class="footer-contact-details"> <a href="tel:+48600539306">+48 600 539 306</a> <a href="mailto:contact@mistrzowiecopilota.pl">contact@mistrzowiecopilota.pl</a> </div> </div> <hr class="footer-divider footer-divider--short"> <p class="h4">Dla osób indywidualnych</p> <div class="footer-contact"> <div class="footer-contact-person"> <img src="footer-avatar-anna-s.jpg" alt="Anna Sarz" class="footer-contact-avatar"> <div> <p class="footer-contact-name">Anna Sarz</p> <p class="footer-contact-role">Koordynatorka Kursu</p> </div> </div> <div class="footer-contact-details"> <a href="tel:+48696361551">+48 696 361 551</a> <a href="mailto:a.sarz@brave.courses">a.sarz@brave.courses</a> </div> </div> </div> <!-- Nawigacja --> <div class="footer-col"> <p class="h4">Mistrzowie Copilota</p> <nav class="footer-nav"> <a href="#program">Program</a> <a href="#prowadzacy">Prowadzący</a> <a href="#cennik">Oferta</a> <a href="#faq">FAQ</a> <a href="#kontakt">Dla Zespołów</a> </nav> </div> <!-- Social media --> <div class="footer-col"> <p class="h4">Social Media</p> <div class="footer-social"> <a href="#" class="footer-social-link"> <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14 9h2V6h-2c-1.7 0-3 1.3-3 3v2H9v3h2v6h3v-6h2.2l.8-3H14V9z" fill="currentColor"/></svg> LinkedIn Mistrzowie Copilota </a> <a href="#" class="footer-social-link"> <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6.9 8.4H4V19h2.9V8.4zM5.4 4.5c-1 0-1.7.7-1.7 1.6 0 .9.7 1.6 1.7 1.6s1.7-.7 1.7-1.6c0-.9-.7-1.6-1.7-1.6zM20 12.5c0-2.7-1.4-4-3.4-4-1.3 0-2.1.6-2.5 1.3v-1.4H11V19h2.9v-5.8c0-1 .6-1.9 1.6-1.9s1.6.9 1.6 1.9V19H20v-6.5z" fill="currentColor"/></svg> LinkedIn Autora1 </a> <a href="#" class="footer-social-link"> <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6.9 8.4H4V19h2.9V8.4zM5.4 4.5c-1 0-1.7.7-1.7 1.6 0 .9.7 1.6 1.7 1.6s1.7-.7 1.7-1.6c0-.9-.7-1.6-1.7-1.6zM20 12.5c0-2.7-1.4-4-3.4-4-1.3 0-2.1.6-2.5 1.3v-1.4H11V19h2.9v-5.8c0-1 .6-1.9 1.6-1.9s1.6.9 1.6 1.9V19H20v-6.5z" fill="currentColor"/></svg> LinkedIn Autora2 </a> <a href="#" class="footer-social-link"> <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M21 8.2c0-1.5-1.2-2.7-2.7-2.9C16.4 5 12 5 12 5s-4.4 0-6.3.3C4.2 5.5 3 6.7 3 8.2 2.8 9.5 2.8 12 2.8 12s0 2.5.2 3.8c.2 1.5 1.2 2.7 2.7 2.9C7.6 19 12 19 12 19s4.4 0 6.3-.3c1.5-.2 2.5-1.4 2.7-2.9.2-1.3.2-3.8.2-3.8s0-2.5-.2-3.8zM10 15V9l5 3-5 3z" fill="currentColor"/></svg> YouTube </a> </div> </div> </div> </div> <!-- Credits --> <div class="footer-credits"> <hr class="footer-divider"> <div class="footer-credits-row"> <p class="text-credits">© 2026 Mistrzowie Copilota. Wszystkie prawa zastrzeżone.</p> <div class="footer-legal-links"> <a href="#" class="text-credits footer-legal-link">Polityka Prywatności</a> <a href="#" class="text-credits footer-legal-link">Regulamin</a> </div> </div> </div> </div> </footer>