W dzisiejszym cyfrowym świecie, gdzie obecność online jest fundamentem sukcesu, zaniedbywanie dostępności stron internetowych to nie tylko kwestia etyki, ale i poważne ryzyko biznesowe oraz prawne. Miliony użytkowników z różnymi niepełnosprawnościami są codziennie wykluczane z dostępu do informacji i usług online, co stanowi ogromny, często niedoceniany problem. Wyobraź sobie, że tracisz znaczną część potencjalnych klientów lub czytelników, ponieważ Twoja strona jest dla nich niezrozumiała lub niemożliwa w obsłudze. To nie tylko frustrujące dla nich, ale i kosztowne dla Twojej firmy.

Konsekwencje braku dostępności to nie tylko utrata klientów, ale również kary finansowe i negatywny wizerunek, zwłaszcza w obliczu rosnących wymagań prawnych, takich jak Ustawa o Dostępności Cyfrowej w Polsce czy globalne standardy WCAG. Brak proaktywnego działania może postawić Twój biznes w trudnej sytuacji, rujnując latami budowaną reputację i zaufanie. W 2025 roku, kiedy społeczeństwo staje się coraz bardziej świadome, a technologia coraz bardziej inkluzywna, oczekiwania wobec dostępności są wyższe niż kiedykolwiek.

Na szczęście istnieje sprawdzona droga do rozwiązania tego problemu. Ten artykuł to kompleksowy przewodnik, który nie tylko wskaże Ci najlepsze wtyczki i praktyczne wskazówki do poprawy dostępności Twojej strony WordPress, ale także pomoże Ci zrozumieć złożone standardy WCAG i polskie przepisy. Z nami dowiesz się, jak krok po kroku uczynić swoją witrynę przyjazną dla wszystkich użytkowników, jednocześnie wzmacniając jej pozycję w Google i budując trwałe zaufanie. Zbudujmy razem przyszłość internetu, która jest otwarta dla każdego.

Dlaczego dostępność strony WordPress to nie opcja, a konieczność w 2025?

Dostępność cyfrowa to nic innego jak projektowanie i tworzenie stron internetowych w taki sposób, aby były one użyteczne dla jak najszerszego grona odbiorców, niezależnie od ich ograniczeń. Dotyczy to osób z niepełnosprawnościami wzroku (np. niewidomych, słabowidzących, daltonistów), słuchu (głuchych, niedosłyszących), ruchowymi (np. ograniczonym ruchem myszki) czy poznawczymi (np. dysleksja, ADHD). W erze cyfryzacji, wykluczenie tych grup to nie tylko kwestia braku empatii, ale i niezrozumienia dynamicznie zmieniającego się otoczenia prawnego i rynkowego. Standardy takie jak Web Content Accessibility Guidelines (WCAG) stały się globalnym punktem odniesienia, ewoluując do wersji 2.1, a obecnie 2.2, by sprostać nowym wyzwaniom technologicznym i potrzebom użytkowników. Ich celem jest zapewnienie, że treści są postrzegalne, funkcjonalne, zrozumiałe i solidne dla każdego.

W Polsce kwestie dostępności reguluje przede wszystkim Ustawa o Dostępności Cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych, która nakłada konkretne obowiązki na instytucje publiczne, ale której wpływ odczuwalny jest również w sektorze prywatnym. Firmy coraz częściej są oceniane pod kątem zgodności z tymi wytycznymi, co wpływa na ich reputację i zaufanie konsumentów. Warto podkreślić, że dostępność wykracza poza samą zgodność prawną; jest to inwestycja w uniwersalny design, który przynosi wymierne korzyści biznesowe. Zwiększa ona zasięg strony, umożliwiając dotarcie do większej liczby potencjalnych klientów i partnerów, poprawia doświadczenia użytkownika (UX) dla wszystkich, a także pozytywnie wpływa na SEO i widoczność w wyszukiwarkach. Algorytmy Google coraz bardziej doceniają strony, które są przemyślane pod kątem użyteczności dla wszystkich, co jest spójne z zasadami E-E-A-T (Experience, Expertise, Authoritativeness, Trust) - eksperckością, doświadczeniem, autorytetem i zaufaniem, które budujemy poprzez inkluzywne podejście do projektowania.

Kierując się zasadami dostępności, nie tylko spełniasz obowiązek prawny, ale także budujesz markę, która jest postrzegana jako odpowiedzialna i empatyczna. Dostępna strona to strona o wyższym poziomie zaufania, lepszych wskaźnikach retencji i konwersji. To nie jest już tylko „ładny dodatek”, ale fundamentalny element nowoczesnej strony internetowej, świadczący o profesjonalizmie i zrozumieniu potrzeb zróżnicowanej grupy odbiorców. W 2025 roku, ignorowanie dostępności to świadome ograniczenie własnego potencjału biznesowego i ryzyko utraty przewagi konkurencyjnej. Dlatego właśnie, niezależnie od tego, czy prowadzisz mały blog, czy duży sklep internetowy na WordPressie, dostępność powinna być priorytetem.

Wtyczki do dostępności WordPress - które wybrać i dlaczego?

