31.05.2026 Technologia Pensatore

Next.js czy WordPress — co wybrać dla firmy z Jadów?

Wielu przedsiębiorców w Jadów wciąż boryka się z dylematem wyboru odpowiedniej technologii dla swojej strony. Czy postawić na sprawdzony WordPress, czy nowoczesne strony internetowe oparte na Next.js? Poznaj kluczowe różnice i zdecyduj świadomie.

Wielu właścicieli firm w Jadów, niezależnie od branży – czy to lokalny warsztat, kwiaciarnia, czy usługodawca – często podchodzi do tematu obecności w sieci z przekonaniem, że „jakaś strona” wystarczy. Pokutuje przeświadczenie, że skoro klienci i tak znają firmę z polecenia lub z ulicy, to witryna online jest jedynie wizytówką, bez realnego wpływu na pozyskiwanie nowych zapytań. Niestety, w dobie rosnącej cyfryzacji, takie podejście jest błędem, który może kosztować utratę potencjalnych klientów, szukających usług w Jadów za pośrednictwem wyszukiwarki. Pytanie nie brzmi już, czy potrzebna jest strona, ale jaka strona będzie faktycznie pracować na sukces lokalnego biznesu i która technologia – Next.js czy WordPress – lepiej sprosta tym wyzwaniom.

Sytuacja firm usługowych w Jadów

Lokalny rynek w Jadów, podobnie jak w wielu mniejszych miejscowościach, charakteryzuje się często silnymi więzami społecznymi i zaufaniem budowanym przez lata. Wiele firm działa w oparciu o tradycję i reputację przekazywaną z pokolenia na pokolenie. To z pewnością wartościowe fundamenty. Jednak w obecnych realiach, nawet w Jadów, klienci coraz częściej sięgają po smartfon, aby sprawdzić godziny otwarcia, zakres usług czy opinie przed podjęciem decyzji o wizycie. Jeśli strona internetowa jest przestarzała, nieintuicyjna, a co gorsza – nie działa poprawnie na urządzeniach mobilnych – firma traci szansę na dotarcie do tej grupy odbiorców.

Obecność online to już nie tylko „bycie w internecie”, ale bycie widocznym, dostępnym i profesjonalnym. Typowy warsztat usługowy w Jadów, który posiada jedynie wizytówkę w Google Moja Firma i podstawową stronę sprzed dekady, może być łatwo prześcignięty przez konkurenta z sąsiedniej miejscowości, który zainwestował w nowoczesne strony internetowe. Firmy, które nie nadążają za tym trendem, często doświadczają stagnacji w pozyskiwaniu nowych klientów, polegając wyłącznie na stałej bazie i poleceniach. To ryzykowne, zwłaszcza w obliczu zmieniających się nawyków konsumenckich.

Dla biznesów w Jadów, które chcą się rozwijać, inwestycja w przemyślaną stronę internetową jest inwestycją w przyszłość. Należy zadać sobie pytanie, czy obecna strona wspiera cele biznesowe, czy raczej stanowi cyfrową przeszkodę. Czy jest szybka? Czy łatwo znaleźć na niej kluczowe informacje? Czy jest zoptymalizowana pod lokalne wyszukiwania? Odpowiedzi na te pytania często wskazują na potrzebę zmian, a to prowadzi do dylematu: jaka technologia będzie najlepsza?

Decyzje strategiczne przed startem

Zanim wybierzesz między Next.js a WordPress, kluczowe jest określenie celów i potrzeb Twojej firmy w Jadów. To nie jest decyzja, którą należy podejmować pochopnie, bazując wyłącznie na popularności jednej z platform. Wymaga strategicznego podejścia.

