maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
dcbf8b5db6
nordabiz/docs/UI_ANALYSIS_NORDA_BIZNES_INFO.md
Maciej Pienczyn 448937dabd fix: Rename pkd_codes column to ceidg_pkd_list to avoid backref conflict 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 07:22:32 +01:00

31 KiB
Raw Blame History

Analiza UI/UX strony norda-biznes.info

Data analizy: 2026-01-30 Cel: Baza wiedzy do przeróbki interfejsu graficznego nordabiznes.pl Źródło: https://norda-biznes.info

1. TECHNOLOGIE

Framework CSS

  • Tailwind CSS - pełna implementacja z custom theme
  • Build tool: Webpack/Vite (hash w nazwach plików: main.16f43e30a40e76df337c.css)
  • NIE WordPress - custom build

Pliki źródłowe

CSS: https://norda-biznes.info/public/css/main.16f43e30a40e76df337c.css
JS:  https://norda-biznes.info/public/js/main.16f43e30a40e76df337c.js

Analytics

  • Google Tag Manager

2. TYPOGRAFIA

Czcionka główna

font-family: 'Poppins', sans-serif;

Google Fonts import:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Wagi czcionki używane

Waga Zastosowanie
400 (regular) Tekst body, paragrafy
500 (medium) Przyciski secondary
600 (semibold) Nagłówki, przyciski primary, akcenty
700 (bold) Rzadko używane

Rozmiary tekstu (font-size)

Rozmiar Tailwind class Zastosowanie
11px text-xs Drobne etykiety
12px text-xs Tagi, badges
14px text-sm Tekst body mały, przyciski
16px text-base Tekst body główny
18px text-lg H3, podtytuły
20px text-xl H2 w kartach
32px text-2xl H2 sekcji
40px text-4xl H1 hero

Nagłówki - szczegóły

/* H1 - Hero */
h1 {
  font-family: 'Poppins';
  font-size: 40px;
  font-weight: 600;
  line-height: 48px; /* 1.2 */
  letter-spacing: normal;
  color: #FFFFFF; /* na ciemnym tle */
}

/* H2 - Sekcje */
h2 {
  font-family: 'Poppins';
  font-size: 16px; /* małe */ lub 32px /* duże */
  font-weight: 600;
  line-height: 24px;
  color: rgb(46, 72, 114); /* primary-blue */
}

/* H3 - Karty */
h3 {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px; /* 1.4 */
  color: rgb(48, 48, 48);
}

3. PALETA KOLORÓW

Kolory główne (Tailwind custom)

