Case study
Strona dla firmy outsourcingu IT
Stabilne IT w abonamencie dla małych i średnich firm — helpdesk, M365, backup, strony WWW. Strona, która sama jest dowodem kompetencji technicznych.
Wyzwanie
Z czym przyszedł klient
Second Life IT obsługuje IT dla małych i średnich firm w Warszawie — helpdesk, Microsoft 365, backup, bezpieczeństwo, dodatkowo strony WWW. Rynek jest zatłoczony: korporacyjne agencje (drogie, sztywne SLA, długi onboarding) i freelancerzy (tanio, ale brak dostępności). Klient chciał strony, która równocześnie tłumaczy ofertę abonamentową, pokazuje konkretny czas reakcji, daje narzędzia do oceny kosztów (kalkulator) i sama jest dowodem na to, że firma rozumie performance. Wymóg twardy: strona ma być świadectwem warsztatu — szybka jak Vercel, dostępna jak rządowa, dostępna w Google jak konkurencyjny SaaS.
Podejście
Jak to rozwiązaliśmy
Wybraliśmy Next.js 14 z App Routerem i pełnym static exportem (`output: 'export'`) — żadnego SSR, brak runtime'u serwera, deploy jako Cloudflare Worker z Static Assets (zerowa zimna kolejka, anycast TLS). GSAP zaimportowany dynamicznie tylko po stronie klienta — nie wchodzi do bundla SSR i nie blokuje hydratacji. Hero z konkretnym headlinem i czterema kategoriami usług (Helpdesk do 2h, Microsoft 365, Backup & Security, Strony WWW & SEO), każda z własną podstroną. Kalkulator pakietu IT — interaktywny komponent w React, który na podstawie liczby stanowisk, godzin reakcji i pakietu (Standard / Pro / Premium) liczy szacunkową kwotę miesięczną. Formularz darmowego audytu IT przez Web3Forms (Web3Forms wysyła do skrzynki klienta, audyt to lead magnet pod outbound). Blog ekspercki — artykuły o NIS2, M365 backup, hardware refresh — pozyskuje ruch z Google na long-tail B2B. Pełna optymalizacja PSI: font preload z `display: swap`, polyfill stripping w postbuild (oszczędność 14 KiB Legacy JS), CSS inline w `<style>` z poprawą ścieżek `/media/`, nawigacja podkreślona compositorowo (transform/opacity, nigdy left/width). Schema.org Organization + Service per podstrona, sitemap.xml, RSS dla bloga. Cookie banner z localStorage.
Rezultaty
Co udało się osiągnąć
≥ 97
PSI mobile (cel: 100/100/100/100)
< 2h
deklarowany czas reakcji helpdesku
0 ms
zimnej kolejki — Cloudflare Worker
WCAG AA
pełna zgodność z dostępnością
Zakres prac
Co zbudowaliśmy
Static export na Cloudflare Worker
Next.js 14 z `output: 'export'`, deploy `wrangler deploy` — Worker spring-field-6108 z Static Assets. Anycast TLS, zerowa zimna kolejka.
Kalkulator pakietu IT
Suwak liczby stanowisk × godziny reakcji × pakiet → szacunkowy koszt miesięczny. Lead magnet zamiast 'wyceniamy indywidualnie'.
Formularz audytu Web3Forms
Bezpłatny audyt IT jako CTA — formularz z honeypotem, walidacją, RODO, automatyczną odpowiedzią. Bez backendu, bez kosztów.
Blog ekspercki B2B
Artykuły o NIS2, backup M365, hardware refresh — long-tail SEO pod 'outsourcing IT Warszawa', 'audyt bezpieczeństwa SMB'.
PSI mobile ≥ 97
Font preload, polyfill stripping (−14 KiB Legacy JS), inline CSS, GSAP dynamic import. Speed Index < 2,5s na Slow 4G.
GSAP bez CLS
Animacje hero przez transform/opacity, scroll reveal z ScrollTrigger. Dynamic import gwarantuje brak SSR-mismatch.
Schema.org Organization + Service
Każda usługa to osobna podstrona z `@type: Service` + cena widełkowo. Google pokazuje firmę w wynikach lokalnych Warszawy.
WCAG AA + skip-links
Kontrasty 4.5:1+, focus-visible na każdym interaktywnym elemencie, hierarchia H1-H4, alt na obrazkach, hamburger drawer z focus trap.
Stack technologiczny
Z czego jest zbudowane
Czas realizacji
niecałe 3 tygodnie
Twój projekt może być następny. Wyślij brief — przygotujemy konkretną propozycję w jeden dzień roboczy.
Wyceń podobny projektInne realizacje
Może Cię zainteresować
Strona własnej agencji web — pełen lejek od strategii po wdrożenie, cennik widełkowy, kalkulator brief.
BuildLab — strona własnej agencji
Next.js 14 · Tailwind · GSAP
Wielostronicowa wizytówka apartamentu wakacyjnego — blog, galeria, formularz Web3Forms.
Durres.pl — apartament w Albanii
HTML · GSAP · Swiper
Butikowy sklep e-commerce z hand-woven torebkami z naturalnych włókien — editorial design bez frameworków.
INARD — luxury hand-woven bags
Vanilla HTML · CSS · JSTwój projekt może być następny
Masz pomysł? Zrealizujemy go.
Niezależnie czy potrzebujesz nowej strony, sklepu czy modernizacji — wyślij brief i porozmawiajmy.