Jakie są Twoje cele biznesowe? Czy potrzebujesz prostej wizytówki z formularzem kontaktowym, rozbudowanego sklepu internetowego, platformy do rezerwacji usług, czy portalu informacyjnego? WordPress, ze swoją elastycznością i tysiącami wtyczek, często jest pierwszym wyborem dla stron o różnorodnych funkcjonalnościach, zwłaszcza e-commerce (dzięki WooCommerce). Next.js, jako framework do budowania nowoczesnych aplikacji webowych, sprawdza się doskonale w przypadku niestandardowych rozwiązań, wymagających wysokiej wydajności i skalowalności.
Jaki masz budżet? Budżet to zawsze istotny czynnik. Początkowy koszt wdrożenia strony na WordPressie, zwłaszcza opartej na gotowym szablonie, może być niższy. Next.js, wymagający zazwyczaj pracy programisty „od zera” lub z wykorzystaniem bibliotek komponentów, będzie generował wyższe koszty początkowe. Warto jednak pamiętać, że niższy koszt początkowy WordPressa nie zawsze oznacza niższe koszty długoterminowe, zwłaszcza przy konieczności regularnego zakupu licencji na wtyczki premium i utrzymania bezpieczeństwa.
Kto będzie zarządzał treścią? Jeśli planujesz regularnie publikować nowe artykuły, aktualizować ofertę czy samodzielnie zarządzać treścią bez specjalistycznej wiedzy technicznej, WordPress z intuicyjnym panelem administracyjnym jest niezaprzeczalnie łatwiejszy w obsłudze. W przypadku Next.js, zarządzanie treścią często odbywa się poprzez tzw. Headless CMS (np. Strapi, Contentful), co wymaga pewnej adaptacji, ale oferuje dużą swobodę dla deweloperów.
Jakie są Twoje oczekiwania wobec wydajności i skalowalności? Nowoczesne strony internetowe oparte na Next.js słyną z niezwykłej szybkości ładowania, co przekłada się na lepsze wrażenia użytkownika i wyższe pozycje w wynikach wyszukiwania. Dzięki temu, że strona jest pre-renderowana, użytkownik otrzymuje gotową treść błyskawicznie. WordPress, choć może być zoptymalizowany, często wymaga dodatkowych wtyczek do cachowania i optymalizacji, aby osiągnąć podobne wyniki. Jeśli Twoja firma w Jadów przewiduje dynamiczny rozwój i duży ruch na stronie, skalowalność Next.js może okazać się kluczowa.
Bezpieczeństwo i utrzymanie. WordPress, jako najbardziej popularny system CMS, jest częstszym celem ataków. Wymaga regularnych aktualizacji wtyczek, szablonów i samego systemu. Next.js, ze względu na swoją architekturę i mniejszą zależność od wtyczek, często jest postrzegany jako bezpieczniejszy, choć również wymaga uwagi w zakresie utrzymania kodu i środowiska.

Dokładne przemyślenie tych punktów pozwoli na świadomy wybór technologii, która najlepiej odpowiada specyfice i aspiracjom Twojego biznesu w Jadów.

Proces krok po kroku

Niezależnie od tego, czy wybierzesz Next.js, czy WordPress, proces tworzenia nowoczesne strony internetowe zawsze przebiega w podobnych etapach. Różnice tkwią w narzędziach i szczegółach implementacji.

Analiza i planowanie: To etap, na którym wspólnie z klientem z Jadów definiujemy cele, grupę docelową, funkcjonalności i strukturę przyszłej strony. Ustalamy, jakie treści będą niezbędne, jakie integracje są potrzebne i jaki jest oczekiwany efekt biznesowy. Bez solidnego planu, nawet najlepsza technologia może okazać się niewystarczająca.
Projektowanie UX/UI: Na tym etapie tworzymy makiety (wireframes) i prototypy (mockupy), które wizualizują układ strony i interakcje użytkownika. Skupiamy się na intuicyjności nawigacji, estetyce i responsywności, czyli dopasowaniu strony do różnych rozmiarów ekranów (komputery, tablety, smartfony). Dla firm z Jadów ważne jest, aby strona była czytelna i łatwa w obsłudze dla każdego, kto jej używa, niezależnie od urządzenia.
Wybór technologii i architektura: Po zaakceptowaniu projektu wizualnego, podejmujemy ostateczną decyzję o technologii, bazując na wcześniej zebranych informacjach. Jeśli wybór padnie na WordPressa, skupiamy się na wyborze odpowiedniego szablonu (gotowego lub customowego) i niezbędnych wtyczek. W przypadku Next.js, projektujemy architekturę aplikacji, wybieramy biblioteki i narzędzia deweloperskie.
Implementacja (development): To faza kodowania. Dla WordPressa, polega to na instalacji i konfiguracji CMS-a, dostosowaniu szablonu, wdrożeniu wtyczek i wprowadzeniu treści. W przypadku Next.js, programiści piszą kod front-endu (React) i integrują go z back-endem (np. Headless CMS, API). Jest to zazwyczaj proces bardziej czasochłonny i wymagający specjalistycznej wiedzy programistycznej.
Testowanie: Po zakończeniu prac deweloperskich, strona jest poddawana rygorystycznym testom. Sprawdzamy jej funkcjonalność, responsywność, zgodność z przeglądarkami, wydajność i bezpieczeństwo. Upewniamy się, że wszystkie linki działają, formularze wysyłają dane, a strona ładuje się błyskawicznie. Wszelkie błędy są identyfikowane i naprawiane.
Wdrożenie i uruchomienie: Po pomyślnym zakończeniu testów, strona jest przenoszona na docelowy serwer i udostępniana publicznie. Jest to moment, w którym Twoja firma w Jadów oficjalnie wchodzi w świat online z nową, profesjonalną witryną.
Monitoring i optymalizacja: Uruchomienie strony to dopiero początek. Regularnie monitorujemy jej działanie, analizujemy ruch, zachowania użytkowników i pozycje w wyszukiwarkach. Na podstawie zebranych danych wprowadzamy optymalizacje, które mają na celu zwiększenie efektywności strony i osiągnięcie założonych celów biznesowych.

Jak widać, niezależnie od technologii, kluczem do sukcesu jest metodyczne podejście i dbałość o każdy szczegół.

Treści i UX pod lokalne wyszukiwania