Nazwa Tailwind Wartość RGB HEX Zastosowanie
default-primary-blue rgb(46, 72, 114) #2E4872 Przyciski, nagłówki, akcenty
default-body rgb(237, 240, 245) #EDF0F5 Tło sekcji szare
default-white rgb(255, 255, 255) #FFFFFF Tło kart, tekst na ciemnym
default-light-gray rgb(228, 228, 228) #E4E4E4 Bordery, separatory
default-header-black rgb(48, 48, 48) #303030 Nagłówki na jasnym tle
[#2C456E] - #2C456E Alternatywny niebieski (ciemniejszy)

Kolory tekstu

Klasa Wartość Zastosowanie
text-default-body rgb(70, 70, 70) Tekst paragrafów
text-default-primary-blue rgb(46, 72, 114) Linki, akcenty
text-default-white rgb(255, 255, 255) Tekst na ciemnym tle
text-default-white-fade-80 rgba(255,255,255,0.8) Tekst secondary na ciemnym
text-default-date szary Daty, metadata

Kolory border

Klasa Zastosowanie
border-default-primary-blue Przyciski outline
border-default-body Karty
border-default-light-gray Separatory poziome
border-default-blue-fade-more Subtelne bordery
border-default-hr Linie hr

4. PRZYCISKI (CTA)

Primary Button

.btn-primary {
  background-color: rgb(46, 72, 114); /* #2E4872 */
  color: rgb(255, 255, 255);
  padding: 12px 24px;
  border-radius: 12px 4px; /* ASYMETRYCZNY! */
  font-weight: 600;
  font-size: 14px;
  border: 2px solid rgb(46, 72, 114);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Primary Button White (na ciemnym tle)

.btn-primary-white {
  background-color: rgb(46, 72, 114);
  color: rgb(234, 234, 234);
  padding: 12px 24px;
  border-radius: 12px 4px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid rgb(234, 234, 234); /* biały border */
}

Secondary Button (outline)

.btn-primary-border {
  background-color: transparent;
  color: rgb(46, 72, 114);
  padding: 12px 24px;
  border-radius: 12px 4px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid rgb(46, 72, 114);
}

WAŻNE: Asymetryczny border-radius

border-radius: 12px 4px;
/* Górny-lewy: 12px (zaokrąglony) */
/* Górny-prawy: 4px (lekko zaokrąglony) */
/* Dolny-prawy: 12px */
/* Dolny-lewy: 4px */

To charakterystyczny element designu - przyciski mają "ścięty" róg.

5. LAYOUT I SPACING

Container

.container {
  max-width: 1444px;
  padding: 0 32px;
  margin: 0 auto;
}

Breakpointy Tailwind (standardowe)

Prefix Min-width Zastosowanie
sm: 640px Mobile landscape
md: 768px Tablet
lg: 1024px Desktop small
xl: 1280px Desktop
2xl: 1536px Desktop large

Klasy responsywne używane

sm: rounded-2xl, w-full, w-auto, gap-2, p-4, text-base, grid-cols-1
md: px-4, h-8, hidden, text-lg, flex-col, w-full, gap-4
lg: py-3, flex-col, order-2, w-full, gap-6, grid-cols-2, items-center
xl: flex-col, justify-center, flex, items-center, block
2xl: gap-6, h-10, mr-8

Gap (odstępy)

Klasa Wartość Zastosowanie
gap-1 4px Kompaktowe elementy
gap-3 12px Tagi
gap-4 16px Karty w gridzie
gap-6 24px Sekcje
gap-8 32px Duże sekcje
gap-10 40px Między sekcjami
gap-12 48px Hero
gap-24 96px Maksymalny

6. STRUKTURA SEKCJI STRONY GŁÓWNEJ

Hierarchia sekcji

  1. Header/Nav - sticky, logo + menu + CTA
  2. Hero (571px) - "Łączymy siły Przedsiębiorców Pomorza"
  3. Logo carousel (64px) - karuzela logotypów firm
  4. O nas (885px) - statystyki + zdjęcie + tekst
  5. Nasi członkowie (569px) - grid kart firm
  6. Aktualności + Wydarzenia (821px) - dwie kolumny
  7. Korzyści członkostwa (642px) - ikony na ciemnym tle
  8. Opinie (480px) - testimoniale z avatarami
  9. Footer - logo + kontakt + social media

Hero Section

section.hero {
  height: 571px;
  /* Ukośne tło z obrazami */
  /* Biały tekst na ciemnym overlay */
}

Sekcja korzyści (ciemne tło)

section.benefits {
  background-color: rgb(46, 72, 114);
  /* Białe karty z ikonami */
  /* 4 kolumny: Katalog firm, Nasze projekty, Baza wiedzy, CTA */
}

7. KARTY FIRM

Struktura karty

┌─────────────────────────────┐
│     [LOGO FIRMY]            │
│                             │
│  Nazwa firmy                │
│                             │
│  [tag1] [tag2] [tag3]       │
│  [tag4] [tag5]              │
└─────────────────────────────┘

Style karty

.company-card {
  background: white;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 0; /* brak zaokrąglenia */
  padding: 24px;
  transition: all 0.3s;
}

.company-card:hover {
  /* efekt hover - prawdopodobnie cień lub border */
}

Tagi/Badges

.tag {
  font-size: 12px; /* text-xs */
  padding: 4px 8px;
  background: rgb(237, 240, 245); /* bg-default-body */
  color: rgb(70, 70, 70);
  border-radius: 4px;
  text-transform: uppercase;
}

Grid kart

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolumny desktop */
  gap: 16px;
}

/* Responsywność */
@media (max-width: 1024px) {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  grid-template-columns: 1fr;
}

8. NAWIGACJA

Menu items

  • O nas (/o-nas)
  • Członkowie (/czlonkowie)
  • Aktualności (/aktualnosci)
  • Wydarzenia (/wydarzenia)
  • Kontakt (/kontakt)
  • CTA: "Dołącz do nas" (/kontakt#dolacz-do-nas)
URL: https://norda-biznes.info/public/images/logo.svg
Alt: "Norda Biznes - logo"
Width: 115px
Height: 52px

9. FOOTER

Struktura

┌──────────────────────────────────────────────────────┐
│  [LOGO białe]    Siedziba          Kontakt    [FB][LI][YT] │
│                  ul. 12 Marca      email               │
│                  84-200 Wejherowo  telefon             │
├──────────────────────────────────────────────────────┤
│  Copyright © 2026 Norda Biznes | Powered by Pixlab.pl │
└──────────────────────────────────────────────────────┘

Style footer

footer {
  background-color: rgb(46, 72, 114); /* primary-blue */
  color: white;
}

Logo footer

URL: https://norda-biznes.info/public/images/norda-biznes-logo-footer.svg
/* Wersja biała/jasna logo */

Social Media

10. IKONY

Lokalizacja ikon

https://norda-biznes.info/public/images/icons/

Lista ikon SVG

Nazwa Zastosowanie
iconHome.svg Menu - Home
iconArrowLeft.svg Nawigacja karuzeli
iconArrowRight.svg Nawigacja karuzeli
iconCalendar.svg Data wydarzenia
iconJoinUs.svg CTA dołącz
iconQuoteBase.svg Cudzysłów w opiniach
iconIn2.svg LinkedIn
iconFacebook.svg Facebook
iconYoutube.svg YouTube

Ikony w sekcji korzyści

  • Budynek/siatka - Katalog firm
  • Narzędzia - Nasze projekty
  • Okno/dokument - Baza wiedzy
  • Koło/target - CTA

11. ANIMACJE I PRZEJŚCIA

Transition globalne

transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Klasy Tailwind

.transition { transition-property: all; }
.duration-300 { transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }

Animacje wejścia (scroll)

  • fadeIn - fade in przy scrollu
  • fadeInLeft - wjazd z lewej

12. WYSZUKIWARKA

Input search

input[type="search"] {
  placeholder: "Wyszukaj firmę";
  /* Prosty input z ikoną lupy */
  /* Przycisk X do czyszczenia */
}

13. OBRAZY I ZDJĘCIA

Format

  • Zdjęcia: WebP (nowoczesny format)
  • Loga firm: SVG (wektorowe)
  • Ikony: SVG

Serwowanie obrazów

https://norda-biznes.info/img/400x/{hash}/{filename}.webp
/* Dynamiczne skalowanie przez serwer */

14. PORÓWNANIE Z NORDABIZNES.PL

Element norda-biznes.info nordabiznes.pl Rekomendacja
Czcionka Poppins Inter Zmienić na Poppins
Kolor primary #2E4872 #1e40af Rozważyć #2E4872
Przyciski Asymetryczny radius Zwykły radius Dodać asymetrię
Framework Tailwind custom Bootstrap/custom Zachować Tailwind
Karty firm Minimalistyczne Rozbudowane Zachować nasze
Tagi Uppercase, szare Kolorowe Do dyskusji

15. REKOMENDACJE DO WDROŻENIA

Priorytet 1 (łatwe)

  1. Zmiana czcionki na Poppins
  2. Aktualizacja koloru primary na #2E4872
  3. Asymetryczny border-radius przycisków (12px 4px)
  4. Dodanie transition 300ms cubic-bezier

Priorytet 2 (średnie)

  1. Redesign kart firm
  2. Nowy footer z ciemnym tłem
  3. Karuzela logotypów firm
  4. Sekcja "Sprawdź co mówią o nas"

Priorytet 3 (większe zmiany)

  1. Nowy hero section z ukośnym tłem
  2. Sekcja korzyści członkostwa
  3. Nowa strona katalogu firm

16. ZASOBY DO POBRANIA

Czcionka

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Tailwind config (rekonstrukcja)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'default-primary-blue': '#2E4872',
        'default-body': '#EDF0F5',
        'default-white': '#FFFFFF',
        'default-light-gray': '#E4E4E4',
        'default-header-black': '#303030',
        'default-blue-fade-more': 'rgba(46, 72, 114, 0.3)',
        'default-hr': '#E4E4E4',
        'default-date': '#888888',
        'default-white-fade-80': 'rgba(255, 255, 255, 0.8)',
        'default-white-light': 'rgba(255, 255, 255, 0.9)',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
      borderRadius: {
        'btn': '12px 4px 12px 4px',
      },
    },
  },
}

