diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 37a5291..e38c3db 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href; const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href; const SMS_VERIFICATION_CODE = '123456'; -type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail'; +type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail'; type MessageThreadListing = { listingId: number; @@ -3413,7 +3413,8 @@ function App() { /> )} {view === 'services' && } - {view === 'guides' && } + {view === 'guides' && } + {view === 'guideBuying' && } {view === 'map' && } {view === 'home' && } @@ -12292,7 +12293,668 @@ function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) { ); } -function GuidesPage() { +const buyingProcessSteps = [ + { icon: 'search', title: 'Analiza potrzeb i możliwości', text: 'Określ, po co kupujesz i na co Cię stać.' }, + { icon: 'calculator', title: 'Określenie budżetu', text: 'Policz cenę plus wszystkie koszty dodatkowe.' }, + { icon: 'chart', title: 'Sprawdzenie zdolności', text: 'Zbadaj zdolność kredytową w kilku bankach.' }, + { icon: 'pin', title: 'Wybór i analiza lokalizacji', text: 'Sprawdź okolicę, dojazdy i plany zagospodarowania.' }, + { icon: 'eye', title: 'Oglądanie mieszkań', text: 'Odwiedź kilka ofert i porównaj je na spokojnie.' }, + { icon: 'group', title: 'Negocjacja ceny', text: 'Ustal realną wartość i wynegocjuj warunki.' }, + { icon: 'calendar', title: 'Rezerwacja mieszkania', text: 'Zabezpiecz ofertę umową rezerwacyjną.' }, + { icon: 'document', title: 'Umowa przedwstępna', text: 'Spisz warunki i terminy u notariusza lub cywilnie.' }, + { icon: 'building', title: 'Kredyt hipoteczny', text: 'Złóż wnioski i wybierz najlepszą ofertę.' }, + { icon: 'scale', title: 'Akt notarialny', text: 'Podpisz umowę przenoszącą własność.' }, + { icon: 'key', title: 'Odbiór mieszkania', text: 'Sprawdź stan techniczny i spisz protokół.' }, + { icon: 'house', title: 'Zameldowanie i formalności', text: 'Przepisz media, ubezpiecz i zamelduj się.' }, +]; + +const buyingToc = [ + { id: 'start', label: 'Od czego zacząć?' }, + { id: 'budzet', label: 'Jak określić budżet?' }, + { id: 'gotowka-kredyt', label: 'Gotówka czy kredyt?' }, + { id: 'zdolnosc', label: 'Zdolność kredytowa' }, + { id: 'rynek', label: 'Rynek pierwotny czy wtórny?' }, + { id: 'lokalizacja', label: 'Wybór lokalizacji' }, + { id: 'ogladanie', label: 'Jak oglądać mieszkanie?' }, + { id: 'stan-techniczny', label: 'Stan techniczny' }, + { id: 'ksiega-wieczysta', label: 'Księga wieczysta' }, + { id: 'negocjacje', label: 'Negocjacja ceny' }, + { id: 'umowa-przedwstepna', label: 'Umowa przedwstępna' }, + { id: 'akt-notarialny', label: 'Akt notarialny' }, + { id: 'odbior', label: 'Odbiór mieszkania' }, + { id: 'klucze', label: 'Przekazanie kluczy' }, + { id: 'bledy', label: 'Najczęstsze błędy' }, + { id: 'faq', label: 'FAQ' }, + { id: 'podsumowanie', label: 'Podsumowanie' }, +]; + +const buyingCostRows = [ + { name: 'Wkład własny', who: 'Kupujący', value: 'zwykle 10–20% ceny', note: 'Im wyższy, tym niższa rata i lepsze warunki kredytu.' }, + { name: 'Podatek PCC (rynek wtórny)', who: 'Kupujący', value: '2% wartości', note: 'Zakup pierwszego mieszkania bywa zwolniony z PCC.' }, + { name: 'Taksa notarialna', who: 'Kupujący', value: 'zależna od ceny', note: 'Stawki maksymalne są ustalone rozporządzeniem, do negocjacji.' }, + { name: 'Wpis do księgi wieczystej', who: 'Kupujący', value: '200 zł + 200 zł', note: 'Wpis własności oraz ewentualnej hipoteki.' }, + { name: 'Prowizja pośrednika', who: 'Zależnie od umowy', value: 'zwykle 1–3%', note: 'Tylko jeśli korzystasz z biura nieruchomości.' }, + { name: 'Koszty kredytu', who: 'Kredytobiorca', value: 'prowizja, wycena, ubezpieczenia', note: 'Doliczane do finansowania zakupu z banku.' }, +]; + +const buyingChecklist = [ + 'Przeczytaj aktualny odpis z księgi wieczystej i sprawdź dział III i IV.', + 'Poproś o zaświadczenie o braku zaległości w czynszu i mediach.', + 'Sprawdź, kto figuruje jako właściciel i czy zgadza się ze sprzedającym.', + 'Zapytaj o zaległości i plany remontowe wspólnoty lub spółdzielni.', + 'Obejrzyj mieszkanie za dnia i wieczorem, sprawdź nasłonecznienie.', + 'Skontroluj instalacje: prąd, wodę, ogrzewanie, wentylację i wilgoć.', + 'Ustal, co dokładnie wchodzi w cenę (meble, kuchnia, miejsce postojowe).', + 'Zweryfikuj wysokość czynszu administracyjnego i co obejmuje.', + 'Sprawdź plan zagospodarowania i co może powstać w okolicy.', + 'Policz pełny koszt zakupu z podatkami i kredytem, nie tylko cenę.', +]; + +const buyingMistakes = [ + { title: 'Liczenie tylko ceny mieszkania', text: 'Pomijanie podatków, taksy notarialnej, kosztów kredytu i wykończenia potrafi podnieść budżet o kilkanaście procent.' }, + { title: 'Pominięcie księgi wieczystej', text: 'Brak sprawdzenia działu III i IV grozi zakupem mieszkania z hipoteką, służebnością lub roszczeniem osoby trzeciej.' }, + { title: 'Zakup pod wpływem emocji', text: 'Decyzja po jednym oglądaniu i „bo ktoś inny też jest zainteresowany” to najczęstsza droga do przepłacenia.' }, + { title: 'Brak zapasu w budżecie', text: 'Kredyt na maksimum zdolności nie zostawia poduszki na wzrost rat, remont czy nagłe wydatki.' }, + { title: 'Zaliczka zamiast zadatku', text: 'Przy zaliczce, jeśli druga strona się wycofa, trudniej dochodzić rekompensaty niż przy zadatku.' }, + { title: 'Zignorowanie stanu technicznego', text: 'Ukryta wilgoć, zła instalacja elektryczna czy stare piony to koszty, które ujawniają się dopiero po zakupie.' }, +]; + +const buyingFaq = [ + { + q: 'Ile własnych pieniędzy potrzebuję na start?', + a: 'Do kredytu banki oczekują zwykle wkładu własnego na poziomie 10–20% ceny. Do tego dochodzą koszty transakcyjne: podatek, taksa notarialna, wpisy do księgi wieczystej i ewentualna prowizja pośrednika. Bezpiecznie jest założyć, że oprócz wkładu własnego potrzebujesz jeszcze kilku procent ceny na same formalności.', + }, + { + q: 'Czy lepiej kupić od dewelopera czy z rynku wtórnego?', + a: 'To zależy od Twoich priorytetów. Nowe mieszkanie od dewelopera bywa energooszczędne i objęte gwarancją, ale często wymaga wykończenia i czekania na odbiór. Rynek wtórny to gotowe do zamieszkania lokale w ukształtowanych dzielnicach, za to trzeba dokładniej sprawdzić stan techniczny i stan prawny.', + }, + { + q: 'Czy przy zakupie pierwszego mieszkania zapłacę podatek PCC?', + a: 'Przy zakupie z rynku wtórnego standardowo obowiązuje podatek 2% od wartości. Dla osób kupujących swoje pierwsze mieszkanie lub dom przewidziano jednak zwolnienie z tego podatku. Zawsze potwierdź aktualne warunki u notariusza, bo to on nalicza i odprowadza PCC.', + }, + { + q: 'Jak długo trwa cały proces zakupu?', + a: 'Zakup za gotówkę można sfinalizować nawet w kilka tygodni. Z kredytem hipotecznym realny czas to zwykle 1,5–3 miesiące, bo dochodzi analiza wniosku, wycena nieruchomości i decyzja banku. Warto ten czas uwzględnić w umowie przedwstępnej.', + }, + { + q: 'Co daje umowa przedwstępna?', + a: 'Zabezpiecza obie strony: ustala cenę, termin i warunki finalnej transakcji. Najczęściej towarzyszy jej zadatek. Jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający, zwraca go w podwójnej wysokości. To silniejsze zabezpieczenie niż zwykła zaliczka.', + }, + { + q: 'Czy muszę korzystać z pośrednika?', + a: 'Nie ma takiego obowiązku. Dobry pośrednik oszczędza czas i pomaga w formalnościach, ale pobiera prowizję. Jeśli kupujesz samodzielnie, tym bardziej zadbaj o weryfikację stanu prawnego i technicznego oraz o dobrze napisane umowy.', + }, +]; + +async function downloadBuyingChecklistPdf() { + const unwrapModuleDefault = (module: T | { default: T }): T => + 'default' in Object(module) ? (module as { default: T }).default : (module as T); + const downloadBlob = (blob: Blob, fileName: string) => { + const objectUrl = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = objectUrl; + link.download = fileName; + link.rel = 'noopener'; + document.body.appendChild(link); + link.click(); + link.remove(); + window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000); + }; + + type PdfMakeRuntime = { + addFontContainer: (fontContainer: unknown) => void; + createPdf: (definition: unknown) => { getBlob: () => Promise }; + }; + + let pdfMake: PdfMakeRuntime; + try { + const pdfMakeModule = await import('pdfmake/build/pdfmake.js'); + const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js'); + pdfMake = unwrapModuleDefault(pdfMakeModule as unknown as PdfMakeRuntime | { default: PdfMakeRuntime }); + pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule as unknown as { default: unknown })); + } catch (error) { + console.error('Nie udało się załadować generatora PDF', error); + window.alert('Nie udało się przygotować pliku PDF. Odśwież stronę i spróbuj ponownie.'); + return; + } + + const docDefinition = { + pageSize: 'A4', + pageMargins: [48, 48, 48, 48], + defaultStyle: { font: 'Roboto', color: '#14223a', fontSize: 11, lineHeight: 1.35 }, + content: [ + { text: 'PolskaLokalnie', color: '#0b9f5c', fontSize: 12, bold: true, margin: [0, 0, 0, 2] }, + { text: 'Lista kontrolna przy zakupie mieszkania', fontSize: 20, bold: true, margin: [0, 0, 0, 4] }, + { text: '10 rzeczy, które warto sprawdzić przed podpisaniem umowy', color: '#526171', margin: [0, 0, 0, 18] }, + { + ol: buyingChecklist.map((item) => ({ text: item, margin: [0, 0, 0, 6] })), + }, + { + text: 'Materiał informacyjny. Nie stanowi porady prawnej ani podatkowej – w razie wątpliwości skonsultuj się z notariuszem lub doradcą.', + color: '#8793a3', + fontSize: 9, + margin: [0, 22, 0, 0], + }, + ], + }; + + try { + const blob = await pdfMake.createPdf(docDefinition).getBlob(); + downloadBlob(blob, 'lista-kontrolna-zakup-mieszkania.pdf'); + } catch (error) { + console.error('Nie udało się wygenerować PDF', error); + window.alert('Nie udało się wygenerować pliku PDF. Spróbuj ponownie.'); + } +} + +function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) { + const scrollToId = (id: string) => { + const target = document.getElementById(id); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; + + return ( +
+
+ +
+
+ + + + Kupno mieszkania + +

Jak kupić mieszkanie krok po kroku

+

+ Kompletny, uczciwy przewodnik po całym procesie zakupu – od pierwszej decyzji, przez budżet, + kredyt i formalności, aż po odbiór kluczy. Prostym językiem, z listami kontrolnymi i praktycznymi + wskazówkami, które pomogą Ci uniknąć najczęstszych błędów. +

+
+ Aktualna wiedza na 2026 rok + Oparte na sprawdzonych zasadach + Listy kontrolne i PDF + Kalkulatory kosztów +
+
+
+ +
+ + +
+
+
+

Proces zakupu mieszkania w 12 krokach

+

Cała droga w skrócie. Poniżej rozwijamy każdy etap dokładnie.

+
+
+ {buyingProcessSteps.map((step, index) => ( +
+ {index + 1} + + {step.title} + {step.text} +
+ ))} +
+
+ +
+ 01 +

Od czego zacząć zakup mieszkania?

+

+ Zanim zaczniesz przeglądać oferty, odpowiedz sobie na kilka pytań. To one, a nie ładne zdjęcia, + zdecydują o trafności zakupu. Ustal, czy kupujesz dla siebie, dla rodziny, czy pod inwestycję, + jak długo planujesz tu mieszkać i co jest dla Ciebie nienegocjowalne – metraż, liczba pokoi, + piętro, winda, balkon czy miejsce postojowe. +

+

+ Rozdziel potrzeby od zachcianek. Potrzeba to np. druga sypialnia przy powiększającej się rodzinie. + Zachcianka to konkretny kolor kuchni, który i tak zmienisz. Im lepiej rozpoznasz swoje realne potrzeby, + tym mniej ofert będziesz musiał obejrzeć i tym rzadziej dasz się ponieść emocjom. +

+
+ +
+ Wskazówka +

Wypisz na kartce trzy kryteria, których nie odpuścisz, i trzy, które są mile widziane. Wracaj do tej listy przy każdym oglądaniu – to najprostsza ochrona przed impulsywną decyzją.

+
+
+
+ +
+ 02 +

Jak określić budżet?

+

+ Budżet to nie tylko cena mieszkania. To cena powiększona o wszystkie koszty transakcyjne oraz o to, + co wydasz zaraz po zakupie. Zsumuj cenę, podatki, taksę notarialną, wpisy do księgi wieczystej, + ewentualną prowizję pośrednika i koszty kredytu. Dopiero ta kwota pokazuje, na co naprawdę Cię stać. +

+
+ + + + + + + + + + + {buyingCostRows.map((row) => ( + + + + + + + ))} + +
KosztKto ponosiIle (orientacyjnie)Uwagi
{row.name}{row.who}{row.value}{row.note}
+
+
+ +
+ Zostaw zapas +

Nie planuj zakupu na granicy możliwości. Poduszka finansowa na kilka rat, drobny remont i nieprzewidziane wydatki to nie luksus, tylko element bezpiecznego budżetu.

+
+
+
+ +
+ 03 +

Gotówka czy kredyt hipoteczny?

+

+ Zakup za gotówkę jest szybszy, prostszy i pozwala mocniej negocjować, bo sprzedający nie czeka na + decyzję banku. Nie zawsze jednak warto zamrażać wszystkie oszczędności w jednej nieruchomości – + tracisz płynność i poduszkę bezpieczeństwa. +

+

+ Kredyt hipoteczny rozkłada koszt w czasie i pozwala kupić wcześniej, ale oznacza wieloletnie + zobowiązanie, odsetki i zależność od zmian stóp procentowych. Zanim zdecydujesz, porównaj oferty + kilku banków i policz całkowity koszt kredytu, a nie tylko wysokość raty. +

+
+
+

Gotówka

+
    +
  • Szybka i prosta transakcja
  • +
  • Silniejsza pozycja w negocjacjach
  • +
  • Brak odsetek i rat
  • +
  • Uwaga: mniejsza płynność finansowa
  • +
+
+
+

Kredyt hipoteczny

+
    +
  • Kupujesz, nie mając całej kwoty
  • +
  • Oszczędności zostają jako rezerwa
  • +
  • Uwaga: całkowity koszt rośnie o odsetki
  • +
  • Uwaga: wieloletnie zobowiązanie
  • +
+
+
+
+ +
+ 04 +

Jak obliczyć zdolność kredytową?

+

+ Zdolność kredytowa to maksymalna kwota, jaką bank jest gotów Ci pożyczyć. Wpływają na nią głównie: + wysokość i stabilność dochodów, forma zatrudnienia, liczba osób na utrzymaniu, inne zobowiązania + (raty, karty, limity) oraz historia w BIK. Banki liczą też bufor na wypadek wzrostu stóp, dlatego + maksymalna kwota bywa niższa, niż wynikałoby z samej raty. +

+

+ Każdy bank liczy zdolność inaczej, więc warto sprawdzić kilka ofert – różnice bywają znaczne. + Zanim złożysz wnioski, uporządkuj finanse: spłać drobne zobowiązania, zamknij nieużywane karty + i limity, zadbaj o pozytywną historię kredytową. To realnie podnosi zdolność. +

+
+ +
+ Policz orientacyjnie +

Skorzystaj z naszych kalkulatorów po prawej stronie, aby oszacować budżet i porównać koszty. Ostateczną zdolność zawsze potwierdza bank na podstawie dokumentów.

+
+
+
+ +
+ 05 +

Rynek pierwotny czy wtórny?

+

+ Rynek pierwotny to zakup od dewelopera – najczęściej nowe, energooszczędne mieszkanie, często jeszcze + w budowie i do wykończenia. Rynek wtórny to zakup od dotychczasowego właściciela – zwykle mieszkanie + gotowe do zamieszkania, w ukształtowanej okolicy. Oba mają swoje zalety; wybór zależy od tego, czy + wolisz nowe i „pod siebie”, czy gotowe i sprawdzone. +

+
+
+

Rynek pierwotny

+
    +
  • Nowy standard i niższe koszty eksploatacji
  • +
  • Możliwość aranżacji od podstaw
  • +
  • Gwarancja i rękojmia dewelopera
  • +
  • Uwaga: często konieczne wykończenie i czekanie na odbiór
  • +
+
+
+

Rynek wtórny

+
    +
  • Gotowe do zamieszkania od zaraz
  • +
  • Sprawdzona lokalizacja i sąsiedztwo
  • +
  • Możliwość zobaczenia realnego stanu
  • +
  • Uwaga: dokładniej sprawdź stan techniczny i prawny
  • +
+
+
+
+ +
+ 06 +

Jak wybrać lokalizację?

+

+ Lokalizacji nie zmienisz remontem, dlatego to jedno z najważniejszych kryteriów. Sprawdź dojazd do + pracy i szkoły, dostęp do komunikacji, sklepów, przychodni i terenów zielonych. Odwiedź okolicę o + różnych porach dnia – rano, po południu i wieczorem – żeby poznać hałas, ruch i realny klimat miejsca. +

+

+ Zajrzyj do miejscowego planu zagospodarowania przestrzennego, żeby wiedzieć, co może powstać w + sąsiedztwie – park czy ruchliwa droga to duża różnica dla komfortu i przyszłej wartości. Zwróć uwagę + na kierunki świata i nasłonecznienie oraz na to, czy okolica się rozwija, czy raczej podupada. +

+
+ +
+ 07 +

Jak oglądać mieszkanie?

+

+ Nie kupuj po jednym oglądaniu i nie oglądaj tylko przy pełnym słońcu. Przyjdź kilka razy, także + wieczorem, i nie bój się zadawać pytań: o wysokość czynszu i co obejmuje, o koszty ogrzewania, o wiek + instalacji, o plany remontowe budynku i o powód sprzedaży. Rób zdjęcia i notatki, bo po obejrzeniu + kilku ofert łatwo je pomylić. +

+

+ Zwróć uwagę na to, czego nie widać na pierwszy rzut oka: ślady wilgoci w narożnikach i pod oknami, + stan okien i drzwi, ciśnienie wody, działanie wentylacji, wygłuszenie między mieszkaniami. Sprawdź też + części wspólne – klatkę, windę, piwnicę i otoczenie budynku mówią wiele o tym, jak zarządzana jest + nieruchomość. +

+
+ +
+ 08 +

Jak sprawdzić stan techniczny?

+

+ Stan techniczny decyduje o tym, ile dołożysz po zakupie. Najważniejsze punkty to instalacja + elektryczna (czy jest bezpieczna i o odpowiedniej mocy), instalacja wodno-kanalizacyjna i piony, + ogrzewanie, wentylacja oraz izolacja i ślady wilgoci lub grzyba. W starszych budynkach zwróć uwagę na + wiek instalacji i okien – ich wymiana bywa kosztowna. +

+
+ +
+ Rozważ fachowca +

Przy droższym zakupie lub starszym mieszkaniu warto zabrać na oględziny osobę znającą się na budownictwie. Koszt takiej konsultacji jest niewielki wobec potencjalnych ukrytych wad.

+
+
+
+ +
+ 09 +

Jak sprawdzić księgę wieczystą?

+

+ Księga wieczysta to dokument, który pokazuje stan prawny nieruchomości. Odpis możesz sprawdzić online, + znając numer księgi. Zwróć uwagę na cztery działy: oznaczenie nieruchomości, właściciela, prawa i + ograniczenia oraz hipoteki. To podstawowa ochrona przed zakupem mieszkania z niespodziankami. +

+
    +
  • Dział I – co to za nieruchomość: adres, metraż, pomieszczenia przynależne.
  • +
  • Dział II – kto jest właścicielem. Musi zgadzać się z osobą sprzedającą.
  • +
  • Dział III – prawa, ograniczenia, służebności i roszczenia osób trzecich.
  • +
  • Dział IV – hipoteki. Jeśli jest, ustal z bankiem i notariuszem sposób jej wykreślenia.
  • +
+
+ +
+ Nie pomijaj tego kroku +

Wpis obciążający nieruchomość może przejść na Ciebie razem z zakupem. Sprawdzenie księgi to kilka minut, a chroni przed poważnymi problemami.

+
+
+
+ +
+ 10 +

Jak negocjować cenę?

+

+ Negocjacje zacznij od wiedzy. Sprawdź ceny podobnych mieszkań w okolicy, zobacz, jak długo oferta jest + wystawiona i poznaj sytuację sprzedającego. Argumentem nie są emocje, tylko fakty: konieczne remonty, + stan instalacji, wysoki czynsz czy niższe ceny porównywalnych lokali. +

+

+ Bądź konkretny i spokojny. Podaj kwotę, którą jesteś gotów zapłacić, wraz z uzasadnieniem, i miej + wyznaczoną granicę, powyżej której rezygnujesz. Gotowość do szybkiej, pewnej transakcji – zwłaszcza za + gotówkę – to często silniejszy argument niż sama presja na obniżkę. +

+
+ +
+ 11 +

Umowa przedwstępna

+

+ Umowa przedwstępna zabezpiecza ustalenia, zanim dojdzie do finalnej transakcji. Określa cenę, termin + zawarcia umowy właściwej, stan mieszkania i warunki, np. uzyskanie kredytu. Można ją zawrzeć zwykłą + formą pisemną lub u notariusza – forma notarialna daje silniejszą ochronę. +

+
+ +
+ Zadatek a zaliczka +

Zadatek działa dyscyplinująco: jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający – zwraca go w podwójnej wysokości. Zaliczka jest po prostu zwracana. Dla bezpieczeństwa transakcji częściej stosuje się zadatek.

+
+
+
+ +
+ 12 +

Akt notarialny

+

+ Przeniesienie własności mieszkania musi mieć formę aktu notarialnego. To notariusz sprawdza tożsamość + stron, stan prawny nieruchomości i treść umowy, a następnie składa wniosek o wpis nowego właściciela do + księgi wieczystej. Przy akcie płacisz taksę notarialną, podatek oraz opłaty sądowe. +

+

+ Przed podpisaniem dokładnie przeczytaj projekt aktu – ceny, terminy, sposób i datę wydania mieszkania, + zapisy o zadatku i o wykreśleniu ewentualnej hipoteki. Jeśli czegoś nie rozumiesz, pytaj notariusza. + To jego rola, żeby wyjaśnić Ci każdy zapis. +

+
+ +
+ 13 +

Odbiór mieszkania

+

+ Odbiór to moment sprawdzenia, czy dostajesz mieszkanie w umówionym stanie. Spisz protokół zdawczo-odbiorczy: + stany liczników (prąd, woda, gaz, ciepło), liczbę kluczy i pilotów oraz to, co zostaje w mieszkaniu. + Przy nowym lokalu od dewelopera dokładnie sprawdź jakość wykończenia i zgłoś wszystkie usterki w protokole. +

+
+ +
+ Wszystko na piśmie +

Każdą usterkę i każdy stan licznika zapisz w protokole podpisanym przez obie strony. To Twój dowód na wypadek późniejszych rozliczeń i reklamacji.

+
+
+
+ +
+ 14 +

Przekazanie kluczy i formalności po zakupie

+

+ Po odbiorze zostają formalności, o których łatwo zapomnieć w euforii. Przepisz na siebie umowy na prąd, + gaz, wodę i internet, zgłoś zmianę właściciela do wspólnoty lub spółdzielni, rozważ ubezpieczenie + mieszkania i zamelduj się pod nowym adresem. Zachowaj wszystkie dokumenty zakupu w jednym miejscu. +

+
    +
  • Przepisanie liczników i umów z dostawcami mediów.
  • +
  • Zgłoszenie nowego właściciela do zarządcy budynku.
  • +
  • Ubezpieczenie nieruchomości (a przy kredycie – często wymagane).
  • +
  • Zameldowanie oraz aktualizacja adresu w ważnych instytucjach.
  • +
+
+ +
+
+

Checklista – 10 rzeczy do sprawdzenia przed zakupem

+

Wydrukuj lub pobierz w PDF i miej przy sobie podczas oglądania.

+
+
+ {buyingChecklist.map((item, index) => ( + + ))} +
+ +
+ +
+ 15 +

Najczęstsze błędy kupujących

+

Większości kosztownych pomyłek da się uniknąć, jeśli wie się, gdzie najczęściej się pojawiają.

+
+ {buyingMistakes.map((mistake) => ( +
+ +
+ {mistake.title} +

{mistake.text}

+
+
+ ))} +
+
+ +
+ 16 +

Najczęściej zadawane pytania (FAQ)

+
+ {buyingFaq.map((item) => ( +
+ + {item.q} + + +

{item.a}

+
+ ))} +
+
+ +
+ 17 +

Podsumowanie

+

+ Zakup mieszkania to jedna z ważniejszych decyzji finansowych w życiu, ale rozłożona na etapy przestaje + być przytłaczająca. Zacznij od potrzeb i budżetu, świadomie wybierz sposób finansowania, dokładnie + sprawdź stan techniczny i prawny, a formalności potraktuj poważnie. Najlepszą ochroną są wiedza, + spokój i pisemne ustalenia – emocje zostaw na moment odbioru kluczy. +

+
+ +

Ten poradnik ma charakter informacyjny i nie stanowi porady prawnej ani podatkowej. Szczegóły dotyczące podatków, opłat i umów potwierdzaj u notariusza, doradcy kredytowego lub prawnika.

+
+
+ +
+
+

Gotowy, by znaleźć swoje mieszkanie?

+

Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.

+
+ +
+
+ + +
+
+ ); +} + +function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) { return (
@@ -12329,16 +12991,35 @@ function GuidesPage() {
- {guideTopics.map((topic) => ( -
- - - -

{topic.title}

-

{topic.text}

- {topic.count} -
- ))} + {guideTopics.map((topic) => { + const isBuying = topic.title === 'Kupno mieszkania'; + return ( +
onNavigate('guideBuying') : undefined} + onKeyDown={ + isBuying + ? (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + onNavigate('guideBuying'); + } + } + : undefined + } + > + + + +

{topic.title}

+

{topic.text}

+ {topic.count} +
+ ); + })}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 2f93d5c..70b441f 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -24858,3 +24858,987 @@ svg { grid-template-columns: 1fr !important; } } + +/* ===== Poradnik: Kupno mieszkania ===== */ +.guide-article { + background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%); + min-height: calc(100vh - 82px); + padding-bottom: 56px; +} + +.guide-hero { + min-height: 340px; + overflow: hidden; + position: relative; +} + +.guide-hero img { + height: 100%; + inset: 0; + object-fit: cover; + object-position: right center; + position: absolute; + width: 100%; +} + +.guide-hero-shade { + background: + linear-gradient(180deg, rgba(248, 250, 252, 0) 72%, #f8fafc 100%), + linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.97) 40%, rgba(248, 250, 252, 0.6) 62%, rgba(248, 250, 252, 0.06) 96%); + inset: 0; + position: absolute; +} + +.guide-hero-inner { + min-height: 340px; + padding: 30px 48px 46px; + position: relative; + z-index: 1; +} + +.guide-back { + align-items: center; + background: rgba(255, 255, 255, 0.72); + border: 1px solid #dce4ec; + border-radius: 999px; + color: #14223a; + cursor: pointer; + display: inline-flex; + font-size: 12px; + font-weight: 850; + gap: 6px; + padding: 7px 14px 7px 10px; +} + +.guide-back svg { + height: 15px; + transform: rotate(180deg); + width: 15px; +} + +.guide-hero-badge { + align-items: center; + background: #0b9f5c; + border-radius: 999px; + color: #ffffff; + display: inline-flex; + font-size: 12px; + font-weight: 900; + gap: 7px; + margin-top: 20px; + padding: 7px 14px; +} + +.guide-hero-badge svg { + height: 15px; + width: 15px; +} + +.guide-hero h1 { + color: #14223a; + font-size: clamp(38px, 3.8vw, 60px); + line-height: 1.02; + margin: 16px 0 0; + max-width: 720px; +} + +.guide-hero-lead { + color: #4a5766; + font-size: 17px; + font-weight: 650; + line-height: 1.5; + margin: 16px 0 0; + max-width: 680px; +} + +.guide-hero-chips { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 22px; +} + +.guide-hero-chips span { + align-items: center; + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + color: #33465c; + display: inline-flex; + font-size: 12px; + font-weight: 800; + gap: 7px; + padding: 8px 12px; +} + +.guide-hero-chips svg { + color: #0b9f5c; + height: 15px; + width: 15px; +} + +.guide-article-layout { + align-items: start; + display: grid; + gap: 28px; + grid-template-columns: 232px minmax(0, 1fr) 312px; + margin-top: 26px; +} + +/* Spis treści */ +.guide-toc { + position: sticky; + top: 20px; +} + +.guide-toc-inner { + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + max-height: calc(100vh - 40px); + overflow-y: auto; + padding: 18px 16px; +} + +.guide-toc-inner h2 { + color: #14223a; + font-size: 15px; + margin: 0 0 12px; +} + +.guide-toc-inner ol { + counter-reset: none; + display: flex; + flex-direction: column; + gap: 2px; + list-style: none; + margin: 0; + padding: 0; +} + +.guide-toc-inner li button { + align-items: center; + background: transparent; + border: 0; + border-radius: 6px; + color: #46586c; + cursor: pointer; + display: flex; + font-size: 13px; + font-weight: 700; + gap: 10px; + padding: 7px 8px; + text-align: left; + width: 100%; +} + +.guide-toc-inner li button span { + align-items: center; + background: #eef3f8; + border-radius: 6px; + color: #0b9f5c; + display: grid; + flex-shrink: 0; + font-size: 11px; + font-weight: 900; + height: 22px; + place-items: center; + width: 22px; +} + +.guide-toc-inner li button:hover { + background: #f2f7fb; + color: #14223a; +} + +/* Blok główny */ +.guide-body { + display: flex; + flex-direction: column; + gap: 20px; + min-width: 0; +} + +.guide-block-head h2 { + color: #14223a; + font-size: 22px; + margin: 0; +} + +.guide-block-head p { + color: #607085; + font-size: 14px; + font-weight: 650; + margin: 6px 0 0; +} + +/* Proces 12 kroków */ +.guide-process { + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + padding: 22px; +} + +.guide-process-grid { + display: grid; + gap: 12px; + grid-template-columns: repeat(6, minmax(0, 1fr)); + margin-top: 18px; +} + +.guide-process-card { + background: #f8fafc; + border: 1px solid #e6edf3; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 6px; + padding: 14px 12px; + position: relative; +} + +.guide-process-num { + align-items: center; + background: #0b9f5c; + border-radius: 6px; + color: #ffffff; + display: grid; + font-size: 12px; + font-weight: 900; + height: 24px; + place-items: center; + width: 24px; +} + +.guide-process-icon { + color: #13a360; +} + +.guide-process-icon svg { + height: 22px; + width: 22px; +} + +.guide-process-card strong { + color: #14223a; + font-size: 13px; + font-weight: 900; + line-height: 1.25; +} + +.guide-process-card small { + color: #64748b; + font-size: 11px; + font-weight: 650; + line-height: 1.35; +} + +/* Rozdziały */ +.guide-chapter { + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + padding: 26px 28px; + position: relative; + scroll-margin-top: 20px; +} + +.guide-chapter-index { + color: #d7e6dc; + font-size: 40px; + font-weight: 950; + letter-spacing: -1px; + line-height: 1; +} + +.guide-chapter h2 { + color: #14223a; + font-size: 24px; + margin: 8px 0 14px; +} + +.guide-chapter p { + color: #3f4d5e; + font-size: 15px; + font-weight: 550; + line-height: 1.62; + margin: 0 0 14px; +} + +.guide-chapter p:last-child { + margin-bottom: 0; +} + +.guide-list { + color: #3f4d5e; + display: flex; + flex-direction: column; + gap: 9px; + list-style: none; + margin: 4px 0 14px; + padding: 0; +} + +.guide-list li { + font-size: 15px; + font-weight: 550; + line-height: 1.5; + padding-left: 22px; + position: relative; +} + +.guide-list li::before { + background: #0b9f5c; + border-radius: 50%; + content: ""; + height: 7px; + left: 4px; + position: absolute; + top: 9px; + width: 7px; +} + +.guide-list li strong { + color: #14223a; +} + +/* Callouty */ +.guide-callout { + border-radius: 8px; + display: grid; + gap: 12px; + grid-template-columns: 24px minmax(0, 1fr); + margin-top: 6px; + padding: 16px 18px; +} + +.guide-callout svg { + height: 22px; + margin-top: 2px; + width: 22px; +} + +.guide-callout strong { + display: block; + font-size: 14px; + font-weight: 900; + margin-bottom: 4px; +} + +.guide-callout p { + font-size: 14px !important; + margin: 0 !important; +} + +.guide-callout-tip { + background: #edf8f1; + border: 1px solid #c6e8d4; +} + +.guide-callout-tip svg, +.guide-callout-tip strong { + color: #0b7a47; +} + +.guide-callout-warn { + background: #fef6ec; + border: 1px solid #f6dcb6; +} + +.guide-callout-warn svg, +.guide-callout-warn strong { + color: #b9791b; +} + +.guide-callout-info { + background: #eef4fd; + border: 1px solid #cfe0f7; +} + +.guide-callout-info svg, +.guide-callout-info strong { + color: #2c62c6; +} + +.guide-callout p, +.guide-callout-tip p, +.guide-callout-warn p, +.guide-callout-info p { + color: #3f4d5e; +} + +/* Tabela kosztów */ +.guide-table-wrap { + border: 1px solid #e2e9f0; + border-radius: 8px; + margin: 4px 0 16px; + overflow-x: auto; +} + +.guide-table { + border-collapse: collapse; + min-width: 560px; + width: 100%; +} + +.guide-table th { + background: #f4f8fb; + border-bottom: 1px solid #e2e9f0; + color: #52627a; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.03em; + padding: 11px 14px; + text-align: left; + text-transform: uppercase; +} + +.guide-table td { + border-bottom: 1px solid #eef2f6; + color: #3f4d5e; + font-size: 13px; + font-weight: 600; + padding: 12px 14px; + vertical-align: top; +} + +.guide-table tr:last-child td { + border-bottom: 0; +} + +.guide-table td strong { + color: #14223a; +} + +/* Dwie kolumny (za/przeciw, rynki) */ +.guide-two-col { + display: grid; + gap: 14px; + grid-template-columns: 1fr 1fr; + margin-top: 4px; +} + +.guide-pro, +.guide-con, +.guide-market { + border: 1px solid #e2e9f0; + border-radius: 8px; + padding: 16px 18px; +} + +.guide-pro { + background: #edf8f1; + border-color: #c6e8d4; +} + +.guide-con { + background: #fbfdff; +} + +.guide-market { + background: #f8fafc; +} + +.guide-pro h4, +.guide-con h4, +.guide-market h4 { + align-items: center; + color: #14223a; + display: flex; + font-size: 15px; + gap: 8px; + margin: 0 0 12px; +} + +.guide-pro h4 svg, +.guide-market h4 svg { + color: #0b9f5c; + height: 17px; + width: 17px; +} + +.guide-con h4 svg { + color: #2c62c6; + height: 17px; + width: 17px; +} + +.guide-pro ul, +.guide-con ul, +.guide-market ul { + color: #3f4d5e; + display: flex; + flex-direction: column; + gap: 8px; + list-style: none; + margin: 0; + padding: 0; +} + +.guide-pro li, +.guide-con li, +.guide-market li { + font-size: 13px; + font-weight: 600; + line-height: 1.45; + padding-left: 18px; + position: relative; +} + +.guide-pro li::before, +.guide-con li::before, +.guide-market li::before { + color: #0b9f5c; + content: "›"; + font-weight: 900; + left: 3px; + position: absolute; + top: 0; +} + +/* Checklista */ +.guide-checklist { + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + padding: 24px 26px; + scroll-margin-top: 20px; +} + +.guide-checklist-grid { + display: grid; + gap: 10px; + grid-template-columns: 1fr 1fr; + margin: 16px 0 18px; +} + +.guide-checklist-item { + align-items: flex-start; + background: #f8fafc; + border: 1px solid #e6edf3; + border-radius: 8px; + color: #33465c; + cursor: pointer; + display: flex; + font-size: 13px; + font-weight: 650; + gap: 10px; + line-height: 1.4; + padding: 12px 14px; +} + +.guide-checklist-item input { + display: none; +} + +.guide-check-box { + align-items: center; + background: #ffffff; + border: 1.5px solid #cdd7e1; + border-radius: 5px; + color: transparent; + display: grid; + flex-shrink: 0; + height: 20px; + place-items: center; + width: 20px; +} + +.guide-check-box svg { + height: 13px; + width: 13px; +} + +.guide-checklist-item input:checked ~ .guide-check-box { + background: #0b9f5c; + border-color: #0b9f5c; + color: #ffffff; +} + +.guide-checklist-item input:checked ~ span:last-child { + color: #8a97a6; + text-decoration: line-through; +} + +.guide-download-btn, +.guide-cta button { + align-items: center; + background: #0b9f5c; + border: 0; + border-radius: 8px; + color: #ffffff; + cursor: pointer; + display: inline-flex; + font-size: 14px; + font-weight: 900; + gap: 8px; + padding: 12px 20px; +} + +.guide-download-btn svg { + height: 17px; + width: 17px; +} + +.guide-download-btn:hover, +.guide-cta button:hover { + background: #0a8b50; +} + +/* Najczęstsze błędy */ +.guide-mistakes { + display: grid; + gap: 12px; + grid-template-columns: 1fr 1fr; + margin-top: 4px; +} + +.guide-mistake { + background: #fef6ec; + border: 1px solid #f6dcb6; + border-radius: 8px; + display: grid; + gap: 12px; + grid-template-columns: 34px minmax(0, 1fr); + padding: 14px 16px; +} + +.guide-mistake-icon { + align-items: center; + background: #fbe4c4; + border-radius: 8px; + color: #b9791b; + display: grid; + height: 34px; + place-items: center; + width: 34px; +} + +.guide-mistake-icon svg { + height: 18px; + width: 18px; +} + +.guide-mistake strong { + color: #14223a; + display: block; + font-size: 14px; + font-weight: 900; + margin-bottom: 4px; +} + +.guide-mistake p { + color: #4a5766 !important; + font-size: 13px !important; + font-weight: 600 !important; + line-height: 1.45 !important; + margin: 0 !important; +} + +/* FAQ */ +.guide-faq { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 4px; +} + +.guide-faq-item { + background: #f8fafc; + border: 1px solid #e6edf3; + border-radius: 8px; + padding: 0 16px; +} + +.guide-faq-item summary { + align-items: center; + color: #14223a; + cursor: pointer; + display: flex; + font-size: 15px; + font-weight: 850; + gap: 12px; + justify-content: space-between; + list-style: none; + padding: 15px 0; +} + +.guide-faq-item summary::-webkit-details-marker { + display: none; +} + +.guide-faq-item summary svg { + color: #0b9f5c; + flex-shrink: 0; + height: 18px; + transition: transform 0.2s ease; + width: 18px; +} + +.guide-faq-item[open] summary svg { + transform: rotate(180deg); +} + +.guide-faq-item p { + color: #4a5766 !important; + font-size: 14px !important; + font-weight: 550 !important; + line-height: 1.6 !important; + margin: 0 !important; + padding: 0 0 16px !important; +} + +/* Podsumowanie + CTA */ +.guide-summary { + background: #f5faf7; + border-color: #cfe9da; +} + +.guide-summary-note { + align-items: flex-start; + background: #ffffff; + border: 1px solid #e2e9f0; + border-radius: 8px; + display: grid; + gap: 10px; + grid-template-columns: 20px minmax(0, 1fr); + margin-top: 8px; + padding: 14px 16px; +} + +.guide-summary-note svg { + color: #8793a3; + height: 18px; + width: 18px; +} + +.guide-summary-note p { + color: #64748b !important; + font-size: 13px !important; + font-weight: 600 !important; + line-height: 1.5 !important; + margin: 0 !important; +} + +.guide-cta { + align-items: center; + background: linear-gradient(120deg, #0b9f5c 0%, #0c7f4c 100%); + border-radius: 10px; + color: #ffffff; + display: flex; + flex-wrap: wrap; + gap: 18px; + justify-content: space-between; + padding: 26px 30px; +} + +.guide-cta h2 { + color: #ffffff; + font-size: 22px; + margin: 0; +} + +.guide-cta p { + color: rgba(255, 255, 255, 0.9); + font-size: 14px; + font-weight: 650; + margin: 6px 0 0; +} + +.guide-cta button { + background: #ffffff; + color: #0b7a47; +} + +.guide-cta button:hover { + background: #f0f5f2; +} + +.guide-cta button svg { + height: 16px; + width: 16px; +} + +/* Prawy sidebar */ +.guide-aside { + display: flex; + flex-direction: column; + gap: 16px; + position: sticky; + top: 20px; +} + +.guide-aside-card { + background: #ffffff; + border: 1px solid #dce4ec; + border-radius: 8px; + padding: 18px; +} + +.guide-aside-card h3 { + align-items: center; + color: #14223a; + display: flex; + font-size: 15px; + gap: 8px; + margin: 0 0 14px; +} + +.guide-aside-card h3 svg { + color: #0b9f5c; + height: 17px; + width: 17px; +} + +.guide-aside-list, +.guide-aside-downloads { + display: flex; + flex-direction: column; + gap: 8px; +} + +.guide-aside-list button, +.guide-aside-downloads button { + align-items: center; + background: #f8fafc; + border: 1px solid #e6edf3; + border-radius: 8px; + color: #14223a; + cursor: pointer; + display: flex; + gap: 10px; + padding: 11px 12px; + text-align: left; + width: 100%; +} + +.guide-aside-list button:hover, +.guide-aside-downloads button:hover { + background: #eef4f9; + border-color: #d3e0ea; +} + +.guide-aside-list button > span, +.guide-aside-downloads button > span { + display: flex; + flex-direction: column; + flex: 1; + gap: 2px; + min-width: 0; +} + +.guide-aside-list strong, +.guide-aside-downloads strong { + font-size: 13px; + font-weight: 850; +} + +.guide-aside-list small, +.guide-aside-downloads small { + color: #64748b; + font-size: 11px; + font-weight: 650; +} + +.guide-aside-list button > svg { + color: #9aa5b4; + flex-shrink: 0; + height: 16px; + transform: rotate(-90deg); + width: 16px; +} + +.guide-aside-downloads button > svg:first-child { + color: #0b9f5c; + flex-shrink: 0; + height: 20px; + width: 20px; +} + +.guide-aside-downloads button > svg:last-child { + color: #9aa5b4; + flex-shrink: 0; + height: 16px; + width: 16px; +} + +.guide-aside-mistakes ul { + display: flex; + flex-direction: column; + gap: 9px; + list-style: none; + margin: 0; + padding: 0; +} + +.guide-aside-mistakes li { + align-items: center; + color: #46586c; + display: flex; + font-size: 13px; + font-weight: 700; + gap: 9px; + line-height: 1.35; +} + +.guide-aside-mistakes li svg { + color: #d99a3a; + flex-shrink: 0; + height: 15px; + width: 15px; +} + +@media (max-width: 1200px) { + .guide-article-layout { + grid-template-columns: minmax(0, 1fr) 300px; + } + + .guide-toc { + display: none; + } + + .guide-process-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media (max-width: 900px) { + .guide-hero-inner { + padding: 24px 20px 34px; + } + + .guide-article-layout { + grid-template-columns: minmax(0, 1fr); + padding: 0 20px; + } + + .guide-aside { + position: static; + } + + .guide-process-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .guide-two-col, + .guide-checklist-grid, + .guide-mistakes { + grid-template-columns: 1fr; + } +} + +@media (max-width: 560px) { + .guide-chapter { + padding: 20px 18px; + } + + .guide-process-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .guide-cta { + flex-direction: column; + align-items: flex-start; + } +}