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>
This commit is contained in:
oskar
parent
e0557a7d76
commit
8c54b6004c
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
240
src/components/PlatformPage.tsx
Normal file
240
src/components/PlatformPage.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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' }
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue