feat: dodaj podstronę /platforma (nadzór nad systemami agentowymi)

Nowa podstrona produktowa zbudowana wg wzorca PrivacyPolicyPage: własny
komponent, własna ścieżka w App.tsx, header z linkiem powrotu, wspólna stopka.
Bez i18n — treść po polsku, spójnie z resztą serwisu poza contact.*/privacy.*.

Sekcje "Dla domu" / "Dla firm" jako dwie karty obok siebie (dwie ścieżki,
jeden rdzeń). CTA na dole prowadzi do /#contact.

Podlinkowania:
- karta oferty "Multiagent Systems & Infrastructure" dostaje link
  "Zobacz jak to działa" → /platforma (opcjonalne pole `link` w offerings)
- nawigacja "Platforma" w Header.tsx i Footer.tsx przepięta z #process
  na /platforma

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/App.tsx

@@ -9,6 +9,7 @@ import Audience from './components/Audience';
 import CTASection from './components/CTASection';
 import Footer from './components/Footer';
 import PrivacyPolicyPage from './components/PrivacyPolicyPage';
+import PlatformPage from './components/PlatformPage';
 
 function App() {
   const path = window.location.pathname.replace(/\/$/, '') || '/';
@@ -17,6 +18,10 @@ function App() {
     return <PrivacyPolicyPage />;
   }
 
+  if (path === '/platforma') {
+    return <PlatformPage />;
+  }
+
   return (
     <div className="min-h-screen bg-background selection:bg-primary selection:text-background">
       <Header />

src/components/Footer.tsx

@@ -28,7 +28,7 @@ const Footer = () => {
             <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="#process" className="text-muted hover:text-foreground transition-colors">Platforma</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>
             </ul>
           </div>

src/components/Header.tsx

@@ -16,7 +16,7 @@ const Header = () => {
 
   const navLinks = [
     { name: 'Oferta', href: '#offerings' },
-    { name: 'Platforma', href: '#process' },
+    { name: 'Platforma', href: '/platforma' },
     { name: 'Proces', href: '#process' },
     { name: 'Kontakt', href: '#contact' },
   ];

src/components/Offerings.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { offerings } from '../data/content';
-import { ChevronRight } from 'lucide-react';
+import { ArrowRight, ChevronRight } from 'lucide-react';
 
 const OfferingCard = ({ offering, index }: { offering: any, index: number }) => {
   const Icon = offering.icon;
@@ -29,6 +29,15 @@ const OfferingCard = ({ offering, index }: { offering: any, index: number }) =>
           </li>
         ))}
       </ul>
+      {offering.link && (
+        <a
+          href={offering.link.href}
+          className="mt-8 inline-flex items-center text-sm font-semibold text-primary hover:underline"
+        >
+          {offering.link.label}
+          <ArrowRight className="ml-2" size={16} />
+        </a>
+      )}
     </motion.div>
   );
 };

src/components/PlatformPage.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import { ArrowRight, Building2, CheckCircle2, ChevronRight, Home } from 'lucide-react';
+import Footer from './Footer';
+
+// Standalone product page at /platforma. Deliberately not localized — the site
+// only translates contact.* and privacy.*, everything else is Polish-only.
+const PlatformPage = () => {
+  return (
+    <div className="min-h-screen bg-background selection:bg-primary selection:text-background">
+      <header className="bg-background/80 backdrop-blur-lg border-b border-white/5">
+        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
+          <a href="/" className="text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity">
+            human<span className="text-primary">AI</span>
+          </a>
+          <a href="/" className="text-sm text-muted hover:text-foreground transition-colors">
+            ← Wróć na stronę główną
+          </a>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-6 py-16 max-w-3xl">
+        <h1 className="text-4xl md:text-5xl font-bold mb-3">Nadzór nad systemami agentowymi</h1>
+        <p className="text-muted text-sm italic mb-16">
+          (nazwa robocza — do potwierdzenia przed publikacją)
+        </p>
+
+        <div className="space-y-16">
+          {/* ── Kto pilnuje agentów ───────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">
+              Kto pilnuje agentów, którzy pilnują wszystkiego innego?
+            </h2>
+            <p className="text-foreground/80 leading-relaxed mb-4">
+              {'Automatyzacje i agenci AI potrafią pracować bez człowieka — porządkować dokumenty, sterować urządzeniami, reagować na zdarzenia. Ale zostawione bez nadzoru, prędzej czy później zrobią coś, czego nikt nie chciał. Zbudowaliśmy system, który '}
+              <strong className="text-foreground font-semibold">
+                obserwuje inne systemy — w tym inne systemy agentowe
+              </strong>
+              {' — wykrywa, że coś nie działa, diagnozuje przyczynę i naprawia problem sam. A tam, gdzie decyzja jest nieodwracalna, czeka na człowieka.'}
+            </p>
+            <p className="text-foreground/80 leading-relaxed">
+              {'To nie koncept. Ten sam rdzeń od miesięcy prowadzi naszą własną, rozproszoną infrastrukturę — i przeszedł przez realne awarie, z których każda coś go nauczyła.'}
+            </p>
+          </section>
+
+          {/* ── Problem, który znika ──────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">Problem, który znika</h2>
+            <ul className="space-y-4">
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Autonomia bez ram to ryzyko.</strong>
+                  {' Coś, co może samo otworzyć bramę albo zmienić konfigurację usługi, potrzebuje jasnej granicy: co wolno zrobić samodzielnie, co wymaga zgody człowieka.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Automatyka to nie inteligencja.</strong>
+                  {' Wiele domów i firm ma już systemy, które '}
+                  <em>wykonują</em>
+                  {' polecenia — światła, rolety, bramy, obieg dokumentów. Problem w tym, że nic tego nie '}
+                  <em>rozumie</em>
+                  {': nie kojarzy faktów, nie reaguje na kontekst, nie uczy się.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Wiedza znika.</strong>
+                  {' Dlaczego coś się zepsuło miesiąc temu i co wtedy pomogło? Zwykle ta wiedza siedzi w głowie jednej osoby albo w nieprzeszukiwalnym stosie dokumentów.'}
+                </span>
+              </li>
+            </ul>
+          </section>
+
+          {/* ── Jak to działa ─────────────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">Jak to działa</h2>
+
+            <p className="text-foreground/80 leading-relaxed mb-4">
+              <strong className="text-foreground font-semibold">
+                Rdzeń nadzoru — jeden, wspólny dla wszystkiego.
+              </strong>
+              {' Lekki agent na każdej maszynie zgłasza stan usług. Centralny „mózg" buduje z tego pełny obraz sytuacji, wykrywa odchylenia od tego, co powinno działać, i albo naprawia problem sam — jeśli akcja jest bezpieczna — albo pyta człowieka, jeśli nie jest.'}
+            </p>
+
+            <p className="text-foreground/80 leading-relaxed mb-10">
+              {'To „pytanie człowieka" nie jest teorią. Przykład z życia: system zauważa, że wyjechałeś na weekend, a rolety zostały otwarte. Sam ich nie zamknie — wysyła Ci wiadomość: '}
+              <em className="text-foreground">{'„Nie zamknąłeś rolet. Zamknąć teraz?"'}</em>
+              {' Odpisujesz „tak" — i dopiero wtedy system zleca to istniejącej automatyce domowej. Decyzja zawsze należy do Ciebie; wykonanie bierze na siebie system.'}
+            </p>
+
+            <p className="text-foreground/80 leading-relaxed mb-8">
+              <strong className="text-foreground font-semibold">
+                System roboczy — budowany pod Ciebie.
+              </strong>
+              {' To, co ten nadzór pilnuje, dopasowujemy do konkretnej potrzeby.'}
+            </p>
+
+            {/* Dwie ścieżki, jeden rdzeń — karty obok siebie */}
+            <div className="grid md:grid-cols-2 gap-6">
+              <div className="glass-card p-8 border-primary/10 hover:border-primary/30 transition-colors">
+                <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-6">
+                  <Home size={24} />
+                </div>
+                <h3 className="text-xl font-bold mb-4">Dla domu</h3>
+                <p className="text-foreground/80 leading-relaxed">
+                  {'Masz już zautomatyzowany dom — światła, rolety, bramy, klimatyzację — ale to automatyka, nie inteligencja: robi dokładnie to, co jej każesz, i nic więcej. Dokładamy warstwę, która '}
+                  <strong className="text-foreground font-semibold">rozumie kontekst</strong>
+                  {': rozpoznaje Twój samochód po tablicy rejestracyjnej i otwiera bramę, zanim dojedziesz do niej. Widzi na kamerach, że nikogo nie ma w domu, i sama wygasza światła na noc. Zauważa, że wyjechałeś, a coś zostało otwarte — i pyta, zanim cokolwiek zrobi.'}
+                </p>
+              </div>
+
+              <div className="glass-card p-8 border-secondary/10 hover:border-secondary/30 transition-colors">
+                <div className="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary mb-6">
+                  <Building2 size={24} />
+                </div>
+                <h3 className="text-xl font-bold mb-4">Dla firm</h3>
+                <p className="text-foreground/80 leading-relaxed">
+                  {'Masz bałagan w dokumentach, obieg papierowy, który nikogo nie satysfakcjonuje, i dane rozsiane po cudzych chmurach, nad którymi nie masz pełnej kontroli. Budujemy Ci paperless na Twoich własnych serwerach — z własną domeną i autoryzacją, bez uzależnienia od zewnętrznych dostawców chmury. Indeksujemy dokumenty, zdjęcia i korespondencję tak, żeby dało się to przeszukać po sensie, nie po słowach kluczowych. Interfejs — webowy panel, a jeśli to naprawdę pasuje do Twojej firmy, także chatbot — dobieramy do tego, czego faktycznie potrzebujesz, a nie do tego, co akurat modne.'}
+                </p>
+              </div>
+            </div>
+
+            <p className="text-foreground/80 leading-relaxed mt-8">
+              {'Obie ścieżki łączy to samo: cała konfiguracja tego, co ma działać, jest zapisana jako kod w repozytorium — każda zmiana ma historię i da się ją cofnąć — i obie działają pod tym samym nadzorem, który pilnuje, żeby nic nie zawiodło po cichu.'}
+            </p>
+          </section>
+
+          {/* ── Pod maską ─────────────────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">Pod maską — dla ciekawych</h2>
+            <ul className="space-y-4">
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  {'Baza wiedzy nie kończy jako martwy indeks. Nad wyszukiwaniem semantycznym powstaje '}
+                  <strong className="text-foreground font-semibold">
+                    czytelna, kompilowana wiki utrzymywana przez model językowy
+                  </strong>
+                  {' — pliki tekstowe z linkami między pojęciami, które agent czyta i aktualizuje tak jak człowiek utrzymuje kod. Budujemy to na otwartym standardzie (Google OKF), nie na własnym, zamkniętym formacie — żeby wiedza, którą zbudujemy, zawsze zostawała czytelna i przenośna.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  {'Do zapytań najpierw sięga tańszy model — droższy dopiero wtedy, gdy sprawa naprawdę tego wymaga. W praktyce: streszczenie całego korpusu dokumentów potrafiło kosztować grosze zamiast dni obliczeń.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  {'Nie wszystko musi być online 24 godziny na dobę. Kiedy główna maszyna śpi, zapytania automatycznie przejmuje zapasowy sprzęt — bez przerwy zauważalnej dla użytkownika.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <ChevronRight className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  {'System sam odróżnia „usługa nie działa" od „usługa śpi zgodnie z planem" — co wcześniej było częstym źródłem fałszywych alarmów.'}
+                </span>
+              </li>
+            </ul>
+          </section>
+
+          {/* ── Dlaczego to ───────────────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">
+              Dlaczego to, a nie zwykły monitoring czy zwykła automatyka
+            </h2>
+            <ul className="space-y-4">
+              <li className="flex gap-3">
+                <CheckCircle2 className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">
+                    Rozumiemy kontekst, nie tylko wykonujemy polecenia.
+                  </strong>
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle2 className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Naprawiamy, nie tylko alarmujemy.</strong>
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle2 className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Człowiek naprawdę jest w pętli</strong>
+                  {' — decyzje zawsze do Ciebie, wykonanie bierze na siebie system.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle2 className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Zero czarnej skrzynki.</strong>
+                  {' Każda decyzja zostawia ślad, który można później przejrzeć.'}
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle2 className="text-primary shrink-0 mt-1" size={18} />
+                <span className="text-foreground/80 leading-relaxed">
+                  <strong className="text-foreground font-semibold">Twoje dane zostają Twoje</strong>
+                  {' — własny serwer, własna domena, bez uzależnienia od cudzej chmury.'}
+                </span>
+              </li>
+            </ul>
+          </section>
+
+          {/* ── Gdzie jesteśmy ────────────────────────────────────────────── */}
+          <section>
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">Uczciwie o tym, gdzie jesteśmy</h2>
+            <p className="text-foreground/80 leading-relaxed mb-4">
+              {'Rdzeń nadzoru prowadzi naszą infrastrukturę na co dzień — samonaprawa działa od początku do końca, alerty trafiają na telefon, baza wiedzy odpowiada na pytania nawet gdy główny sprzęt śpi.'}
+            </p>
+            <p className="text-foreground/80 leading-relaxed">
+              {'Dedykowane wdrożenia — pod konkretny dom czy firmę — budujemy w miarę potrzeb, opierając się na tym samym, sprawdzonym rdzeniu. Wolimy powiedzieć wprost, co jeszcze dopracowujemy, niż obiecywać więcej niż działa.'}
+            </p>
+          </section>
+
+          {/* ── CTA ───────────────────────────────────────────────────────── */}
+          <section className="glass-card p-10 text-center">
+            <h2 className="text-2xl md:text-3xl font-bold mb-6">Umów rozmowę</h2>
+            <p className="text-foreground/80 leading-relaxed mb-8">
+              {'Powiedz, co chcesz zautomatyzować albo uporządkować — zobaczymy, jak to zbudować i objąć nadzorem, który sami na sobie testujemy.'}
+            </p>
+            <a href="/#contact" className="btn-primary">
+              Porozmawiajmy
+              <ArrowRight className="ml-2" size={20} />
+            </a>
+          </section>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default PlatformPage;

src/data/content.ts

@@ -41,7 +41,9 @@ export const offerings = [
     title: 'Multiagent Systems & Infrastructure',
     description: 'Tworzymy systemy wieloagentowe, które potrafią planować, wykonywać zadania, korzystać z narzędzi i współpracować z człowiekiem przy zachowaniu kontroli i audytowalności.',
     points: ['agent orchestration', 'tool registry / MCP', 'approval gates', 'pamięć, logi i obserwowalność'],
-    icon: Cpu
+    icon: Cpu,
+    // Deep-link to the dedicated product page (/platforma).
+    link: { label: 'Zobacz jak to działa', href: '/platforma' }
   }
 ];