WordPress, dzięki swojej elastyczności, oferuje wiele rozwiązań wspierających dostępność, a wtyczki stanowią jedno z najpopularniejszych narzędzi do szybkiej implementacji. Ważne jest jednak, aby zrozumieć, że sama instalacja wtyczki nie gwarantuje pełnej zgodności z WCAG. Wiele wtyczek typu „overlay” (nakładka) oferuje interfejsy do zmiany kontrastu, rozmiaru czcionki czy nawigacji klawiaturą, co jest pomocne, ale nie rozwiązuje fundamentalnych problemów z kodem strony czy strukturą treści. Prawdziwa dostępność wymaga głębszych zmian, często manualnych, które wtyczki mogą jedynie uzupełniać, a nie zastępować. Wybór odpowiedniej wtyczki powinien być podyktowany świadomością jej roli - jako asystenta, a nie cudownego rozwiązania.

Na rynku WordPress istnieje wiele wtyczek, które obiecują poprawę dostępności. Wtyczki takie jak WP Accessibility od Joe Dolsona są często rekomendowane ze względu na ich prostotę i skupienie na fundamentalnych problemach, takich jak dodawanie atrybutów `skip to content`, poprawianie tytułów, czy dodawanie opcji paska narzędzi dostępności. Inne, jak One Click Accessibility, oferują podobny zestaw funkcji, często z bardziej rozbudowanym panelem ustawień. Z kolei rozwiązania premium, takie jak UserWay czy accessiBe, wykorzystują zaawansowane algorytmy AI do analizy i modyfikacji strony w czasie rzeczywistym, co może wydawać się kuszące. Należy jednak pamiętać, że nawet te zaawansowane narzędzia nie zawsze radzą sobie ze wszystkimi niuansami, a ich skuteczność jest często kwestionowana przez ekspertów w dziedzinie dostępności, którzy podkreślają konieczność projektowania z myślą o dostępności od samego początku.

Decydując się na konkretną wtyczkę, należy wziąć pod uwagę jej aktualność, wsparcie dewelopera, kompatybilność z motywem i innymi wtyczkami WordPress oraz, co najważniejsze, zakres problemów, które rzeczywiście rozwiązuje. Niezależnie od wyboru, każda wtyczka wymaga konfiguracji i regularnego testowania, aby upewnić się, że wprowadzone zmiany faktycznie poprawiają dostępność. Pełne poleganie na automatycznych rozwiązaniach może prowadzić do fałszywego poczucia bezpieczeństwa i nie spełniać wszystkich wymagań WCAG, co ostatecznie może zakończyć się negatywnym wynikiem audytu.

Podsumowując, wybór wtyczki to strategiczna decyzja. Darmowe wtyczki, takie jak WP Accessibility, są doskonałym punktem wyjścia, szczególnie dla tych, którzy chcą aktywnie uczestniczyć w procesie dostosowywania swojej strony. Wtyczki premium, takie jak UserWay, mogą oferować bardziej zaawansowane funkcje i estetyczne nakładki, ale należy podchodzić do nich z rezerwą, pamiętając, że nie zastąpią one solidnego projektowania stron z uwzględnieniem dostępności od podstaw. Ostatecznie, najlepszym podejściem jest połączenie odpowiednio dobranych wtyczek z rzetelnymi, manualnymi poprawkami i regularnym audytem.

Praktyczny przewodnik: Manualne wskazówki dla w pełni dostępnej strony WordPress

Chociaż wtyczki mogą pomóc w automatyzacji niektórych aspektów dostępności, to kluczem do prawdziwie inkluzywnej strony WordPress jest staranna, manualna optymalizacja treści i struktury. Żaden algorytm nie zrozumie kontekstu obrazu czy złożoności języka tak dobrze, jak człowiek. Poniżej przedstawiamy kluczowe obszary, na które należy zwrócić uwagę, aby zapewnić zgodność z WCAG i stworzyć stronę przyjazną dla wszystkich użytkowników, bazując na solidnych praktykach projektowych i fundamentalnych elementach strony internetowej.