Dla firm w Jadów, widoczność w lokalnych wynikach wyszukiwania jest często ważniejsza niż globalne pozycje. Ktoś szukający „fryzjer Jadów” lub „mechanik samochodowy Jadów” jest zazwyczaj gotowy do podjęcia szybkiej decyzji o zakupie lub skorzystaniu z usługi. Dlatego optymalizacja pod lokalne SEO i doskonałe doświadczenie użytkownika (UX) są priorytetem.

Jak technologie wspierają lokalne SEO?

Słowa kluczowe lokalne: Zarówno WordPress, jak i Next.js pozwalają na wplecenie słów kluczowych z nazwą miejscowości („Jadów”) w tytuły, nagłówki, treści i meta opisy. W WordPressie ułatwiają to wtyczki SEO (np. Yoast SEO, Rank Math), które podpowiadają, jak zoptymalizować każdą stronę. W Next.js wymaga to ręcznego zarządzania tagami </code> i <code><meta></code>, ale daje pełną kontrolę.</li> <li><strong>Google Moja Firma:</strong> Niezależnie od platformy, kluczowe jest posiadanie i regularne aktualizowanie profilu Google Moja Firma. Strona internetowa powinna być z nim spójna pod względem danych kontaktowych i godzin otwarcia.</li> <li><strong>Dane strukturalne (Schema Markup):</strong> Pozwalają wyszukiwarkom lepiej zrozumieć treść strony. Dla firm lokalnych ważne są schematy <code>LocalBusiness</code>, które zawierają informacje takie jak adres, numer telefonu, godziny otwarcia. W WordPressie istnieją wtyczki, które automatycznie dodają takie dane. W Next.js należy je zaimplementować ręcznie w kodzie, co również zapewnia precyzję.</li> <li><strong>Szybkość ładowania strony:</strong> Jest to jeden z kluczowych czynników rankingowych, zwłaszcza na urządzeniach mobilnych. <strong>Nowoczesne strony internetowe</strong> zbudowane na Next.js z natury są bardzo szybkie dzięki technikom pre-renderowania (SSR, SSG). WordPress, choć z czasem staje się wolniejszy z powodu wielu wtyczek i zasobów, może być zoptymalizowany za pomocą wtyczek do cachowania i optymalizacji obrazów. Szybka strona to mniej frustracji dla klienta z Jadów i lepsze pozycje w Google.</li> <li><strong>Responsywność i mobilność:</strong> Współcześni użytkownicy przeglądają internet głównie na smartfonach. Strona musi wyglądać i działać perfekcyjnie na każdym urządzeniu. Zarówno WordPress (dzięki responsywnym szablonom), jak i Next.js (dzięki elastycznym stylom CSS) umożliwiają tworzenie stron przyjaznych dla urządzeń mobilnych.</li> <li><strong>Treści lokalne:</strong> Regularne publikowanie artykułów na blogu, które odnoszą się do lokalnych wydarzeń, problemów czy specyfiki Jadów, może znacząco zwiększyć widoczność. Np. „5 miejsc w Jadów, które musisz odwiedzić”, „Jak wybrać najlepszego dostawcę usług w Jadów”.</li> </ul> <p>Dobre doświadczenie użytkownika na stronie to nie tylko estetyka, ale przede wszystkim funkcjonalność. Klient, który szybko znajdzie potrzebne informacje, łatwo skontaktuje się z firmą lub dokona zakupu, będzie bardziej skłonny do powrotu i polecenia usługi innym w Jadów. Niezależnie od wybranej technologii, pamiętaj o tym aspekcie.</p> <h2>Integracje: CRM, analityka, reklamy</h2> <p>Współczesna strona internetowa dla firmy w Jadów to coś więcej niż tylko wizytówka. To centralny punkt cyfrowego ekosystemu, który powinien seamlessly integrować się z innymi narzędziami biznesowymi. Mowa tu przede wszystkim o systemach do zarządzania relacjami z klientami (CRM), narzędziach analitycznych oraz platformach reklamowych.</p> <p><strong>Integracja z CRM:</strong></p> <ul> <li><strong>WordPress:</strong> Dzięki ogromnej liczbie wtyczek, WordPress oferuje łatwą integrację z większością popularnych systemów CRM (np. HubSpot, Salesforce, Zoho CRM). Wiele wtyczek formularzy kontaktowych ma wbudowane opcje synchronizacji, a jeśli nie, można wykorzystać narzędzia takie jak Zapier do automatyzacji przepływu danych. Jest to zazwyczaj prostsze i mniej kosztowne.</li> <li><strong>Next.js:</strong> Integracje z CRM-ami w Next.js wymagają zazwyczaj pracy deweloperskiej. Polega to na wykorzystaniu API dostarczanych przez systemy CRM do przesyłania danych z formularzy kontaktowych czy innych punktów interakcji na stronie. Daje to większą elastyczność i kontrolę nad danymi, ale jest bardziej zaawansowane technicznie i generuje wyższe koszty implementacji.</li> </ul> <p><strong>Analityka internetowa:</strong></p> <ul> <li><strong>WordPress:</strong> Instalacja narzędzi analitycznych, takich jak Google Analytics, Google Search Console czy Google Tag Manager, jest w WordPressie niezwykle prosta. Wystarczy zainstalować odpowiednią wtyczkę lub wkleić kod śledzący w wyznaczone miejsce w szablonie. Wtyczki takie jak MonsterInsights dodatkowo ułatwiają interpretację danych bezpośrednio w panelu administracyjnym.</li> <li><strong>Next.js:</strong> W Next.js kod śledzący jest dodawany bezpośrednio do plików aplikacji. Jest to prosta operacja dla dewelopera, która pozwala na precyzyjne śledzenie zdarzeń i zachowań użytkowników. Dostęp do surowych danych i możliwość ich niestandardowej obróbki to przewaga tego rozwiązania.</li> </ul> <p><strong>Integracja z platformami reklamowymi:</strong></p> <ul> <li><strong>WordPress:</strong> Wdrożenie pikseli śledzących (Facebook Pixel, Google Ads Conversion Tracking) czy innych skryptów reklamowych jest w WordPressie bardzo intuicyjne. Istnieją wtyczki dedykowane, które pozwalają na łatwe zarządzanie tymi skryptami bez znajomości kodowania. To sprawia, że kampanie marketingowe dla firm z Jadów można uruchomić szybko.</li> <li><strong>Next.js:</strong> W Next.js skrypty reklamowe są dodawane bezpośrednio do kodu strony, często za pomocą komponentów. Daje to deweloperowi pełną kontrolę nad miejscem i sposobem ładowania skryptów, co może pozytywnie wpłynąć na wydajność strony, unikając zbędnego obciążenia.</li> </ul> <p>Wybór technologii powinien uwzględniać, jak ważne są dla Twojej firmy te integracje i jak dużą swobodę oraz kontrolę chcesz mieć nad nimi. WordPress oferuje prostotę i gotowe rozwiązania, natomiast Next.js daje pełną kontrolę i optymalizację, wymagając jednak większych nakładów pracy deweloperskiej.</p> <h2>FAQ — najczęstsze pytania</h2> <h3>Czy WordPress jest bezpieczny?</h3> <p>Tak, WordPress jest systemem bezpiecznym, pod warunkiem regularnych aktualizacji samego systemu, używanych wtyczek i szablonów. Kluczowe jest również stosowanie silnych haseł, korzystanie z certyfikatu SSL oraz regularne wykonywanie kopii zapasowych. Wiele problemów z bezpieczeństwem wynika z zaniedbań w utrzymaniu, a nie z wad samego systemu. Dla firm z Jadów, które chcą mieć pewność, warto rozważyć profesjonalne wsparcie w zakresie utrzymania strony.</p> <h3>Czy Next.js jest tylko dla dużych firm?</h3> <p>Nie, Next.js nie jest zarezerwowany wyłącznie dla dużych korporacji. Coraz więcej średnich i mniejszych firm decyduje się na nowoczesne strony internetowe oparte na Next.js, zwłaszcza gdy priorytetem jest wydajność, skalowalność, niestandardowe funkcjonalności oraz długoterminowa optymalizacja pod kątem SEO. Mimo wyższych kosztów początkowych, dla niektórych biznesów w Jadów, które potrzebują zaawansowanej aplikacji webowej, może to być bardziej opłacalna inwestycja w przyszłość.</p> <h3>Ile kosztuje utrzymanie strony na Next.js vs. WordPress?</h3> <p>Koszty utrzymania mogą się różnić. WordPress często wiąże się z opłatami za wtyczki premium, szablony oraz koszty hostingu. Next.js, choć ma wyższe koszty deweloperskie, często pozwala na niższe koszty hostingu dla stron o wysokim ruchu dzięki swojej optymalizacji (np. wykorzystanie serwerless, CDN). W obu przypadkach należy uwzględnić koszty bieżącej opieki technicznej, aktualizacji i monitoringu, które są niezbędne dla stabilnego i bezpiecznego działania strony, niezależnie od tego, czy Twoja firma działa w Jadów, czy w innym miejscu.</p> </div> </div> </section> <section class="w-full bg-zinc-900 py-16 md:py-20"> <div class="max-w-5xl mx-auto px-6 text-center reveal-element"> <h2 class="font-heading text-3xl md:text-4xl text-white mb-4">Potrzebujesz wsparcia w wyborze technologii dla swojej firmy w Jadów?</h2> <p class="text-zinc-300 text-base leading-relaxed max-w-2xl mx-auto mb-8">Decyzja o wyborze między Next.js a WordPress to inwestycja w przyszłość Twojej obecności online. Skontaktuj się z nami, abyśmy mogli omówić Twoje potrzeby i doradzić optymalne rozwiązanie, które przyniesie realne korzyści Twojemu biznesowi w Jadów.</p> <a href="/wycena/" class="inline-flex items-center justify-center gap-2 bg-rose-500 hover:bg-rose-600 text-white font-medium px-7 py-3.5 rounded-full transition-all hover:scale-105 active:scale-95"> Porozmawiajmy o Twojej stronie w Jadów <svg aria-hidden="true" focusable="false" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M5 12h14m-7-7l7 7-7 7"></path> </svg> </a> </div> </section> </article> </main> <style> .reveal-element { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-element.is-visible { opacity: 1; transform: translateY(0); } </style> <style> .blog-content { font-size: 1.0625rem; line-height: 1.75; color: #52525b; } .blog-content > *:first-child { margin-top: 0; } .blog-content h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1.5rem, 4vw, 1.875rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #18181b; margin-top: 2.5rem; margin-bottom: 0.75rem; } .blog-content h3 { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: #18181b; margin-top: 1.75rem; margin-bottom: 0.5rem; } .blog-content h4 { font-size: 1.125rem; font-weight: 600; color: #18181b; margin-top: 1.5rem; margin-bottom: 0.5rem; } .blog-content p { margin-bottom: 1.25em; line-height: 1.75; color: #52525b; } .blog-content ul, .blog-content ol { margin: 1rem 0 1.5rem; padding-left: 1.5rem; color: #52525b; } .blog-content ul { list-style-type: disc; } .blog-content ol { list-style-type: decimal; } .blog-content li { margin-bottom: 0.5em; line-height: 1.7; } .blog-content li::marker { color: #f43f5e; } .blog-content a { color: #f43f5e; text-decoration: underline; } .blog-content a:hover { color: #e11d48; } .blog-content strong { color: #18181b; font-weight: 600; } .blog-content blockquote { border-left: 4px solid #f43f5e; padding-left: 1rem; margin: 1.5rem 0; color: #71717a; font-style: italic; } </style> <script> document.addEventListener('DOMContentLoaded', function () { var elements = document.querySelectorAll('.reveal-element'); if (!elements.length) return; var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); elements.forEach(function (el) { observer.observe(el); }); }); </script> </div> <section id="kontakt" class="w-full bg-zinc-900"> <div class="max-w-7xl mx-auto px-6 py-20 lg:py-28"> <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start"> <div class="lg:col-span-5 reveal-element" style="opacity: 1; transform: translateY(0px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);"> <p class="text-rose-400 text-sm font-medium tracking-widest uppercase mb-3">Napisz do nas</p> <h2 class="font-heading text-3xl md:text-4xl lg:text-5xl text-white mb-6"> <span>Zbudujmy Ci biznes, który</span> <span class="italic text-rose-400">zarabia</span> </h2> <p class="text-zinc-400 text-base leading-relaxed mb-10">Opowiedz nam o swoim projekcie. Pierwsza konsultacja jest bezpłatna — sprawdzimy co możemy dla Ciebie zrobić i ile to kosztuje.</p> <div class="space-y-6"> <div class="flex items-center gap-4"> <div class="w-10 h-10 bg-zinc-800 rounded-xl flex items-center justify-center border border-zinc-700"> <svg aria-hidden="true" focusable="false" class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24"> <path d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"> </path> </svg> </div> <span class="text-zinc-300 text-sm">biuro@pensatore.pl</span> </div> <div class="flex items-center gap-4"> <div class="w-10 h-10 bg-zinc-800 rounded-xl flex items-center justify-center border border-zinc-700"> <svg aria-hidden="true" focusable="false" class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24"> <path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"> </path> </svg> </div> <a href="tel:+48787112730" class="text-zinc-300 text-sm hover:text-white transition-colors">+48 787 112 730</a> </div> </div> <div class="mt-10 pt-10 border-t border-zinc-800"> <p class="text-zinc-500 text-xs uppercase tracking-wider mb-4">Nasze usługi</p> <div class="flex flex-wrap gap-2"> <a href="/zaistniej-online/" class="text-xs bg-zinc-800 text-zinc-400 px-3 py-1.5 rounded-full border border-zinc-700 hover:text-zinc-200 hover:border-zinc-500 transition-colors">Zaistniej online</a> <a href="/sprzedawaj-online/" class="text-xs bg-zinc-800 text-zinc-400 px-3 py-1.5 rounded-full border border-zinc-700 hover:text-zinc-200 hover:border-zinc-500 transition-colors">Sprzedawaj online</a> <a href="/badz-widoczny/" class="text-xs bg-zinc-800 text-zinc-400 px-3 py-1.5 rounded-full border border-zinc-700 hover:text-zinc-200 hover:border-zinc-500 transition-colors">Bądź widoczny</a> <a href="/pokaz-sie-z-ekranu/" class="text-xs bg-zinc-800 text-zinc-400 px-3 py-1.5 rounded-full border border-zinc-700 hover:text-zinc-200 hover:border-zinc-500 transition-colors">Pokaż się z ekranu</a> </div> </div> </div> <div class="lg:col-span-7 reveal-element"> <div class="bg-zinc-800/50 rounded-2xl p-8 lg:p-10 border border-zinc-700/50 backdrop-blur-sm"> <form class="space-y-5 contact-form" method="post" action="/kontakt/wyslij/" data-contact-form> <input type="hidden" name="csrfmiddlewaretoken" value="So3ABCWf5mdIKWmGA37KKt6poBnGddmZyPuarNujww82goscQski0WGxzS9GR2pz"> <input type="hidden" name="source" value="footer" /> <div class="grid sm:grid-cols-2 gap-5"> <div> <label class="text-zinc-400 text-sm mb-2 block">Imię i nazwisko</label> <input type="text" name="name" required class="w-full bg-zinc-900/50 border border-zinc-700 rounded-xl px-4 py-3 text-white text-sm placeholder-zinc-600 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/20 transition-colors" placeholder="Jan Kowalski" /> </div> <div> <label class="text-zinc-400 text-sm mb-2 block">E-mail</label> <input type="email" name="email" required class="w-full bg-zinc-900/50 border border-zinc-700 rounded-xl px-4 py-3 text-white text-sm placeholder-zinc-600 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/20 transition-colors" placeholder="jan@firma.pl" /> </div> </div> <div> <label class="text-zinc-400 text-sm mb-2 block">Temat</label> <input type="text" name="subject" required class="w-full bg-zinc-900/50 border border-zinc-700 rounded-xl px-4 py-3 text-white text-sm placeholder-zinc-600 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/20 transition-colors" placeholder="Np. Wycena strony internetowej" /> </div> <div> <label class="text-zinc-400 text-sm mb-2 block">Opisz swój projekt</label> <textarea rows="4" name="message" required class="w-full bg-zinc-900/50 border border-zinc-700 rounded-xl px-4 py-3 text-white text-sm placeholder-zinc-600 focus:outline-none focus:border-rose-500/50 focus:ring-1 focus:ring-rose-500/20 transition-colors resize-none" placeholder="Opowiedz nam o swoich potrzebach..."></textarea> </div> <button type="submit" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-medium px-7 py-3.5 rounded-full transition-all hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-rose-500/20">Wyślij zapytanie</button> <p class="text-zinc-500 text-xs text-center" data-contact-status>Odpowiadamy w ciągu 24 godzin. Konsultacja jest bezpłatna.</p> </form> </div> </div> </div> </div> </section> <footer class="w-full bg-zinc-950"> <div class="max-w-7xl mx-auto px-6 py-12"> <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 pb-10 border-b border-zinc-800"> <div class="flex items-center gap-2.5"> <span class="font-heading text-lg text-white tracking-tight">pensatore</span> </div> <div class="flex flex-wrap gap-6"><a href="/zaistniej-online/" class="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">Zaistniej online</a><a href="/sprzedawaj-online/" class="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">Sprzedawaj online</a><a href="/badz-widoczny/" class="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">Bądź widoczny</a><a href="/pokaz-sie-z-ekranu/" class="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">Pokaż się z ekranu</a></div> </div> <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-8"> <p class="text-xs text-zinc-500">© 2026 Pensatore House. Wszelkie prawa zastrzeżone.</p> <p class="text-xs text-zinc-500 text-center md:text-right"> Partner strategiczny: <a href="https://kryminalnezagadki.pl/" class="text-zinc-400 hover:text-zinc-200 transition-colors underline underline-offset-2">Kryminalne Zagadki</a> — logiczne śledztwa online po polsku. </p> <div class="flex items-center gap-6"><a href="/polityka-prywatnosci/" class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors">Polityka prywatności</a><a href="/polityka-cookies/" class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors">Cookies</a></div> </div> </div> </footer> <div id="newsletter-popup" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-zinc-950/70 px-6 backdrop-blur-sm"> <div class="relative w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl shadow-zinc-950/20"> <button type="button" data-newsletter-close class="absolute right-4 top-4 rounded-full p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700" aria-label="Zamknij newsletter"> <svg aria-hidden="true" focusable="false" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <p class="text-rose-500 text-sm font-medium tracking-widest uppercase mb-3">Newsletter</p> <h2 class="font-heading text-3xl text-zinc-900 mb-4">Zapisz się i potwierdź 10% zniżki</h2> <p class="text-zinc-500 text-sm leading-relaxed mb-6">Dostaniesz praktyczne wskazówki o stronach, reklamie i sprzedaży online. Kod rabatowy wyślemy po potwierdzeniu adresu e-mail.</p> <form method="post" action="/newsletter/zapisz/" data-newsletter-form class="space-y-4"> <input type="hidden" name="csrfmiddlewaretoken" value="So3ABCWf5mdIKWmGA37KKt6poBnGddmZyPuarNujww82goscQski0WGxzS9GR2pz"> <input type="text" name="name" class="w-full rounded-xl border border-zinc-200 px-4 py-3 text-sm focus:border-rose-400 focus:outline-none" placeholder="Imię (opcjonalnie)" /> <input type="email" name="email" required class="w-full rounded-xl border border-zinc-200 px-4 py-3 text-sm focus:border-rose-400 focus:outline-none" placeholder="Twój e-mail" /> <label class="flex items-start gap-3 text-xs leading-relaxed text-zinc-500"> <input type="checkbox" name="marketing_consent" required class="mt-1 h-4 w-4 rounded border-zinc-300 text-rose-500 focus:ring-rose-400" /> <span>Wyrażam zgodę na otrzymywanie od EMPIRE SP. Z O.O. informacji marketingowych i handlowych drogą elektroniczną na podany adres e-mail, w tym newslettera Pensatore. Wiem, że zgodę mogę wycofać w każdej chwili. Szczegóły są w <a href="/polityka-prywatnosci/" class="text-rose-500 hover:text-rose-600">polityce prywatności</a>.</span> </label> <button type="submit" class="w-full rounded-full bg-rose-500 px-6 py-3.5 text-sm font-medium text-white transition-colors hover:bg-rose-600">Wyślij link potwierdzający</button> <p class="text-center text-xs text-zinc-400" data-newsletter-status>Administrator: EMPIRE SP. Z O.O. Zero spamu. Możesz wypisać się w każdej chwili.</p> </form> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { var contactForm = document.querySelector('[data-contact-form]'); if (contactForm) { contactForm.addEventListener('submit', function (event) { event.preventDefault(); var status = contactForm.querySelector('[data-contact-status]'); var button = contactForm.querySelector('button[type="submit"]'); if (status) status.textContent = 'Wysyłamy wiadomość...'; if (button) button.disabled = true; fetch(contactForm.action, { method: 'POST', body: new FormData(contactForm), headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(function (response) { return response.json().then(function (data) { return { ok: response.ok, data: data }; }); }) .then(function (result) { if (status) status.textContent = result.data.message || (result.ok ? 'Wysłano.' : 'Nie udało się wysłać.'); if (result.ok) { contactForm.reset(); var sourceInput = contactForm.querySelector('input[name="source"]'); if (window.pensatoreTrackFormSubmit) { window.pensatoreTrackFormSubmit({ form_name: 'contact', form_id: 'contact-form-footer', form_source: sourceInput ? sourceInput.value : 'footer', }); } } }) .catch(function () { if (status) status.textContent = 'Nie udało się wysłać wiadomości. Spróbuj ponownie albo napisz e-mail.'; }) .finally(function () { if (button) button.disabled = false; }); }); } var popup = document.getElementById('newsletter-popup'); var newsletterForm = document.querySelector('[data-newsletter-form]'); var closeButtons = document.querySelectorAll('[data-newsletter-close]'); var storageKey = 'pensatore_newsletter_popup_closed'; function closeNewsletterPopup() { if (!popup) return; popup.classList.add('hidden'); popup.classList.remove('flex'); localStorage.setItem(storageKey, '1'); } var cookieConsentKey = 'pensatore_cookie_consent'; function hasCookieDecision() { var value = localStorage.getItem(cookieConsentKey); return value === 'accepted' || value === 'necessary'; } function scheduleNewsletterPopup() { if (!popup || localStorage.getItem(storageKey) === '1') return; if (!hasCookieDecision()) return; window.setTimeout(function () { if (!popup || localStorage.getItem(storageKey) === '1') return; if (!hasCookieDecision()) return; popup.classList.remove('hidden'); popup.classList.add('flex'); }, 2500); } if (hasCookieDecision()) { scheduleNewsletterPopup(); } document.addEventListener('pensatore:cookie-consent', function () { if (localStorage.getItem(storageKey) !== '1') { scheduleNewsletterPopup(); } }); closeButtons.forEach(function (button) { button.addEventListener('click', closeNewsletterPopup); }); if (popup) { popup.addEventListener('click', function (event) { if (event.target === popup) closeNewsletterPopup(); }); } if (newsletterForm) { newsletterForm.addEventListener('submit', function (event) { event.preventDefault(); var status = newsletterForm.querySelector('[data-newsletter-status]'); var button = newsletterForm.querySelector('button[type="submit"]'); if (status) status.textContent = 'Wysyłamy link potwierdzający...'; if (button) button.disabled = true; fetch(newsletterForm.action, { method: 'POST', body: new FormData(newsletterForm), headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(function (response) { var contentType = response.headers.get('content-type') || ''; if (contentType.indexOf('application/json') === -1) { throw new Error('HTTP ' + response.status); } return response.json().then(function (data) { return { ok: response.ok, data: data }; }); }) .then(function (result) { if (status) status.textContent = result.data.message || 'Sprawdź skrzynkę i potwierdź zapis.'; if (result.ok) { localStorage.setItem(storageKey, '1'); newsletterForm.reset(); } }) .catch(function (error) { if (status) status.textContent = 'Nie udało się zapisać. Błąd serwera: ' + error.message + '.'; }) .finally(function () { if (button) button.disabled = false; }); }); } }); </script> <script> (() => { if (window.PensatoreVueSPA) return; window.PensatoreVueSPA = true; const parser = new DOMParser(); const ignoredExtensions = /\.(pdf|zip|rar|7z|jpg|jpeg|png|gif|webp|svg|mp4|webm|doc|docx|xls|xlsx)$/i; let spaApp = null; function getParts(root) { return { view: root.querySelector("#spa-view"), }; } function shouldHandleLink(link, event) { if (!link || event.defaultPrevented) return false; if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false; if (link.target && link.target !== "_self") return false; if (link.hasAttribute("download")) return false; if (link.dataset.noSpa !== undefined) return false; if (link.getAttribute("href").startsWith("#")) return false; const url = new URL(link.href, window.location.href); if (url.origin !== window.location.origin) return false; if (url.protocol !== "http:" && url.protocol !== "https:") return false; if (url.pathname.startsWith("/admin/") || url.pathname.startsWith("/django-admin/")) return false; if (ignoredExtensions.test(url.pathname)) return false; if (url.pathname === window.location.pathname && url.search === window.location.search) return false; return true; } function syncHead(nextDocument) { document.title = nextDocument.title; const selectors = [ 'meta[name="description"]', 'meta[name="keywords"]', 'meta[name="robots"]', 'link[rel="canonical"]', 'meta[property^="og:"]', 'meta[name^="twitter:"]', 'script[type="application/ld+json"]', ]; selectors.forEach((selector) => { document.head.querySelectorAll(selector).forEach((node) => node.remove()); nextDocument.head.querySelectorAll(selector).forEach((node) => { document.head.appendChild(node.cloneNode(true)); }); }); } function replacePart(currentNode, nextNode) { if (!nextNode) return; const clone = nextNode.cloneNode(true); if (currentNode) { currentNode.replaceWith(clone); return clone; } return null; } function runScripts(scope) { const readyCallbacks = []; const nativeAddEventListener = document.addEventListener.bind(document); document.addEventListener = function (type, listener, options) { if (type === "DOMContentLoaded" && typeof listener === "function") { readyCallbacks.push(listener); return; } nativeAddEventListener(type, listener, options); }; try { scope.querySelectorAll("script").forEach((oldScript) => { if (oldScript.src && oldScript.src.includes("vue.global")) return; const script = document.createElement("script"); Array.from(oldScript.attributes).forEach((attr) => { script.setAttribute(attr.name, attr.value); }); script.textContent = oldScript.textContent; oldScript.replaceWith(script); }); } finally { document.addEventListener = nativeAddEventListener; } readyCallbacks.forEach((listener) => { listener.call(document, new Event("DOMContentLoaded")); }); } function createMountNode() { const node = document.createElement("div"); node.id = "pensatore-vue-spa"; node.hidden = true; document.body.appendChild(node); return node; } function ensurePreloaderHidden() { const preloader = document.getElementById("preloader"); if (!preloader) return; if (window.PensatorePreloader) { window.PensatorePreloader.hide(); return; } preloader.style.opacity = "0"; preloader.style.display = "none"; } function loadVue() { if (window.Vue) return Promise.resolve(window.Vue); if (window.__vueLoadPromise) return window.__vueLoadPromise; window.__vueLoadPromise = new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"; script.async = true; script.onload = () => resolve(window.Vue); script.onerror = reject; document.body.appendChild(script); }); return window.__vueLoadPromise; } function mountSpa(Vue) { if (spaApp) return spaApp; spaApp = Vue.createApp({ data() { return { loading: false }; }, methods: { async go(url, pushState = true) { this.loading = true; document.documentElement.classList.add("spa-loading"); window.PensatorePreloader?.show(); try { const response = await fetch(url, { headers: { "X-Requested-With": "fetch", Accept: "text/html" }, credentials: "same-origin", }); if (!response.ok) { window.location.href = url; return; } const html = await response.text(); const nextDocument = parser.parseFromString(html, "text/html"); const currentParts = getParts(document); const nextParts = getParts(nextDocument); if (!nextParts.view) { window.location.href = url; return; } syncHead(nextDocument); const updatedParts = [ replacePart(currentParts.view, nextParts.view), ].filter(Boolean); if (pushState) { history.pushState({ spa: true }, "", url); } updatedParts.forEach((part) => runScripts(part)); ensurePreloaderHidden(); document.querySelector("#mobile-nav .mobile-menu")?.classList.add("hidden"); document.querySelector("#mobile-nav .mobile-menu-toggle")?.setAttribute("aria-expanded", "false"); window.scrollTo({ top: 0, behavior: "auto" }); document.dispatchEvent(new CustomEvent("pensatore:page-loaded")); } catch (error) { window.location.href = url; } finally { this.loading = false; document.documentElement.classList.remove("spa-loading"); } }, }, }).mount(createMountNode()); return spaApp; } document.addEventListener("click", async (event) => { const link = event.target.closest("a[href]"); if (!shouldHandleLink(link, event)) return; event.preventDefault(); try { const Vue = await loadVue(); const spa = mountSpa(Vue); spa.go(link.href); } catch (error) { window.location.href = link.href; } }); window.addEventListener("popstate", () => { window.location.href = window.location.href; }); })(); </script> <script> document.addEventListener('DOMContentLoaded', function () { var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduceMotion) { document.documentElement.classList.add('ph-animate-static'); return; } document.documentElement.classList.add('ph-animate-ready'); var elements = document.querySelectorAll('.reveal-element'); elements.forEach(function (element, index) { element.style.setProperty('--ph-delay', Math.min(index, 4) * 60 + 'ms'); }); var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.08, rootMargin: '0px 0px -32px 0px' }); elements.forEach(function (element) { observer.observe(element); }); }); </script> </body> </html>