Usługa
Nowoczesne strony internetowe. Design-led, nie stack-led.
Strony na poziomie realizacji nagradzanych w Awwwards. Animacje, własny kursor, przejścia między widokami, efekty uruchamiane przewijaniem. Technologię dobieramy do projektu, nie odwrotnie. Jeśli szukasz konkretnej technologii, zajrzyj do [Stron WordPress](/uslugi/tworzenie-stron-wordpress) albo [Stron Next.js](/uslugi/aplikacje-nextjs).
Tak to wygląda w praktyce.
Klient · 2026
Galabau Darius
Aplikacja konfiguratora ogrodzeń Galabau Darius to nowoczesna strona w stacku 2026: Next.js 14 App Router, React Server Components, Tailwind, Vercel edge, Clerk auth, real-time data. Lighthouse 99, LCP 0.8s globalnie. Dla niemieckiej firmy ogrodniczej z dużym ruchem organicznym.
- Next.js
- React
- Clerk
- Prisma
- Tailwind
- Framer Motion
Tę usługę robię dla klientów, którym standardowy szablon nie wystarczy. Marka ma zostać zapamiętana, oferta jest z wyższej półki, a konkurencja wciąż ma strony z 2018 roku. Wtedy ma sens wejść na poziom Lusion, ActiveTheory czy raviklaassens.com.
Co dostajesz wizualnie: własny kursor, animacje uruchamiane przewijaniem (GSAP ScrollTrigger), przejścia między widokami, elementy 3D w R3F (jeśli pasują), mikrointerakcje po najechaniu kursorem, ciemny motyw jako stan domyślny. Do tego standardy 2026: Core Web Vitals 95+, schema.org dla AI search, obrazki OG per podstrona.
Konkretną technologię dobieram po briefie. Jeśli strona to głównie treści, które klient chce edytować sam, wybieram headless WordPress. Jeśli ma własną logikę i panel, Next.js. Szczegóły techniczne opisałem osobno dla WordPressa i dla Next.js.
Cztery rzeczy, które dostajesz.
— 01
Animacje z ScrollTriggera
GSAP ScrollTrigger, przejścia między widokami, elementy pojawiające się kolejno, paralaksa. Każda sekcja wita się inaczej. Ustawienie ograniczenia ruchu jest respektowane.
— 02
Własny kursor i mikrointerakcje
Kursor zmienia się nad linkami, projektami i formularzami. Hovery dopracowane w detalu, nie tylko `color: peach`.
— 03
3D bez ciężaru
React Three Fiber do pojedynczych efektów (pierwszy ekran, przeciągalna sfera 3D, scena przy przewijaniu). Ładowany z opóźnieniem, na telefonie statyczny zamiennik.
— 04
Dark mode natywny
Strona projektowana w ciemnym trybie od początku, jasny jako dodatek (nie odwrotnie). Paleta OKLCH, głębia przez gradienty i szum.
Krok po kroku.
- 01
Rozpoznanie i benchmarki
Audyt obecnej strony (jeśli jest) + 3 referencje docelowe. Mierzymy wyjściową wydajność.
- 02
Design i tokeny
Design system w Figmie, z niego tokeny Tailwind, z nich komponenty. Spójność od projektu po kod.
- 03
Wdrożenie
Next.js App Router, Sanity/Contentful jako CMS, Vercel preview deploys per PR.
- 04
Performance + SEO
Audyt Lighthouse każdej podstrony, schema, obrazy OG, sitemap, Search Console.
Krótkie odpowiedzi.
Czym 'nowoczesna' różni się od zwykłej strony?+
Designem i interakcją, nie technologią. Zwykła strona prezentuje treść. Nowoczesna prowadzi przez treść animacjami, custom kursorem, przejściami między podstronami. Stack (WordPress, Next.js) dobieramy do potrzeb edycji, nie do efektu.
Jaki stack pod spodem?+
Zależy od briefu. Strona content-first z redakcją: WordPress headless + Next.js frontend. Aplikacja z panelem: Next.js end-to-end. Konkretne porównanie [w usłudze Strony Next.js](/uslugi/aplikacje-nextjs).
Ile to kosztuje?+
Wycena zależy od zakresu animacji, headless CMS, customowej logiki oraz tego, czy powstaje strona firmowa, produktowa lub aplikacja. Wycenę przygotowuję indywidualnie po zapoznaniu się z briefem.
Ile trwa projekt nowoczesnej strony?+
Strona firmowa z animacjami: 6-10 tygodni od briefu do startu. Z headless CMS i customową logiką: 10-16 tygodni. Design zatwierdzasz w Figmie przed pierwszą linijką kodu.
Czy klient nadal edytuje sam?+
Tak. Sanity, Contentful albo headless WordPress jako CMS. Animacje skonfigurowane raz przez programistę, treść edytowalna w panelu.
Czy reduced motion zostanie obsłużony?+
Tak, każda animacja respektuje `prefers-reduced-motion`. Użytkownicy z włączonym ustawieniem dostają statyczną wersję bez parallaxu i transitions.