1. **Struktura Semantyczna HTML:** Używaj poprawnych tagów HTML (np. nagłówki H1-H6, listy `
   `, `
   • `, `
     `, ``). Nagłówki powinny być hierarchiczne i logiczne, aby czytniki ekranu mogły je poprawnie interpretować. Unikaj używania nagłówków do stylizacji tekstu. Dobre audyty techniczne SEO WordPress często uwzględniają poprawność struktury semantycznej, co jest korzystne zarówno dla dostępności, jak i SEO.

     <h1>Główny tytuł strony</h1>
     <p>Wprowadzenie do sekcji.</p>
     <h2>Podtytuł sekcji</h2>
     <ul>
         <li>Element listy</li>
     </ul>

     **Teksty Alternatywne (Alt Texts) dla Obrazów:** Każdy obraz, który przekazuje informację, powinien mieć atrybut `alt` zawierający zwięzły, opisowy tekst. Jeśli obraz jest czysto dekoracyjny, `alt=””` jest akceptowalny. To kluczowe dla osób niewidomych korzystających z czytników ekranu.

     <img src="krajobraz.jpg" alt="Malowniczy zachód słońca nad górami">

     **Nawigacja Klawiaturą i Focus:** Upewnij się, że cała strona jest w pełni funkcjonalna przy użyciu tylko klawiatury (klawisze Tab, Shift+Tab, Enter). Elementy interaktywne (linki, przyciski, pola formularzy) muszą być dostępne i mieć wyraźny wskaźnik fokusu (np. obramowanie po naciśnięciu Tab). W tym kontekście, responsywność strony to nie tylko dostosowanie do ekranów mobilnych, ale także do różnych metod interakcji.
     **Kontrast Kolorów i Czytelność Tekstu:** Tekst musi być czytelny na tle, na którym się znajduje. Sprawdź kontrast kolorów za pomocą narzędzi online, aby upewnić się, że spełnia on wytyczne WCAG (min. 4.5:1 dla tekstu standardowego, 3:1 dla dużego tekstu). Używaj czytelnych czcionek i odpowiedniej wielkości, szczególnie w treściach.
     **Dostępność Formularzy:** Wszystkie pola formularzy powinny mieć etykiety (``) powiązane z odpowiednimi polami (``, ``, `<select>`) za pomocą atrybutu `for`. Komunikaty o błędach muszą być jasne i wskazywać, jak je naprawić. Pamiętaj o dostępności <a href="https://api.studiokalmus.com/jak-zaprojektowac-formularz-kontaktowy-ktory-konwertuje/" style="color: #8135f5; text-decoration: underline;">formularzy kontaktowych, które konwertują</a>, zapewniając ich pełną dostępność.</p> <pre style="background-color: #2d3748; padding: 15px; border-radius: 5px; overflow-x: auto; font-size: 0.9em;"><code><label for="imie">Twoje imię:</label> <input type="text" id="imie" name="imie"></code></pre> </li> <li style="margin-bottom: 15px;"> **Opisy Linków i Przycisków:** Linki i przyciski powinny być zrozumiałe poza kontekstem. Zamiast „Kliknij tutaj”, użyj „Pobierz raport roczny” lub „Dowiedz się więcej o naszych usługach”. </li> <li style="margin-bottom: 15px;"> **Multimedia:** Dla filmów i nagrań audio zapewnij napisy, transkrypcje lub alternatywne opisy. Dla osób niesłyszących napisy są niezbędne, a dla osób niewidomych - deskrypcje audio lub transkrypcje. </li> </ol> <p>Implementacja tych manualnych wskazówek wymaga uwagi i konsekwencji, ale przynosi znacznie lepsze rezultaty niż poleganie wyłącznie na wtyczkach. To podejście buduje zaufanie i pokazuje rzeczywistą troskę o wszystkich użytkowników, co w kontekście E-E-A-T jest nieocenione. Regularnie weryfikuj swoją stronę pod kątem tych elementów, zwłaszcza po dodaniu nowych treści lub funkcjonalności, aby utrzymać wysoki poziom dostępności. Warto zwrócić uwagę na to, by już na etapie <a href="https://api.studiokalmus.com/jak-zalozyc-strone-wordpress-2025-kompletny-przewodnik/" style="color: #8135f5; text-decoration: underline;">zakładania strony WordPress</a> myśleć o tych aspektach, aby uniknąć kosztownych poprawek w przyszłości.</p> <h2 id="sekcja4" style="color: #8135f5; border-bottom: 2px solid #374151; padding-bottom: 10px;">Audyt i utrzymanie dostępności - jak zapewnić długoterminową zgodność?</h2> <p>Stworzenie dostępnej strony to dopiero początek. Kluczowe jest regularne testowanie i utrzymanie jej zgodności z wytycznymi WCAG, ponieważ treści i funkcjonalności na stronach internetowych stale się zmieniają. Proces ten jest analogiczny do regularnych <a href="https://api.studiokalmus.com/audyt-seo-strony-kompleksowa-analiza-i-optymalizacja/" style="color: #8135f5; text-decoration: underline;">audytów SEO</a> czy <a href="https://api.studiokalmus.com/audyt-techniczny-seo-wordpress-kompletna-checklista/" style="color: #8135f5; text-decoration: underline;">audytów technicznych WordPress</a> - wymaga systematyczności i odpowiednich narzędzi. Zaniedbanie tego etapu może prowadzić do ponownego pojawienia się barier, zwłaszcza po aktualizacjach WordPressa, wtyczek czy motywów, lub po wprowadzeniu nowych treści przez zespół. Dlatego tak ważne jest wdrożenie stałych procedur i edukacja osób odpowiedzialnych za zarządzanie stroną.</p> <p>Do automatycznego audytu dostępności możesz wykorzystać szereg narzędzi. Google Lighthouse, wbudowane w przeglądarkę Chrome, oferuje kompleksowy raport z sekcją „Dostępność”, wskazującą na konkretne problemy i sugerujące rozwiązania. Inne narzędzia, takie jak Axe DevTools (rozszerzenie przeglądarki) czy online’owe Wave Accessibility Tool, również dostarczają szczegółowych analiz. Pamiętaj jednak, że narzędzia automatyczne wykrywają jedynie około 30-50% problemów z dostępnością. Reszta wymaga testów manualnych, które są niezastąpione w ocenie kontekstu i użyteczności. Obejmują one nawigację klawiaturą (czy można dotrzeć do wszystkich elementów interaktywnych?), testowanie za pomocą czytników ekranu (takich jak NVDA dla Windowsa czy VoiceOver dla macOS), oraz weryfikację kontrastu kolorów i czytelności tekstu przez osoby z różnymi potrzebami. <a href="https://api.studiokalmus.com/darmowe-narzedzia-do-audytu-seo-2025-studio-kalmus/" style="color: #8135f5; text-decoration: underline;">Darmowe narzędzia do audytu</a> są świetnym punktem wyjścia, ale warto rozważyć także profesjonalne wsparcie.</p> <p>Utrzymanie dostępności to proces ciągły. Oznacza to regularne przeglądy treści, szczególnie te, które są dynamicznie aktualizowane. Należy upewnić się, że nowe obrazy mają prawidłowe teksty alternatywne, filmy są opatrzone napisami, a formularze nadal są zgodne z wytycznymi. Ponadto, każda aktualizacja motywu lub wtyczek WordPressa powinna być poprzedzona weryfikacją jej wpływu na dostępność. W przypadku poważniejszych zmian w projekcie strony, np. przy <a href="https://api.studiokalmus.com/migracja-strony-bez-utraty-pozycji-w-google-poradnik/" style="color: #8135f5; text-decoration: underline;">migracji strony</a>, pełny audyt dostępności jest absolutnie konieczny. Jeśli brakuje Ci wewnętrznych zasobów lub wiedzy, warto rozważyć zlecenie <a href="https://api.studiokalmus.com/audyt-seo-strony-kompleksowa-analiza-i-optymalizacja/" style="color: #8135f5; text-decoration: underline;">profesjonalnego audytu dostępności</a> zewnętrznej agencji, która specjalizuje się w tworzeniu <a href="https://api.studiokalmus.com/strony-internetowe-warszawa-profesjonalne-strony-www/" style="color: #8135f5; text-decoration: underline;">profesjonalnych stron WWW</a> z uwzględnieniem wszystkich standardów. Zapewni to nie tylko zgodność z przepisami, ale także spokój ducha i pewność, że Twoja witryna jest prawdziwie uniwersalna.</p> <h2 id="faq" style="color: #8135f5; border-bottom: 2px solid #374151; padding-bottom: 10px;">Najczęściej Zadawane Pytania (FAQ)</h2> <div style="background: #1e293b; padding: 25px; margin: 25px 0; border-radius: 8px;"> <h3 style="margin: 0 0 15px 0; color: #e2e8f0;">Czy wtyczka do dostępności w WordPressie wystarczy, by spełnić wymogi WCAG?</h3> <p style="opacity: 0.9;">Niestety, sama wtyczka zazwyczaj nie wystarczy. Wtyczki mogą zautomatyzować niektóre aspekty, takie jak pasek narzędzi dostępności czy podstawowe poprawki w kodzie, ale nie rozwiążą problemów z treścią (np. brak sensownych tekstów alternatywnych, nieczytelny język), strukturą strony czy niuansami projektowymi. Pełna zgodność z WCAG wymaga kompleksowego podejścia, łączącego wtyczki z manualnymi poprawkami w kodzie, treści i <a href="https://api.studiokalmus.com/ux-ui-design-klucz-do-sukcesu-twojej-strony-internetowej/" style="color: #8135f5; text-decoration: underline;">projektowaniu UX/UI</a>.</p> <hr style="border-color: #374151; margin: 20px 0;"> <h3 style="margin: 0 0 15px 0; color: #e2e8f0;">Jakie są najważniejsze korzyści z posiadania dostępnej strony WordPress, poza zgodnością z prawem?</h3> <p style="opacity: 0.9;">Poza zgodnością z polską Ustawą o Dostępności Cyfrowej i standardami WCAG, dostępna strona przynosi wiele korzyści biznesowych i wizerunkowych:</p> <ul style="margin: 10px 0 0 20px; list-style-type: disc;"> <li style="margin-bottom: 5px;">**Większy zasięg odbiorców:** Dostępność otwiera Twoją stronę na miliony osób z różnymi niepełnosprawnościami, które są często niedocenioną grupą konsumentów.</li> <li style="margin-bottom: 5px;">**Poprawione SEO:** Wyszukiwarki, takie jak Google, coraz bardziej cenią strony dostępne i użyteczne dla wszystkich, co przekłada się na lepsze <a href="https://api.studiokalmus.com/pozycjonowanie-stron-internetowych-skuteczne-metody-seo-na-wysokie-pozycje-w-google/" style="color: #8135f5; text-decoration: underline;">pozycje w wynikach wyszukiwania</a>.</li> <li style="margin-bottom: 5px;">**Lepsze doświadczenia użytkownika (UX):** Rozwiązania wprowadzone dla osób niepełnosprawnych często poprawiają użyteczność dla wszystkich użytkowników (np. czytelny kontrast, intuicyjna nawigacja klawiaturą).</li> <li style="margin-bottom: 5px;">**Wzrost zaufania i wizerunku marki:** Firma dbająca o dostępność jest postrzegana jako bardziej odpowiedzialna społecznie i profesjonalna, co buduje lojalność i pozytywny wizerunek.</li> </ul> <hr style="border-color: #374151; margin: 20px 0;"> <h3 style="margin: 0 0 15px 0; color: #e2e8f0;">Co to jest atrybut alt i dlaczego jest tak ważny dla dostępności w WordPressie?</h3> <p style="opacity: 0.9;">Atrybut `alt` (skrót od „alternative text” - tekst alternatywny) to element kodu HTML przypisywany do obrazów. Jego celem jest dostarczenie tekstowego opisu zawartości obrazu. Jest on kluczowy dla dostępności, ponieważ:</p> <ul style="margin: 10px 0 0 20px; list-style-type: disc;"> <li style="margin-bottom: 5px;">**Dla czytników ekranu:** Osoby niewidome lub słabowidzące korzystające z czytników ekranu słyszą opis obrazu zawarty w atrybucie `alt`, co pozwala im zrozumieć wizualny aspekt strony.</li> <li style="margin-bottom: 5px;">**Dla wyszukiwarek:** Teksty alternatywne pomagają wyszukiwarkom zrozumieć temat obrazu, co poprawia <a href="https://api.studiokalmus.com/optymalizacja-zdjec-wordpress-jak-przyspieszyc-strone/" style="color: #8135f5; text-decoration: underline;">optymalizację zdjęć pod kątem SEO</a>.</li> <li style="margin-bottom: 5px;">**W przypadku problemów z ładowaniem:** Jeśli obraz nie zostanie załadowany, przeglądarka wyświetli tekst alternatywny, dzięki czemu użytkownik nadal będzie miał pojęcie o jego zawartości.</li> </ul> <p> Należy pamiętać, aby teksty alt były zwięzłe, opisowe i oddawały istotę obrazu w jego kontekście na stronie. </p> </p></div> <p> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{ "@type": "Question", "name": "Czy wtyczka do dostępności w WordPressie wystarczy, by spełnić wymogi WCAG?", "acceptedAnswer": { "@type": "Answer", "text": "Niestety, sama wtyczka zazwyczaj nie wystarczy. Wtyczki mogą zautomatyzować niektóre aspekty, takie jak pasek narzędzi dostępności czy podstawowe poprawki w kodzie, ale nie rozwiążą problemów z treścią (np. brak sensownych tekstów alternatywnych, nieczytelny język), strukturą strony czy niuansami projektowymi. Pełna zgodność z WCAG wymaga kompleksowego podejścia, łączącego wtyczki z manualnymi poprawkami w kodzie, treści i projektowaniu UX/UI." } }, { "@type": "Question", "name": "Jakie są najważniejsze korzyści z posiadania dostępnej strony WordPress, poza zgodnością z prawem?", "acceptedAnswer": { "@type": "Answer", "text": "Poza zgodnością z polską Ustawą o Dostępności Cyfrowej i standardami WCAG, dostępna strona przynosi wiele korzyści biznesowych i wizerunkowych: Większy zasięg odbiorców, poprawione SEO, lepsze doświadczenia użytkownika (UX), wzrost zaufania i wizerunku marki. Dostępność otwiera Twoją stronę na miliony osób z różnymi niepełnosprawnościami, co przekłada się na lepsze pozycje w wynikach wyszukiwania i buduje lojalność." } }, { "@type": "Question", "name": "Co to jest atrybut alt i dlaczego jest tak ważny dla dostępności w WordPressie?", "acceptedAnswer": { "@type": "Answer", "text": "Atrybut `alt` (skrót od \"alternative text\" - tekst alternatywny) to element kodu HTML przypisywany do obrazów. Jest kluczowy dla dostępności, ponieważ dla czytników ekranu osoby niewidome lub słabowidzące słyszą opis obrazu, dla wyszukiwarek pomaga zrozumieć temat obrazu (SEO), a w przypadku problemów z ładowaniem obrazu, tekst alternatywny jest wyświetlany. Należy pamiętać, aby teksty alt były zwięzłe, opisowe i oddawały istotę obrazu w jego kontekście na stronie." } }] } </script></p> <div style="background: linear-gradient(135deg, #8135F5, #ec4899); padding: 40px; border-radius: 20px; color: white; margin: 40px 0; text-align: center; box-shadow: 0 10px 30px rgba(129, 53, 245, 0.4);"> <h3 style="margin: 0 0 15px 0; font-size: 1.9em; font-weight: bold;">Chcesz mieć pewność, że Twoja strona WordPress jest w pełni dostępna i zgodna z prawem?</h3> <p style="margin: 0 0 25px 0; font-size: 1.15em; opacity: 0.95;">Skonsultuj się ze Studio Kalmus! Oferujemy profesjonalne <a href="https://api.studiokalmus.com/audyt-seo-strony-kompleksowa-analiza-i-optymalizacja/" style="color: white; text-decoration: underline;">audyty dostępności</a>, <a href="https://api.studiokalmus.com/projektowanie-stron/" style="color: white; text-decoration: underline;">tworzenie stron WWW</a> zgodnych z WCAG oraz kompleksowe <a href="https://api.studiokalmus.com/uslugi-reklamowe/" style="color: white; text-decoration: underline;">usługi reklamowe</a> i <a href="https://api.studiokalmus.com/pozycjonowanie-stron-internetowych-skuteczne-metody-seo-na-wysokie-pozycje-w-google/" style="color: white; text-decoration: underline;">SEO</a>. Zbudujmy razem inkluzywną i efektywną obecność online!</p> <p> <a href="https://api.studiokalmus.com" style="background: white; color: #8135F5; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; display: inline-block; transition: transform 0.2s ease;">📊 Zamów Profesjonalne Strony WWW i Audyty Dostępności</a> </div> </article> </div></article><div class="hidden lg:block sticky top-32 h-fit"><div class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-sm"><p class="text-xs text-accent-red uppercase tracking-widest font-mono mb-3">Studio Kalmus</p><h4 class="text-white font-oswald font-bold text-lg uppercase leading-tight mb-3">Potrzebujesz profesjonalnej strony?</h4><p class="text-neutral-400 text-sm leading-relaxed mb-5">Tworzymy nowoczesne strony internetowe dla firm. Bezpłatna wycena w 24h.</p><a class="group relative inline-flex items-center justify-center overflow-hidden font-outfit font-medium uppercase tracking-widest transition-all duration-300 w-full mb-4 px-6 py-3 text-xs" href="/kontakt"><div class="absolute inset-0 transition-transform duration-300 ease-out origin-left bg-accent-red "></div><span class="relative z-10 flex items-center gap-2 text-white">Bezpłatna Wycena<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right relative z-10 text-white" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a><div class="space-y-2 pt-4 border-t border-white/5"><p class="text-[10px] text-neutral-500 uppercase tracking-widest mb-2">Usługi</p><a class="block text-xs uppercase tracking-wider text-neutral-400 hover:text-accent-red transition-colors" href="/projektowanie-stron">Projektowanie stron</a><a class="block text-xs uppercase tracking-wider text-neutral-400 hover:text-accent-red transition-colors" href="/tworzenie-stron-internetowych">Tworzenie stron</a><a class="block text-xs uppercase tracking-wider text-neutral-400 hover:text-accent-red transition-colors" href="/sklepy-internetowe">Sklepy internetowe</a></div></div><a class="block mt-6 rounded-2xl border border-white/10 bg-neutral-900/50 p-5 hover:border-accent-red/30 transition-all group" href="/hosting/kod-rabatowy"><div class="flex items-center gap-3 mb-3"><div class="w-10 h-10 rounded-lg bg-accent-red/10 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server w-5 h-5 text-accent-red" aria-hidden="true"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line></svg></div><p class="text-xs text-accent-red uppercase tracking-widest font-mono">Hosting</p></div><h4 class="text-white font-oswald font-bold text-sm uppercase leading-tight mb-2 group-hover:text-accent-red transition-colors">SeoHost z rabatem</h4><p class="text-neutral-400 text-xs leading-relaxed mb-3">Kod <span class="text-white font-mono font-semibold">studiokalmus55</span> daje 40% rabatu na serwer. NVMe, SSL, wsparcie 24/7.</p><span class="text-xs text-accent-red uppercase tracking-widest font-medium">Sprawdź ofertę →</span></a></div></div></div></section><section class="bg-black py-16 lg:py-24"><div class="w-full max-w-[1920px] mx-auto px-6 md:px-12 lg:px-24"><div class="rounded-2xl border border-white/10 bg-white/5 p-8 md:p-12 lg:p-16 text-center"><p class="text-xs text-accent-red uppercase tracking-widest font-mono mb-4">Studio Kalmus</p><h3 class="text-2xl md:text-3xl lg:text-4xl font-oswald font-bold text-white uppercase mb-4">Potrzebujesz profesjonalnej strony?</h3><p class="text-neutral-300 text-lg max-w-xl mx-auto mb-8 leading-relaxed">Tworzymy nowoczesne strony internetowe dla firm. Bezpłatna wycena w 24h.</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"><a class="group relative inline-flex items-center justify-center overflow-hidden font-outfit font-medium uppercase tracking-widest transition-all duration-300 px-8 py-4 text-sm" href="/kontakt"><div class="absolute inset-0 transition-transform duration-300 ease-out origin-left bg-accent-red "></div><span class="relative z-10 flex items-center gap-2 text-white">Zamów Bezpłatną Wycenę<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right relative z-10 text-white" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a><a class="group relative inline-flex items-center justify-center overflow-hidden font-outfit font-medium uppercase tracking-widest transition-all duration-300 border border-neutral-200 px-8 py-4 text-sm" href="/projektowanie-stron"><div class="absolute inset-0 transition-transform duration-300 ease-out origin-left bg-accent-red scale-x-0 group-hover:scale-x-100 "></div><span class="relative z-10 flex items-center gap-2 text-white">Zobacz Nasze Usługi<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right relative z-10 text-white translate-x-0 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a></div><div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2"><a class="text-sm text-neutral-400 hover:text-accent-red transition-colors uppercase tracking-wider" href="/projektowanie-stron">Projektowanie stron</a><a class="text-sm text-neutral-400 hover:text-accent-red transition-colors uppercase tracking-wider" href="/tworzenie-stron-internetowych">Tworzenie stron</a><a class="text-sm text-neutral-400 hover:text-accent-red transition-colors uppercase tracking-wider" href="/sklepy-internetowe">Sklepy internetowe</a><a class="text-sm text-neutral-400 hover:text-accent-red transition-colors uppercase tracking-wider" href="/uslugi/wordpress">WordPress</a></div></div><div class="mt-8 rounded-2xl border border-white/10 bg-neutral-900/50 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6"><div class="w-14 h-14 rounded-xl bg-accent-red/10 flex items-center justify-center shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server w-7 h-7 text-accent-red" aria-hidden="true"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line></svg></div><div class="flex-1 text-center md:text-left"><h4 class="text-white font-oswald font-bold text-lg uppercase mb-1">Szukasz hostingu? SeoHost z rabatem</h4><p class="text-neutral-400 text-sm leading-relaxed">Kod <span class="text-white font-mono font-semibold">studiokalmus55</span> daje 40% rabatu na aktywację serwera. Szybkie NVMe, SSL i wsparcie 24/7.</p></div><a class="shrink-0 bg-accent-red text-white px-6 py-3 font-outfit font-medium uppercase tracking-widest text-sm hover:bg-red-700 transition-colors rounded-xl" href="/hosting/kod-rabatowy">Sprawdź Ofertę</a></div></div></section><section class="bg-black py-16 lg:py-24 border-t border-white/5"><div class="w-full max-w-[1920px] mx-auto px-6 md:px-12 lg:px-24"><div class="text-center mb-12"><p class="text-xs text-accent-red uppercase tracking-widest font-mono mb-4">Nasze Usługi</p><h3 class="text-2xl md:text-3xl font-oswald font-bold text-white uppercase mb-4">Potrzebujesz profesjonalnej strony internetowej?</h3><p class="text-neutral-400 text-lg max-w-2xl mx-auto leading-relaxed">Specjalizujemy się w tworzeniu stron internetowych, które generują klientów. Sprawdź, co możemy dla Ciebie zrobić.</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"><a class="group rounded-2xl border border-white/5 bg-neutral-900/50 p-6 hover:border-accent-red/30 hover:bg-neutral-900 transition-all duration-300" href="/projektowanie-stron"><div class="w-12 h-12 rounded-xl bg-accent-red/10 flex items-center justify-center mb-4 group-hover:bg-accent-red/20 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor w-6 h-6 text-accent-red" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg></div><h4 class="text-white font-oswald font-bold uppercase text-lg mb-2 group-hover:text-accent-red transition-colors">Projektowanie Stron</h4><p class="text-neutral-400 text-sm leading-relaxed">Nowoczesne strony internetowe dopasowane do Twojej branży</p></a><a class="group rounded-2xl border border-white/5 bg-neutral-900/50 p-6 hover:border-accent-red/30 hover:bg-neutral-900 transition-all duration-300" href="/tworzenie-stron-internetowych"><div class="w-12 h-12 rounded-xl bg-accent-red/10 flex items-center justify-center mb-4 group-hover:bg-accent-red/20 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code w-6 h-6 text-accent-red" aria-hidden="true"><path d="m16 18 6-6-6-6"></path><path d="m8 6-6 6 6 6"></path></svg></div><h4 class="text-white font-oswald font-bold uppercase text-lg mb-2 group-hover:text-accent-red transition-colors">Tworzenie Stron</h4><p class="text-neutral-400 text-sm leading-relaxed">Responsywne strony WWW z gwarancją jakości i wsparcia</p></a><a class="group rounded-2xl border border-white/5 bg-neutral-900/50 p-6 hover:border-accent-red/30 hover:bg-neutral-900 transition-all duration-300" href="/sklepy-internetowe"><div class="w-12 h-12 rounded-xl bg-accent-red/10 flex items-center justify-center mb-4 group-hover:bg-accent-red/20 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart w-6 h-6 text-accent-red" aria-hidden="true"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></svg></div><h4 class="text-white font-oswald font-bold uppercase text-lg mb-2 group-hover:text-accent-red transition-colors">Sklepy Internetowe</h4><p class="text-neutral-400 text-sm leading-relaxed">Sklepy e-commerce na WooCommerce i dedykowanych platformach</p></a><a class="group rounded-2xl border border-white/5 bg-neutral-900/50 p-6 hover:border-accent-red/30 hover:bg-neutral-900 transition-all duration-300" href="/uslugi/landing-page"><div class="w-12 h-12 rounded-xl bg-accent-red/10 flex items-center justify-center mb-4 group-hover:bg-accent-red/20 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panels-top-left w-6 h-6 text-accent-red" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg></div><h4 class="text-white font-oswald font-bold uppercase text-lg mb-2 group-hover:text-accent-red transition-colors">Landing Page</h4><p class="text-neutral-400 text-sm leading-relaxed">Skuteczne strony sprzedażowe i landing page pod kampanie</p></a></div><div class="text-center"><a class="inline-flex items-center gap-2 bg-accent-red text-white px-8 py-4 font-outfit font-medium uppercase tracking-widest text-sm hover:bg-red-700 transition-colors" href="/kontakt">Zamów Bezpłatną Wycenę<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div></div></section><section class="bg-neutral-950 py-24 border-t border-white/5"><div class="w-full max-w-[1920px] mx-auto px-6 md:px-12 lg:px-24"><div class="flex justify-between items-end mb-12"><h3 class="text-3xl font-oswald font-bold text-white uppercase">Czytaj Dalej</h3><a class="text-sm font-bold uppercase tracking-wider text-accent-red hover:text-white transition-colors" href="/blog">Wszystkie Artykuły</a></div><div class="grid grid-cols-1 md:grid-cols-2 gap-8"><a class="group flex gap-6 items-center bg-neutral-900/50 p-4 rounded-2xl border border-white/5 hover:border-white/20 transition-all" href="/blog"><div class="relative w-24 h-24 shrink-0 rounded-xl overflow-hidden"><div class="absolute inset-0 bg-neutral-800"></div></div><div><span class="text-xs text-accent-red uppercase tracking-wider font-mono mb-2 block">Blog</span><h4 class="text-white font-bold group-hover:text-accent-red transition-colors">Zobacz Więcej Wpisów</h4></div></a></div></div></section><section id="contact" class="w-full py-24 px-6 md:px-12 relative overflow-hidden" style="background-color:rgba(255, 255, 255, 1)"><div class="absolute bottom-0 left-0 w-full h-[80%] opacity-25 pointer-events-none mix-blend-screen -z-10"><img alt="Digital Workspace Background" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-bottom" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fdark_workspace_red_glow.webp&w=640&q=60 640w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=750&q=60 750w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=828&q=60 828w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=1080&q=60 1080w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=1200&q=60 1200w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=1920&q=60 1920w, /_next/image?url=%2Fdark_workspace_red_glow.webp&w=2048&q=60 2048w" src="/_next/image?url=%2Fdark_workspace_red_glow.webp&w=2048&q=60"/></div><div class="w-full max-w-[1920px] mx-auto px-6 md:px-12 lg:px-24"><div class="grid xl:grid-cols-2 gap-16 md:gap-24 max-w-[1400px] mx-auto items-end"><div class="flex flex-col gap-8 relative z-10" style="opacity:0;transform:translateX(-50px)"><div class="relative w-full mb-20 md:mb-32 flex flex-col items-start text-left mb-8 xl:mb-8 w-full max-w-none"><p class="header-subtitle text-accent-red font-mono text-sm md:text-base mb-4 tracking-widest uppercase" style="opacity:0;transform:translateY(20px)">[ <!-- -->09 / Kontakt<!-- --> ]</p><div class="flex flex-col xl:flex-row gap-8 xl:gap-16 items-start xl:items-end justify-between w-full"><h2 class="text-5xl md:text-7xl xl:text-8xl 2xl:text-[9rem] font-oswald font-black uppercase leading-[0.85] tracking-tight text-white max-w-5xl "><span class="inline-block whitespace-nowrap mr-[0.2em] last:mr-0"><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">C</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">z</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">e</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">k</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">a</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">m</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">y</span></span><span class="inline-block whitespace-nowrap mr-[0.2em] last:mr-0"><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">n</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">a</span></span> <br class="block"/><span class="text-accent-red"><span class="inline-block whitespace-nowrap mr-[0.2em] last:mr-0"><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">T</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">w</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">o</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">j</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">ą</span></span><span class="inline-block whitespace-nowrap mr-[0.2em] last:mr-0"><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">W</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">i</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">a</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">d</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">o</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">m</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">o</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">ś</span><span class="inline-block" style="perspective:1000px;transform-style:preserve-3d;opacity:0;transform:translateY(100px) rotateX(-90deg)">ć</span></span></span></h2></div></div><p class="text-neutral-400 leading-relaxed text-lg">Teraz albo nigdy! Nie odkładaj tego na później. Działaj, zanim stracisz swoją przewagę!</p><div class="mt-8"><a href="tel:+48577526649" class="text-white font-bold text-xl mb-1 hover:text-accent-red transition-colors block">+48 577 526 649</a><a href="mailto:info@studiokalmus.com" class="text-accent-red font-mono hover:text-white transition-colors block">info@studiokalmus.com</a><div class="mt-8"><button class="group relative inline-flex items-center justify-center overflow-hidden font-outfit font-medium uppercase tracking-widest transition-all duration-300 border border-neutral-200 border-white/20 hover:border-accent-red px-6 py-3 text-xs cursor-pointer"><div class="absolute inset-0 transition-transform duration-300 ease-out origin-left bg-accent-red scale-x-0 group-hover:scale-x-100 "></div><span class="relative z-10 flex items-center gap-2 text-white">Umów konsultację<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right relative z-10 text-white translate-x-0 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></button></div></div></div><div class="relative z-10" style="opacity:0;transform:translateX(50px)"><form class="flex flex-col gap-6"><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="relative group"><input type="text" placeholder="Imię" class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors" value=""/><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div><div class="relative group"><input type="email" placeholder="Email" class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors" value=""/><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="relative group"><input type="tel" placeholder="Telefon (opcjonalnie)" class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors" value=""/><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div><div class="relative group"><input type="text" placeholder="Adres strony (opcjonalnie)" class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors" value=""/><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="relative group"><select class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors appearance-none cursor-pointer [&>option]:bg-neutral-900 [&>option]:text-white"><option value="" disabled="" class="text-neutral-600" selected="">Czego potrzebujesz?</option><option value="strona-firmowa">Strona firmowa</option><option value="landing-page">Landing page</option><option value="sklep-internetowy">Sklep internetowy</option><option value="aplikacja-webowa">Aplikacja webowa</option><option value="redesign">Redesign istniejącej strony</option><option value="seo">Pozycjonowanie SEO</option><option value="branding">Logo / Branding</option><option value="inne">Inne</option></select><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div><div class="relative group"><select class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors appearance-none cursor-pointer [&>option]:bg-neutral-900 [&>option]:text-white"><option value="" disabled="" class="text-neutral-600" selected="">Orientacyjny budżet</option><option value="do-3000">Do 3 000 zł</option><option value="3000-5000">3 000 - 5 000 zł</option><option value="5000-10000">5 000 - 10 000 zł</option><option value="10000-20000">10 000 - 20 000 zł</option><option value="powyzej-20000">Powyżej 20 000 zł</option><option value="nie-wiem">Nie wiem jeszcze</option></select><div class="absolute bottom-0 left-0 w-0 h-[1px] bg-accent-red transition-all duration-500 group-hover:w-full"></div></div></div><div class="relative group"><textarea placeholder="Opisz swój projekt..." rows="4" class="w-full bg-transparent border-b border-neutral-800 py-4 text-white focus:outline-none focus:border-accent-red transition-colors resize-none placeholder:text-neutral-600">

     Akceptuję Regulamin oraz Politykę Prywatności

     Wyślij Wiadomość

     W dni robocze odpisujemy w max 60 minut.