fix: linki nawigacyjne działają z podstron /privacy i /platforma

Kotwice #offerings/#process/#contact istnieją tylko na stronie głównej, więc
z podstron prowadziły w pustkę. Zmienione na ścieżki bezwzględne (/#offerings,
/#process, /#contact) w Header.tsx i Footer.tsx.

Sama zmiana href nie wystarczyła: sekcje renderuje React, więc przy nawigacji
z podstrony przeglądarka rozwiązuje kotwicę zanim element zaistnieje i zostaje
na górze strony (zweryfikowane w Chrome — scrollY=0 przy sekcji na 1453px).
App.tsx ponawia więc przewinięcie po zamontowaniu sekcji. Kliknięcia w obrębie
strony głównej tego nie dotyczą — to nawigacja w tym samym dokumencie, którą
przeglądarka obsługuje natywnie i płynnie, bez przeładowania.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
oskar 2026-07-31 14:56:58 +02:00
parent 9bb8795f73
commit f3fb0a244d
3 changed files with 26 additions and 8 deletions

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import About from './components/About';
@ -14,6 +14,22 @@ import PlatformPage from './components/PlatformPage';
function App() {
const path = window.location.pathname.replace(/\/$/, '') || '/';
// The landing sections are client-rendered, so when a /#section URL arrives
// with the initial request — following "Oferta"/"Kontakt" from /privacy or
// /platforma — the browser resolves the fragment before the target exists and
// leaves the page at the top. Re-apply the scroll once the sections are
// mounted. In-page clicks never reach this: they are same-document fragment
// navigations that the browser handles natively (smoothly, via .scroll-smooth)
// without remounting App.
useEffect(() => {
if (path !== '/') return;
const id = window.location.hash.slice(1);
if (!id) return;
// Jump rather than smooth-scroll: this only runs on a fresh load, where
// animating the full page height would just be a slow detour.
document.getElementById(id)?.scrollIntoView({ behavior: 'auto' });
}, [path]);
if (path === '/privacy') {
return <PrivacyPolicyPage />;
}

View file

@ -27,9 +27,9 @@ const Footer = () => {
<div>
<h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Nawigacja</h4>
<ul className="space-y-4">
<li><a href="#offerings" className="text-muted hover:text-foreground transition-colors">Oferta</a></li>
<li><a href="/#offerings" className="text-muted hover:text-foreground transition-colors">Oferta</a></li>
<li><a href="/platforma" className="text-muted hover:text-foreground transition-colors">Platforma</a></li>
<li><a href="#contact" className="text-muted hover:text-foreground transition-colors">Kontakt</a></li>
<li><a href="/#contact" className="text-muted hover:text-foreground transition-colors">Kontakt</a></li>
</ul>
</div>

View file

@ -15,10 +15,12 @@ const Header = () => {
}, []);
const navLinks = [
{ name: 'Oferta', href: '#offerings' },
// Root-relative so the links also work from the standalone pages
// (/privacy, /platforma), where these sections do not exist.
{ name: 'Oferta', href: '/#offerings' },
{ name: 'Platforma', href: '/platforma' },
{ name: 'Proces', href: '#process' },
{ name: 'Kontakt', href: '#contact' },
{ name: 'Proces', href: '/#process' },
{ name: 'Kontakt', href: '/#contact' },
];
return (
@ -43,7 +45,7 @@ const Header = () => {
{link.name}
</a>
))}
<a href="#contact" className="btn-primary text-sm px-5 py-2">
<a href="/#contact" className="btn-primary text-sm px-5 py-2">
Porozmawiajmy
</a>
</nav>
@ -78,7 +80,7 @@ const Header = () => {
</a>
))}
<a
href="#contact"
href="/#contact"
className="btn-primary text-center"
onClick={() => setIsMobileMenuOpen(false)}
>