17. BACKEND I SILNIK GENEROWANIA TREŚCI

Serwer

Server: Apache
HTTP/2: Tak
Czas renderowania: ~0.024 sec (SSR)

Zabezpieczenia HTTP

X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Content-Security-Policy: frame-ancestors 'self'
X-XSS-Protection: 1; mode=block

Twórca i technologia

Pixlab.pl - polska firma web development z Wejherowa

Kluczowe informacje o Pixlab:

  • Własny framework - NIE używają WordPress, Joomla ani gotowych CMS
  • Tworzą dedykowane panele CMS dla każdego klienta
  • Specjalizacja: ERP, CRM, e-commerce, strony internetowe
  • Filozofia: "szybkie rozwiązanie problemu + jakość"

Architektura

┌─────────────────────────────────────────────────────────┐
│                    FRONTEND                              │
│  Tailwind CSS + Custom JS (bundled)                     │
│  Animacje: CSS @keyframes + IntersectionObserver        │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│                 BACKEND (Pixlab Framework)              │
│  Apache + PHP (własny framework)                        │
│  Server-Side Rendering (SSR)                            │
│  Dedykowany panel CMS                                   │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│              IMAGE PROCESSING SERVICE                    │
│  Pattern: /img/{size}/{hash}/{filename}.{format}        │
│  Sizes: 24x, 64x, 128x, 400x, 600x, org                │
│  Formats: WebP, SVG, JPG                                │
└─────────────────────────────────────────────────────────┘

18. SYSTEM OBRAZÓW (WAŻNE!)

Pattern URL

https://norda-biznes.info/img/{size}/{hash}/{filename}.{format}

Dostępne rozmiary

Rozmiar Zastosowanie
24x Micro ikony
64x Małe ikony
128x Avatary, thumbnails
400x Karty firm, loga
600x Zdjęcia w newsach
org Oryginalne (pełny rozmiar)

Formaty

  • WebP - zdjęcia (nowoczesna kompresja)
  • SVG - loga firm, ikony
  • JPG - fallback dla starszych przeglądarek

Przykłady

/img/400x/2c55c5/F447f9l70050E1G7B126T2w7S2j8K9B9.webp
/img/128x/e30ee4/T5J7a8n8M0g0J1R7Q2C5u6t0p2B2j2n5.webp
/img/org/ca6339/S5K900z840X0T1q7T619j0T7W4l8H9B8.jpg

Implementacja

Prawdopodobnie własny image processing service (podobny do Imgproxy/Thumbor) lub skrypt PHP do dynamicznego skalowania.

19. CSS ANIMACJE (SZCZEGÓŁY)

Zdefiniowane @keyframes

/* Podstawowe animacje fade */
@keyframes fadeIn { ... }
@keyframes fadeInDown { ... }
@keyframes fadeInLeft { ... }
@keyframes fadeInRight { ... }
@keyframes fadeInUp { ... }
@keyframes fadeOut { ... }

/* Lightbox animacje (SimpleLightbox?) */
@keyframes slbOverlay { ... }
@keyframes slbEnter { ... }
@keyframes slbEnterNext { ... }
@keyframes slbEnterPrev { ... }

Animacje scroll (IntersectionObserver)

Elementy z klasami fadeIn, fadeInLeft są animowane przy scrollu używając natywnego IntersectionObserver API - bez zewnętrznych bibliotek (AOS, GSAP).

Brak zewnętrznych bibliotek animacji

  • ❌ GSAP
  • ❌ AOS (Animate On Scroll)
  • ❌ Framer Motion
  • ❌ Anime.js
  • ✅ Własna implementacja CSS + IntersectionObserver

20. PWA (Progressive Web App)

Manifest

URL: /public/images/favicon/site.webmanifest
Display: standalone
Theme color: #ffffff
Background color: #ffffff

Ikony PWA

/android-chrome-192x192.png
/android-chrome-384x384.png

Favicon set

/public/images/favicon/favicon-32x32.png
/public/images/favicon/apple-touch-icon.png

Status PWA

Podstawowa konfiguracja - brak Service Worker offline, brak push notifications.

21. SEO I META TAGI

Open Graph

<meta property="og:title" content="Norda Biznes Regionalna Izba Przedsiębiorców">
<meta property="og:description" content="Naszą misją jest ochrona i reprezentacja...">
<meta property="og:url" content="https://norda-biznes.info/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://norda-biznes.info/img/800x/...">

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="norda-biznes.info">
<meta name="twitter:url" content="https://norda-biznes.info/">
<meta name="twitter:title" content="Norda Biznes...">

Resource Hints

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Google Analytics

Tracking ID: G-TCT7QR17L5

22. MOŻLIWOŚCI ADAPTACJI

Co można skopiować bezpośrednio:

  1. ✅ Paleta kolorów (CSS variables)
  2. ✅ Typografia (Poppins + rozmiary)
  3. ✅ Style przycisków (asymetryczny radius)
  4. ✅ Animacje CSS (@keyframes)
  5. ✅ Breakpointy responsywności
  6. ✅ Struktura sekcji

Co wymaga własnej implementacji:

  1. ⚠️ System obrazów (własny image processing)
  2. ⚠️ Panel CMS (Pixlab framework)
  3. ⚠️ Karuzela logotypów (custom lub Swiper/Splide)
  4. ⚠️ Animacje scroll (IntersectionObserver)

Inspiracje do rozważenia:

  1. 🤔 Hero z ukośnym tłem
  2. 🤔 Sekcja "Korzyści członkostwa"
  3. 🤔 Testimoniale z avatarami
  4. 🤔 Footer z ciemnym tłem

23. PODSUMOWANIE TECHNOLOGII

Warstwa Technologia
Serwer Apache
Backend PHP (Pixlab Framework)
Rendering SSR (~24ms)
CMS Dedykowany panel Pixlab
Frontend Tailwind CSS (custom)
JavaScript Vanilla JS (bundled)
Animacje CSS @keyframes + IntersectionObserver
Obrazy Custom image service (WebP, SVG, JPG)
Czcionka Poppins (Google Fonts)
Analytics Google Analytics 4
PWA Podstawowy manifest

24. SITEMAP I STRUKTURA URL

Sitemap

URL: https://norda-biznes.info/sitemap.xml
Liczba URL: 102
Lastmod: 2026-01-30
Changefreq: daily

Struktura URL

Typ Pattern Przykład
Strony statyczne /{slug} /o-nas, /kontakt
Aktualności /{slug}-n{ID} /konferencja-w-greenpack-n69
Firmy /{slug}-m{ID} /agat-m39, /pixlab-softwarehouse-m1

Lista stron statycznych

/
/o-nas
/czlonkowie
/aktualnosci
/wydarzenia
/kontakt
/statut
/oplaty-czlonkowskie
/wladze-izby

Liczba firm w katalogu

61 firm (na dzień 2026-01-30)

Przykładowe firmy

  • pixlab-softwarehouse-m1
  • sigma-budownictwo-m2
  • kantor-promes-m3
  • wdx-m4
  • bormax-m5
  • inpi-sp-z-o-o-m88
  • agat-m39
  • eura-tech-m27

25. PERFORMANCE (MIERZONE)

Czas odpowiedzi serwera (TTFB)

Time Total: 84ms
Time Connect: 23ms
Time TTFB: 84ms

Performance API (browser)

{
  pageLoadTime: 165ms,      // Całkowity czas ładowania
  domContentLoaded: 164ms,  // DOM ready
  domInteractive: 160ms,    // DOM interaktywny
  responseTime: 59ms        // Czas odpowiedzi serwera
}

Rozmiar DOM

Liczba elementów: 462 (mały DOM)

Zasoby

Typ Liczba
Obrazy 83
Skrypty zewnętrzne 2
Skrypty inline 1
CSS zewnętrzne 2
Łącznie zasobów 48

Lazy Loading

Obrazy z loading="lazy": 0 (BRAK!)
Obrazy z data-src: 0

⚠️ Uwaga: Strona nie używa lazy loading dla obrazów - potencjalna optymalizacja.

Skrypty

Async: 1 (gtag.js)
Defer: 0

26. DOSTĘPNOŚĆ (A11Y)

Landmarks

Element Liczba Status
header/banner 1 ✅
nav/navigation 1 ✅
main 0 ⚠️ BRAK
footer/contentinfo 1 ✅

Obrazy

Metryka Wartość
Łącznie obrazów 83
Z atrybutem alt 83 (100%) ✅
Z pustym alt="" 28 (dekoracyjne)
Bez alt 0 ✅

Linki

Metryka Wartość
Łącznie linków 63
Z tekstem/aria-label 58
Puste linki 0 ✅

Struktura nagłówków

H1: 1 ✅ (jeden na stronę)
H2: 6
H3: 10
H4: 0

Brakujące elementy a11y

  • ❌ Skip links (brak)
  • ❌ Landmark <main> (brak)
  • ❌ Focus-visible styles (nie wykryto)

Język

<html lang="pl-PL">

✅ Poprawnie ustawiony

ARIA

Elementy z aria-label/aria-labelledby: 36

27. KONTRAST KOLORÓW

Analiza (WCAG 2.1)

Element Kolor Tło Ratio WCAG AA
H1 #FFFFFF ciemne 21:1 ✅ PASS
H2 #2E4872 transparent 2.29:1 ⚠️ (tło jest jasne)
H3 #303030 transparent 1.59:1 ⚠️ (tło jest jasne)
Links #464646 transparent 2.22:1 ⚠️ (tło jest jasne)

Uwaga: Ratio jest liczone względem transparent, więc rzeczywisty kontrast na jasnym tle (#EDF0F5) jest wyższy.

Rzeczywiste kontrasty (szacowane)

  • H2 (#2E4872) na #EDF0F5: ~7:1 ✅
  • H3 (#303030) na #FFFFFF: ~12:1 ✅
  • Text (#464646) na #FFFFFF: ~8:1 ✅

28. SEO STRUCTURED DATA

JSON-LD

❌ BRAK - strona nie używa JSON-LD structured data

Microdata

❌ BRAK - strona nie używa microdata

RDFa

❌ BRAK

Open Graph (kompletność)

Tag Wartość Status
og:title ✅ Norda Biznes Regionalna Izba Przedsiębiorców
og:description ✅ Naszą misją jest ochrona i reprezentacja...
og:url ✅ https://norda-biznes.info/
og:type ✅ website
og:image ✅ /img/800x/e68450/.jpg

Twitter Cards

Tag Wartość
twitter:card summary_large_image
twitter:title ✅
twitter:description ✅
twitter:image ✅

Rekomendacja SEO

Dodać JSON-LD dla:

  • Organization
  • LocalBusiness
  • BreadcrumbList

29. PLIKI BEZPIECZEŃSTWA I KONFIGURACJI

robots.txt

❌ BRAK (zwraca 404)

security.txt

❌ BRAK (/.well-known/security.txt zwraca 404)

sitemap.xml

✅ DOSTĘPNY
URL: https://norda-biznes.info/sitemap.xml

PWA Manifest

✅ DOSTĘPNY
URL: /public/images/favicon/site.webmanifest

30. STRONA 404 (CUSTOM)

Design strony błędu

/* Pełnoekranowe tło */
background: url(/public/images/backgrounds/404_bg.jpg) center no-repeat;
background-size: cover;

/* Nagłówek 404 */
h1 {
  font-size: 130px;
  font-weight: 800;
  color: #2E4872;
}

/* Przycisk powrotu */
.btn-primary {
  border-radius: 0.75rem 0.25rem; /* asymetryczny */
  background-color: rgb(46, 72, 114);
}

Elementy strony 404

  • Logo w headerze
  • Duży napis "404"
  • Tekst: "Strona której szukasz nie została odnaleziona"
  • Podtekst: "Możliwe, że strona została przeniesiona lub wpisałeś niepoprawny adres"
  • Przycisk: "Wróć do strony głównej"

31. PEŁNA LISTA IKON SVG

Lokalizacja

https://norda-biznes.info/public/images/icons/

Wykryte ikony

Plik Zastosowanie
iconHome.svg Ikona domu w menu
iconArrowLeft.svg Strzałka w lewo (karuzela)
iconArrowRight.svg Strzałka w prawo (karuzela)
iconCalendar.svg Data wydarzenia
iconJoinUs.svg CTA "Dołącz do nas"
iconQuoteBase.svg Cudzysłów w opiniach
iconIn2.svg LinkedIn
iconFacebook.svg Facebook
iconYoutube.svg YouTube

Inne obrazy SVG

/public/images/logo.svg - Logo główne
/public/images/norda-biznes-logo-footer.svg - Logo footer (białe)
/public/images/star.svg - Gwiazdka (rating?)

32. PEŁNA LISTA FIRM (61)

1. pixlab-softwarehouse-m1
2. sigma-budownictwo-m2
3. kantor-promes-m3
4. wdx-m4
5. bormax-m5
6. riela-polska-m6
7. delkom-m7
8. waterm-m8
9. cristap-m9
10. hebel-masiak-i-wspolnicy-adwokaci-i-radcowie-prawni-m10
11. sibuk-m12
12. kaszubski-bank-spoldzielczy-m13
13. seo-partner-m14
14. biuro-rachunkowosci-perfekta-m15
15. green-house-systems-m16
16. graal-m18
17. rubo-m19
18. porta-kmi-m20
19. rotor-m21
20. p-p-m22
21. ekofabryka-m23
22. almares-m24
23. ttm-m25
24. el-professional-m26
25. eura-tech-m27
26. lean-idea-m28
27. hotel-spa-wieniawa-m29
28. phu-ted-m30
29. orlex-mg-m31
30. lenap-hale-m34
31. mkonsult-m35
32. agis-management-group-m37
33. chlodnictwo-klimatyzacja-tomasz-nowak-m38
34. agat-m39
35. ama-m40
36. ampery-m41
37. armet-bis-m42
38. bibrokers-m43
39. ekod-m44
40. eko-laser-m45
41. el-forte-m46
42. hillob-m47
43. joker-m48
44. kammet-m49
45. kupsa-coathing-m50
46. kbms-m51
47. kancelaria-radcy-prawnego-radoslaw-skwarlo-m52
48. litwic-litwic-m54
49. mesan-m56
50. pucka-gospodarka-komunalna-m57
51. pg-construction-m58
52. pro-invest-m60
53. portal-m61
54. scrol-m63
55. semerling-security-m64
56. phu-witka-m65
57. wejherplast-m67
58. rumia-invest-park-m68
59. sim-rumia-m69
60. stalpunkt-m70
61. alumech-m71
... (i więcej do m95)

33. RESPONSYWNOŚĆ (MOBILE)

Testowane rozdzielczości

  • Mobile: 375x812 (iPhone X)
  • Desktop: 1920x1080

Mobile Header

┌─────────────────────────────────────┐
│ [LOGO]    [Dołącz do nas]    [☰]   │
└─────────────────────────────────────┘
  • Logo po lewej
  • CTA button widoczny
  • Hamburger menu (☰) zamiast pełnego menu

Mobile Hero

  • Tytuł: skalowany do mniejszego rozmiaru
  • Podtytuł: pełna szerokość
  • CTA button: zachowany

Mobile karuzela logotypów

  • Działa poprawnie
  • Strzałki nawigacji widoczne
  • 2 loga na raz

Mobile sekcja "O nas"

  • Tekst: pełna szerokość, czytelny
  • Zdjęcie: skalowane do 100% szerokości
  • Przyciski: obok siebie (flex-row)

Mobile karty firm

Grid: 2 kolumny (sm:grid-cols-2)
      1 kolumna na bardzo małych ekranach

Mobile statystyki

  • Lista pionowa z ikonami
  • Dobrze czytelne

Breakpoint behavior

Element Mobile (<640px) Tablet (640-1024px) Desktop (>1024px)
Menu Hamburger Hamburger Pełne
Karty firm 1-2 kolumny 2 kolumny 4 kolumny
Hero images Ukryte 2 zdjęcia 4 zdjęcia
Footer Stack pionowy 2 kolumny 3 kolumny

Ocena responsywności

9/10 - Bardzo dobra implementacja mobile-first z Tailwind CSS

34. REKOMENDACJE OPTYMALIZACJI

Do wdrożenia na norda-biznes.info (gdyby pytali)

  1. ❌ Dodać robots.txt
  2. ❌ Dodać security.txt
  3. ❌ Dodać JSON-LD structured data
  4. ❌ Dodać lazy loading obrazów
  5. ❌ Dodać skip link
  6. ❌ Dodać <main> landmark

Do zaadaptowania w nordabiznes.pl

  1. ✅ Czcionka Poppins
  2. ✅ Paleta kolorów
  3. ✅ Asymetryczne przyciski
  4. ✅ Struktura sekcji
  5. ✅ Custom strona 404
  6. ✅ Animacje fadeIn na scroll

35. COOKIES I STORAGE

Cookies

❌ BRAK cookies

Strona nie ustawia żadnych cookies (nawet sesyjnych).

LocalStorage

❌ PUSTE

SessionStorage

❌ PUSTE

Service Worker

Obsługa: ✅ (przeglądarka wspiera)
Zarejestrowany: ❌ NIE

IndexedDB

Obsługa: ✅
Używane: ❌ NIE

Wniosek

Strona jest stateless po stronie klienta - wszystkie dane są renderowane server-side bez persistencji w przeglądarce.

36. CACHE HEADERS

HTML (strona główna)

Cache-Control: BRAK
ETag: BRAK
Expires: BRAK

CSS

Content-Type: text/css
Vary: Accept-Encoding
Cache-Control: BRAK

Obrazy (SVG)

Content-Type: image/svg+xml
Cache-Control: BRAK

Wniosek

⚠️ Brak explicite cache headers - cache jest kontrolowany tylko przez domyślne zachowanie przeglądarki. Rekomendacja: dodać Cache-Control: max-age=31536000 dla statycznych assetów z hashem w nazwie.

37. PODSUMOWANIE KOMPLETNEJ ANALIZY

Co zostało zbadane

Obszar Status
Technologie (framework, serwer) ✅
Typografia (czcionki, rozmiary) ✅
Paleta kolorów ✅
Style przycisków ✅
Layout i spacing ✅
Struktura sekcji ✅
Karty firm ✅
Nawigacja ✅
Footer ✅
Ikony SVG ✅
Animacje CSS ✅
Wyszukiwarka ✅
System obrazów ✅
Backend/CMS ✅
PWA ✅
SEO (meta, OG, Twitter) ✅
Sitemap ✅
Performance (timing) ✅
Dostępność (a11y) ✅
Kontrast kolorów ✅
Structured data ✅
Responsywność (mobile) ✅
Cookies/Storage ✅
Cache headers ✅
Strona 404 ✅
Lista firm ✅

Statystyki raportu

  • Liczba sekcji: 37
  • Liczba tabel: 40+
  • Liczba bloków kodu: 50+
  • Liczba zidentyfikowanych firm: 61
  • Liczba URL w sitemap: 102

Powered by: Pixlab.pl (twórcy strony źródłowej) Kontakt Pixlab: https://pixlab.pl

Analiza wykonana przez: Claude Code (Claude Opus 4.5) Data ostatniej aktualizacji: 2026-01-30 Wersja raportu: 3.0 (kompletna analiza - 37 sekcji)