Bonus z live
Wygeneruj swój landing jednym promptem.
Ten sam prompt, którego używam do stron z AI. Bierzesz swoje 3 karty, wklejasz je razem z promptem do ChatGPT albo Claude i dostajesz gotową stronę w jednym pliku HTML.
01
Przygotuj 3 karty
Karta Strategiczna, Wizualna i Architektury Treści. Nie masz ich jeszcze? Zacznij od Karty Strategicznej, to najlepszy pierwszy krok.
02
Wklej prompt i karty
Otwórz nowy czat w ChatGPT albo Claude. Wklej prompt, a pod nim treść swoich trzech kart.
03
Dostajesz gotową stronę
AI zwraca kompletny plik index.html: sekcje, kolory i teksty prosto z Twoich kart. Otwierasz go w przeglądarce.
Prompt
Twoje karty na wejściu, gotowa strona na wyjściu.
To najszybsza ścieżka: strona w jednym pliku HTML, jeszcze dziś wieczorem. W kursie idziemy dalej i budujemy stronę-system w Next.js, którą hostujesz i rozwijasz. Ten prompt to Twój pierwszy krok.
Mega-prompt
Prompt: strona z 3 kart
Skopiuj całość i wklej do nowego czatu razem z 3 kartami. AI zwróci kompletny kod index.html, gotowy do otwarcia w przeglądarce.
Jesteś światowej klasy web designerem i front-end developerem. Na podstawie 3 załączonych dokumentów (Karta Strategiczna, Karta Wizualna, Karta Architektury i Treści) wygeneruj kompletną stronę internetową w jednym pliku index.html.
WIERNOŚĆ DOKUMENTOM (BEZWZGLĘDNA):
- Kolory, fonty, animacje - WYŁĄCZNIE z Karty Wizualnej
- Treści, nagłówki, CTA - WYŁĄCZNIE z Karty Architektury i Treści
- Ton komunikacji - WYŁĄCZNIE z Karty Strategicznej
- Kolejność sekcji - DOKŁADNIE jak w Karcie Architektury
- Layout każdej sekcji - zgodny z opisem w Karcie Architektury (np. jeśli pisze "2 kolumny: zdjęcie + tekst" to zrób dokładnie tak)
- Archetyp wizualny - z Karty Wizualnej (TECH / CREATIVE / WELLNESS / SPORT / FRIENDLY / LUXURY). Stosuj odpowiednie techniki CSS opisane poniżej.
DESIGN - ZASADY OGÓLNE:
1. Każda sekcja ma INNY układ wizualny - nie powtarzaj tego samego schematu. Karty Architektury opisują layout każdej sekcji, stosuj się do nich.
2. Kolumny (2, 3 lub 4 obok siebie) stosuj tam gdzie Karta Architektury to przewiduje - używaj ich śmiało, ale dbaj o różnorodność między sekcjami.
3. Dużo przestrzeni - sekcje z padding min 80px (desktop), 48px (mobile)
4. TYPOGRAFIA (KRYTYCZNE):
- Nagłówki H1/H2: font-weight: 300 (preferowany) lub max 400. NIGDY 500, 600, 700, 800, 900. Lekkie, duże nagłówki = premium look (jak Awwwards). Wyrazistość buduj przez ROZMIAR (clamp()) i letter-spacing, NIE przez grubość.
- Wyjątek: archetyp SPORT może używać font-weight: 700-900 na nagłówkach.
- H3/podtytuły: font-weight: 400 (max 500 jako absolutny wyjątek)
- Body text: font-weight: 400
- Przyciski: font-weight: 400 lub max 500 (NIGDY 600+)
- Nagłówki muszą być DUŻE ale LEKKIE - to wygląda profesjonalnie i nowocześnie, jak na stronach z Awwwards
- Fluid sizing: clamp() na WSZYSTKICH nagłówkach
- Czytelny tekst: max-width 680px na tekst ciągły
5. Subtelne tekstury lub gradienty w tle zamiast płaskich kolorów (dopasowane do Karty Wizualnej)
6. Wielowarstwowe cienie (nie prosty box-shadow: 0 2px 4px)
7. RÓWNE ODSTĘPY: Elementy w gridzie/flexboxie muszą mieć równe gaps. Karty obok siebie muszą mieć tę samą wysokość (użyj align-items: stretch lub min-height). Padding wewnątrz kart musi być identyczny.
SPACING WEWNĄTRZ KART I ELEMENTÓW (KRYTYCZNE): Padding wewnątrz kart: min 2rem (desktop), 1.5rem (mobile). Ikona do tekstu pod nią: min margin-bottom: 1.5rem. Tekst do przycisku: min margin-top: 1.5rem. NIGDY nie przysuwaj elementów do krawędzi karty bliżej niż 1.5rem. Elementy wewnątrz karty: gap: 1rem między każdym.
SPACING POD HEADINGAMI (KRYTYCZNE): Każdy H2 musi mieć margin-bottom: min 2rem (var(--space-lg) lub więcej) przed następnym elementem. Każdy H3 musi mieć margin-bottom: min 1rem. Heading NIGDY nie może być przyklejony do elementu poniżej. Definiuj te spacingi globalnie w CSS (h2 { margin-bottom: ... }), nie polegaj na inline styles.
8. SPÓJNOŚĆ WIZUALNA: Używaj CSS custom properties (zmiennych) dla WSZYSTKICH kolorów, fontów, cieni, border-radius i spacingów. Nie hardcoduj wartości w różnych miejscach.
ANTI-AI DESIGN (KRYTYCZNE - strona NIE MOŻE wyglądać jak wygenerowana przez AI):
BADGE/TAG/LABEL: Elementy typu badge, tag, etykieta (np. nad H2) NIGDY nie mogą rozciągać się na pełną szerokość sekcji. ZAWSZE: display: inline-flex; width: fit-content; padding: 6px 16px. Badge to mały element dekoracyjny, nie banner.
BORDER-RADIUS: Dopasuj do archetypu z Karty Wizualnej. TECH/LUXURY: max 4px (ostre, precyzyjne). WELLNESS/FRIENDLY: 8-16px (ciepłe, zaokrąglone). CREATIVE: mieszaj (0 na nagłówkach, zaokrąglone na zdjęciach). SPORT: 0-4px (agresywne). NIGDY nie używaj 16px+ na kartach w archetypie TECH - to wygląda jak generyczny AI output.
TŁO NIE KONKURUJE: Dekoracyjne elementy tła (dot-grid, gradienty, blury) muszą mieć opacity max 0.05-0.1. Tło NIGDY nie może przesłaniać foreground contentu. Jeśli dodajesz radial-gradient w tle, opacity koloru max 0.1.
9. ZAKAZ POWTARZALNYCH LAYOUTÓW: Wzorzec "wycentrowany H2 + 3 równe karty w rzędzie" może wystąpić MAKSYMALNIE 1 RAZ na całej stronie. Jeśli sekcja Oferty ma 3 karty, to sekcja Opinii MUSI mieć inny layout (np. 1 duży cytat + 2 mniejsze pod spodem, lub karty w różnych rozmiarach 2fr+1fr, lub carousel-look z overflow-x: auto). Reszta sekcji MUSI mieć inne układy.
RÓŻNE WYRÓWNANIA H2: Nie WSZYSTKIE nagłówki H2 mogą być wycentrowane (text-align: center). Min. 2-3 sekcje muszą mieć H2 wyrównany do LEWEJ (text-align: left). To daje profesjonalny, designerski wygląd.
CENTROWANIE (KRYTYCZNE): Jeśli sekcja ma text-align: center, to WSZYSTKIE elementy w niej muszą być wycentrowane. Paragrafy z max-width muszą mieć margin-left: auto; margin-right: auto. Przyciski w wycentrowanej sekcji: display: flex; justify-content: center (lub margin: 0 auto na samym przycisku). Gridy i flex kontenery: justify-items: center lub place-items: center gdzie dotyczy. Jeśli H2 jest wycentrowany, to paragraf pod nim też musi być wycentrowany - nie może "wisić" z lewej.
10. MIN. 2 SEKCJE ASYMETRYCZNE: Co najmniej 2 sekcje muszą mieć niesymetryczny układ - np. tekst wyrównany do lewej (nie centered!), zdjęcie większe od tekstu, kolumny o różnych szerokościach.
11. MIN. 1 ELEMENT FULL-WIDTH: Co najmniej 1 sekcja musi mieć element wychodzący poza kontener (edge-to-edge) - np. zdjęcie na pełną szerokość, pasek z gradientem, sekcja z tłem do krawędzi ekranu.
12. SEPARATORY MIĘDZY SEKCJAMI: Każda sekcja musi mieć wizualne przejście do następnej - zmiana koloru tła, gradient fade, dekoracyjna linia, kształt SVG. NIE pusta przestrzeń i NIE <hr>.
13. RÓŻNE TŁA SEKCJI: Sekcje muszą mieć naprzemienne tła (np. ciemniejsze/jaśniejsze, z teksturą/bez, z gradientem/bez). NIGDY nie dawaj 4+ sekcji z identycznym tłem pod rząd.
14. NIE używaj generycznych ikon (rakieta, żarówka, tarcza, ludziki, puzzle) - projektuj unikalne inline SVG dopasowane do konkretnej branży klienta.
15. MIN. 1 ELEMENT DEKORACYJNY PER SEKCJA: Każda sekcja potrzebuje elementu wizualnego poza tekstem - gradient blob w tle (position: absolute, filter: blur), dekoracyjna linia, kształt geometryczny, subtelny wzór. NIE zostawiaj sekcji jako "sam tekst na tle".
16. Hero ma robić efekt WOW - nie generyczny H1 + paragraf + button wycentrowane. Użyj dużego, lekkiego fontu (font-weight: 300, font-size: clamp(2.5rem, 6vw, 5rem)). NIGDY więcej niż 5rem (80px) na H1 - za duże H1 wychodzi poza hero viewport. Kreatywny layout, elementy dekoracyjne.
17. Sekcje muszą "oddychać" - nie upychaj treści. Lepiej mniej tekstu z mocnym efektem niż dużo tekstu w bloku.
18. Strona ma wyglądać jak zaprojektowana przez designera z Awwwards, nie jak output z ChatGPT.
19a. SEKCJA ROZWIĄZANIE/OFERTA (WAŻNE): Sekcja z ofertą/rozwiązaniem MUSI się wyróżniać wizualnie od reszty strony. Użyj: wyróżnionego tła (gradient lub ciemniejszy/jaśniejszy kolor niż sąsiednie sekcje), accent border na kartach, numerowanych kroków lub timeline layout (NIE zwykły grid 3 identycznych kart). Opcjonalnie: jedna karta "wyróżniona" z accent border i badge "Najpopularniejsze".
19. NUMERACJA DEKORACYJNA: W sekcjach z krokami/etapami użyj 01, 02, 03 (nie 1, 2, 3) jako dużego dekoracyjnego elementu (font-size: 4rem+, opacity: 0.08-0.15, position: absolute lub duży numer obok tekstu). Dodaje premium feel.
20. HERO = NAJWAŻNIEJSZA SEKCJA: Hero determinuje styl całej strony. Poświęć na hero NAJWIĘCEJ uwagi designerskiej. Reszta sekcji musi być stylistycznie spójna z hero.
ARCHETYPY WIZUALNE - IMPLEMENTACJA CSS:
Sprawdź archetyp w Karcie Wizualnej i zastosuj odpowiednie techniki:
🖥️ TECH / DIGITAL:
- Ciemne tło: --bg: #0a0a0f lub #0d1117, --text: #e0e0e0
- Glow effects na kartach i przyciskach: box-shadow: 0 0 20px rgba(kolor_akcentu, 0.15), 0 0 60px rgba(kolor_akcentu, 0.05)
- Glass morphism na kartach: background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08)
- Noise texture (OBOWIĄZKOWY dla TECH/DIGITAL): body::before z SVG feTurbulence, opacity 0.02-0.04, position: fixed, pointer-events: none. KRYTYCZNE: z-index MUSI być 9999 (żeby noise był NAD całym contentem). NIGDY z-index: 0 ani z-index: -1 (noise będzie niewidoczny). Bez noise strona wygląda plastycznie i generycznie. Dla innych archetypów: ZALECANY (dodaje premium feel).
- Subtelna siatka kropek w tle sekcji: background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px
- Opcjonalnie: subtelne pionowe linie w tle (container lines): background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 120px)
- Gradienty w tle hero lub CTA: radial-gradient z kolorem akcentu o niskim opacity
- Przyciski z glow hover: hover → box-shadow z kolorem akcentu
🎨 CREATIVE / PORTFOLIO:
- OGROMNA typografia hero: font-size: clamp(3rem, 8vw, 7rem); line-height: 0.95; letter-spacing: -0.03em
- Zdjęcia edge-to-edge (bez marginesów!): width: 100vw; margin-left: calc(-50vw + 50%); na zdjęciach w sekcjach
- Asymetryczne gridy: grid-template-columns: 2fr 1fr lub 1fr 1.5fr (NIE zawsze równe kolumny)
- Minimalna paleta: max 2-3 kolory (czarny, biały, 1 akcent)
- Tekst nachodzący na zdjęcia: position: relative z translateY(-30%) lub negative margin
- Serif fonty na nagłówkach: Playfair Display, DM Serif Display
- Duże przerwy między sekcjami: padding 120px+
🌿 WELLNESS / COACHING:
- Ciepłe tła sekcji (naprzemiennie): np. --bg-warm: #fdf6e3, --bg-soft: #fff5eb, biały
- Zaokrąglone karty i elementy: border-radius: 1rem na kartach, 0.75rem na przyciskach
- Miękkie cienie: box-shadow: 0 4px 20px rgba(0,0,0,0.06)
- Organiczne kształty dekoracyjne w CSS: border-radius z różnymi wartościami (np. 60% 40% 50% 70%)
- Ciepłe gradienty w tle: linear-gradient(135deg, #fdf6e3, #fff5eb)
- Zdjęcia z zaokrąglonymi rogami: border-radius: 1rem
- Przyjazne fonty: DM Sans, Nunito, Quicksand
⚡ SPORT / ENERGIA:
- Wysoki kontrast: ciemne tło + jasny tekst LUB białe tło z mocnymi blokami koloru
- Uppercase nagłówki: text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em (SPORT jest jedynym archetypem gdzie gruby font jest OK!)
- Mocne bloki koloru - co 2. sekcja z pełnym tłem w kolorze akcentu lub czarnym
- Dynamiczne kąty: clip-path: polygon() na separatorach sekcji (np. ukośne przejścia)
- Duże, odważne nagłówki: clamp(2.5rem, 6vw, 5rem)
- Zdjęcia z nakładką koloru: overlay z gradient + mix-blend-mode
- Chunky sans-serif: Space Grotesk, Archivo Black, Bebas Neue
🌸 FRIENDLY / MODERN:
- Pastelowe tła sekcji: np. #fce4ec, #e3f2fd, #f3e5f5, #e8f5e9
- Pill-shaped przyciski i tagi: border-radius: 100px; padding: 0.5rem 1.5rem
- Playful typografia: duży serif (DM Serif) na nagłówkach + lekki sans-serif (Inter) na tekście
- Lekkie karty z subtelnymi cieniami: box-shadow: 0 2px 12px rgba(0,0,0,0.06)
- Kolorowe ikony lub mini-ilustracje (inline SVG z kolorami z palety)
- Zaokrąglone zdjęcia i elementy: border-radius: 1.5rem
- Dużo whitespace, airy feel
💎 LUXURY / PREMIUM:
- Ciemne tło (#1a1a1a, #0f0f0f) LUB neutralne jasne (#f5f0eb, #faf8f5)
- Złote/srebrne akcenty: --accent: #c9a96e lub #b0b0b0
- Elegant serif: Playfair Display, Cormorant Garamond
- Thin borders: border: 1px solid rgba(201,169,110,0.2)
- Lettertracking na nagłówkach: letter-spacing: 0.1em; text-transform: uppercase; font-weight: 200 lub 300 (ultra-lekki, elegancki)
- Bardzo dużo przestrzeni: padding 100px+, duże marginy wokół tekstu
- Subtelne animacje: wolniejsze tranzycje (0.6s ease), delikatne fade-in
- Minimalizm - mniej elementów, każdy perfekcyjnie wyważony
COPY - ZASADY:
- POLSKIE ZNAKI (KRYTYCZNE): Strona jest po polsku. MUSISZ używać polskich znaków diakrytycznych: ą, ć, ę, ł, ń, ó, ś, ź, ż (i wielkie: Ą, Ć, Ę, Ł, Ń, Ó, Ś, Ź, Ż). NIGDY nie pisz "ze" zamiast "że", "zeby" zamiast "żeby", "ktory" zamiast "który", "rozwiazanie" zamiast "rozwiązanie" itp. Każde polskie słowo musi mieć poprawne znaki diakrytyczne. To dotyczy WSZYSTKICH tekstów: nagłówków, paragrafów, przycisków, FAQ, footer, meta tagów, title, alt textów.
- Użyj DOKŁADNIE tekstów z Karty Architektury. Nie przepisuj ich, nie "ulepszaj"
- ZAKAZ EM DASH: NIGDY nie używaj znaku - (em dash, long dash) NIGDZIE w całym HTML - ani w tytule, ani w meta, ani w nagłówkach, ani w treści, ani w footerze, ani w przyciskach. Zamiast tego użyj - (hyphen) lub | (pipe). To dotyczy też <title> i og:title. ZERO wyjątków.
- Nie dodawaj cudzysłowów drukarskich (" " ' ') - używaj prostych " i '
- Przyciski CTA tylko tam, gdzie Karta Architektury je przewiduje
SEKCJA HERO:
- Karta Architektury podaje wariant Hero (A/B/C). Stosuj się do niego:
* Wariant A (bold typografia): bardzo duży font (clamp(2.5rem, 6vw, 5rem) lub więcej dla CREATIVE), kreatywny układ, brak zdjęcia - sam tekst + CTA + dekoracyjne elementy graficzne (gradienty, kształty, linie). Dla TECH: dodaj glow i dot-grid. Dla CREATIVE: użyj clamp(3rem, 8vw, 7rem). Dla LUXURY: dodaj elegancki letterspacing.
* Wariant B (tekst + zdjęcie): klasyczny dwukolumnowy, zdjęcie z zaokrąglonymi rogami lub ciekawym crop, tekst z wyrazistą hierarchią
* Wariant C (tło wizualne): zdjęcie/gradient jako tło sekcji, tekst na wierzchu z kontrastem (overlay lub text-shadow)
- Hero musi robić WOW - to pierwsza rzecz, którą widzi odwiedzający
- HERO WYSOKOŚĆ (KRYTYCZNE): Hero MUSI mieć height: 100vh i max-height: 100vh. NIGDY min-height: 100vh (bo hero rośnie poza viewport i wygląda brzydko). Treść hero musi się zmieścić w viewporcie. Hero content MUSI mieć overflow: hidden. H1 MUSI mieć overflow-wrap: break-word, żeby tekst nie wychodził poza hero. Na mobile: height: auto z min-height: 100svh.
SEKCJA O MNIE:
- Jeśli Karta Architektury opisuje zdjęcie - dodaj placeholder img z alt="Twoje zdjęcie" i komentarzem HTML <!-- ZAMIEŃ NA SWOJE ZDJĘCIE: zmień src na ścieżkę do Twojego pliku, np. src="moje-zdjecie.jpg" -->
SEKCJA OPINIE:
- Karta Architektury podaje wariant opinii (A/B/C). Stosuj się do niego:
* Wariant A (ze zdjęciami): karty z małym okrągłym zdjęciem (placeholder) + imię + cytat + wyróżnik efektu. Komentarz HTML: <!-- ZAMIEŃ ZDJĘCIA: zmień src na zdjęcia swoich klientów -->
* Wariant B (bez zdjęć): karty z dużą ikoną cudzysłowu (SVG) lub kołem z inicjałami klienta (CSS) + imię + cytat + wyróżnik efektu. Wygląda profesjonalnie bez potrzeby zdjęć.
* Wariant C (screenshoty): grid/masonry ze screenshotami opinii jako obrazki. Komentarz HTML: <!-- WSTAW SCREENSHOTY: zamień src na swoje screenshoty opinii z Google/FB/wiadomości -->
- Komentarz HTML: <!-- ZAMIEŃ PLACEHOLDERY: dodaj prawdziwe opinie klientów -->
- Styl kart opinii dopasuj do archetypu (glass dla TECH, zaokrąglone dla WELLNESS, minimalne dla LUXURY)
TECHNICZNE:
- JEDEN plik index.html (HTML + CSS w <style> + JS w <script> na końcu)
- Zero zewnętrznych bibliotek CSS/JS (brak Tailwind, Bootstrap, jQuery). Dozwolone: Google Fonts i Iconify CDN
- Ikony: Iconify CDN (dodaj <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script> w <head>, użyj <iconify-icon icon="solar:nazwa-bold-duotone"></iconify-icon> - biblioteka Solar Duotone). Alternatywnie: unikalne inline SVG dopasowane do branży
- SPÓJNOŚĆ IKON W GRIDACH: Jeśli jeden element w gridzie/liście ma ikonę, WSZYSTKIE elementy muszą mieć ikony. Minimalny rozmiar ikony w kartach: font-size: 2.5rem. Ikony muszą mieć ten sam rozmiar i styl w obrębie jednej sekcji.
- Google Fonts przez <link> w <head>
- PLACEHOLDER ZDJĘCIA: Wszystkie zdjęcia jako SVG placeholder (prostokąt z kolorem tła + tekst opisujący zdjęcie) LUB CSS gradient background z tekstem. NIGDY nie linkuj do Unsplash, Pexels ani żadnych zewnętrznych URLów zdjęć. Dodaj komentarz HTML <!-- ZAMIEŃ: wstaw swoje zdjęcie -->.
- FAQ SEKCJA (KRYTYCZNE): FAQ MUSI używać natywnych elementów HTML <details> i <summary> (NIE custom divów z JS toggle). Daje: lepszy UX, accessibility, zero dodatkowego JS. Styl: summary::after z content '+' i transform rotate(45deg) przy details[open]. Każde pytanie jako osobny <details>. FAQ lista MUSI być w kontenerze z max-width: 800px; margin: 0 auto (wycentrowana na stronie, NIE przyklejona do lewej).
- MOBILE MENU: Na mobile (< 768px) zastąp linki nawigacji hamburger menu (3 linie SVG, toggle klasą JS, animowany). Menu rozwija się jako full-width dropdown lub slide-in panel.
- Responsywny: mobile-first, breakpoints: 480px, 768px, 1024px
- SPÓJNY CONTAINER (KRYTYCZNE): .container MUSI mieć: max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem). NIGDY padding boczny < 1.5rem (za ciasno) ani > 4rem (za dużo pustego miejsca).
- SPÓJNY SECTION PADDING: Każda section MUSI mieć: padding: clamp(4rem, 8vw, 8rem) 0. Sekcje muszą mieć równy vertical rhythm - identyczny padding góra/dół.
- HTML semantyczny: H1 tylko w Hero, każda sekcja z H2
- Smooth scroll na anchor linkach w menu
ANIMACJE (zgodne z Kartą Wizualną):
- Scroll-reveal: IntersectionObserver, elementy fade-in + translateY(20px) + filter: blur(4px) na starcie (blur-in effect). Transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease
- Hover na przyciskach: scale(1.02) + zmiana koloru (dla TECH: dodaj glow na hover)
- Sticky navbar po scrollu (jeśli Karta Wizualna to przewiduje)
- prefers-reduced-motion → wyłącz WSZYSTKIE animacje
- Tempo animacji dopasuj do archetypu: TECH/SPORT = szybkie (0.3s), LUXURY/CREATIVE = wolne (0.6s), WELLNESS/FRIENDLY = średnie (0.4s)
- Marquee animation na social proof / logach klientów (jeśli są w Karcie Architektury): @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } z overflow: hidden na kontenerze, duplikuj elementy w HTML
- Border beam na głównym CTA (opcjonalnie, szczególnie TECH): animowany conic-gradient na pseudo-elementach ::before/::after obracający się wokół obramówki przycisku
- Clip animation na hero headline (opcjonalnie): clip-path: inset(0 100% 0 0) animowane do inset(0) z transition 1s ease-out po załadowaniu strony
RESPONSIVE:
- Mobile (do 480px): 1 kolumna, mniejsze nagłówki
- Tablet (481-1024px): 2 kolumny gdzie dotyczy
- Desktop (1025px+): pełny layout z Karty Architektury
- Obrazy: aspect-ratio + object-fit: cover
- Fluid typography: clamp() - KAŻDY clamp() MUSI mieć DOKŁADNIE 3 wartości: clamp(MIN, PREFERRED, MAX). Np. clamp(2rem, 4vw, 3.5rem). Clamp z 2 wartościami to BŁĄD CSS i strona się zepsuje.
- Przyciski na mobile: min-height 44px (dotykowe)
- Edge-to-edge zdjęcia (CREATIVE): na mobile normalna szerokość, edge-to-edge tylko na desktop
WYNIK:
Zwróć WYŁĄCZNIE kompletny kod index.html w JEDNYM bloku kodu. CAŁY kod od <!DOCTYPE html> do </html> musi być w JEDNYM ciągłym bloku - NIGDY nie dziel go na wiele bloków, fragmentów ani sekcji. Jeden blok, jeden plik, zero przerw. Bez komentarzy poza oznaczonymi placeholderami. Bez wyjaśnień przed ani po kodzie.Następny krok