/* SEMAI marketing site — sections. Composes the design-system primitives into a real marketing page view. Logo-forward hero + Linear/Vercel-inspired motion layer. Exports each section to window for index.html to assemble. */ const { Button, Badge, Card, Avatar, Tabs, Input, AnswerCard, CitationChip, MetricStat, VisibilityMeter, PromptBar, ProductCard } = window.SEMAIDesignSystem_fb5e7f; const LOGO_DARK = window.SEMAI_LOGO_DARK || '../../assets/semai-logo.svg'; const LOGO_LIGHT = window.SEMAI_LOGO_LIGHT || '../../assets/semai-logo-light.svg'; const SYGNET = window.SEMAI_SYGNET || '../../assets/semai-sygnet.svg'; /* ---------- tiny inline icons (Lucide-style, 1.75 stroke) ---------- */ const I = (p) => ({p.children}); const Radar = (p)=>(); const Msg = (p)=>(); const Doc = (p)=>(); const TargetIco = (p)=>(); const Chart = (p)=>(); const ArrowR = (p)=>(); const Logo = ({light, h=28}) => ( SEMAI ); const WRAP = { maxWidth: 1440, margin: '0 auto', padding: '0 clamp(16px, 4vw, 64px)' }; /* ---- Minimal hash routing so /performance works in a standalone file ---- */ function go(route, e) { if (e) e.preventDefault(); if (window.location.hash !== route) window.location.hash = route; window.scrollTo(0, 0); } function useRoute() { const read = () => (window.location.hash || '#/').replace(/^#/, ''); const [route, setRoute] = React.useState(read); React.useEffect(() => { const on = () => { setRoute(read()); }; window.addEventListener('hashchange', on); return () => window.removeEventListener('hashchange', on); }, []); return route; } /* Mount-triggered visibility — drives staggered entrance via TRANSITIONS (transitions don't reset on React re-render the way CSS animations do). */ function useMounted(delay = 0) { const [shown, setShown] = React.useState(() => typeof document !== 'undefined' && document.visibilityState === 'hidden'); React.useEffect(() => { if (shown) return; const t = setTimeout(() => setShown(true), delay + 30); return () => clearTimeout(t); }, [shown, delay]); return shown; } function enter(shown, ms = 0, y = 16) { return { opacity: shown ? 1 : 0, transform: shown ? 'none' : `translateY(${y}px)`, transition: `opacity .8s var(--ease-entrance) ${ms}ms, transform .8s var(--ease-entrance) ${ms}ms`, willChange: 'opacity, transform', }; } /* Live scroll position (px). rAF-throttled. */ function useScrollY() { const [y, setY] = React.useState(() => (typeof window !== 'undefined' ? window.scrollY : 0)); React.useEffect(() => { let raf = 0; const on = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; setY(window.scrollY); }); }; window.addEventListener('scroll', on, { passive: true }); return () => { window.removeEventListener('scroll', on); if (raf) cancelAnimationFrame(raf); }; }, []); return y; } /* Responsive helper — resolves a value from an ascending [[maxWidth, value], ...] list against the live window width, re-evaluating on resize. Used for values CSS media queries can't reach (grid-template-columns switches, JS-computed decorative graphic sizes). Desktop (above the largest maxWidth) always returns `fallback`, so nothing changes above ~1024px unless listed. */ function useBreakpointValue(map, fallback) { const read = () => { const w = typeof window !== 'undefined' ? window.innerWidth : 1440; for (const [max, val] of map) if (w <= max) return val; return fallback; }; const [val, setVal] = React.useState(read); React.useEffect(() => { const on = () => setVal(read()); window.addEventListener('resize', on, { passive: true }); return () => window.removeEventListener('resize', on); }, []); return val; } /* Self-playing answer demo — types the prompt, "thinks", then streams the answer word-by-word and reveals citations, on a loop. Non-interactive: it's part of the hero animation under the sygnet. */ function AnswerDemo({ compact = false, stageHeight = 258 } = {}) { const PROMPT = 'Jaka firma od klimatyzacji w Krakowie?'; const ANSWER = 'Warto wybrać wykonawcę z dobrymi opiniami, szybką wyceną i gwarancją montażu. Wśród rekomendowanych firm pojawia się m.in.'; const CITES = [{domain:'google.com'},{domain:'twojamarka.pl',brand:true},{domain:'fixly.pl'},{domain:'oferteo.pl'}]; const [p, setP] = React.useState(''); const [a, setA] = React.useState(''); const [hl, setHl] = React.useState(false); const [nc, setNc] = React.useState(0); const [org, setOrg] = React.useState('thinking'); // thinking | answering | done const [scene, setScene] = React.useState('organic'); // organic | ad const [adStep, setAdStep] = React.useState(0); // Mobile (compact) crossfade: only one scene is ever mounted (so the card // auto-sizes to content), but we still want the same fade transition feel // as desktop — fade the old scene out, swap content, then fade the new // scene in — instead of an abrupt cut. const [displayScene, setDisplayScene] = React.useState('organic'); const [sceneVisible, setSceneVisible] = React.useState(true); React.useEffect(() => { if (!compact || scene === displayScene) return; setSceneVisible(false); const t = setTimeout(() => { setDisplayScene(scene); requestAnimationFrame(() => requestAnimationFrame(() => setSceneVisible(true))); }, 220); return () => clearTimeout(t); }, [scene, compact]); React.useEffect(() => { let cancelled = false; const timers = new Set(); const wait = (ms) => new Promise((r) => { const t = setTimeout(() => { timers.delete(t); r(); }, ms); timers.add(t); }); (async function loop() { while (!cancelled) { // reset to a clean organic card, then show the prompt each cycle setScene('organic'); setA(''); setHl(false); setNc(0); setOrg('idle'); setP(''); await wait(650); // Prompt bar always types character-by-character (desktop + mobile) — // this is the short "search" line, never the long answer body, so // it stays quick and never leaves the card in a half-finished state. for (let i = 1; i <= PROMPT.length; i++) { if (cancelled) return; setP(PROMPT.slice(0, i)); await wait(42); } await wait(320); /* ---- Scene 1: organic answer (LLM Visibility) ---- */ setScene('organic'); setA(''); setHl(false); setNc(0); setOrg('thinking'); await wait(950); setOrg('answering'); for (let i = 1; i <= ANSWER.length; i++) { if (cancelled) return; setA(ANSWER.slice(0, i)); await wait(16); } await wait(200); setHl(true); for (let i = 1; i <= CITES.length; i++) { if (cancelled) return; setNc(i); await wait(240); } setOrg('done'); await wait(3000); /* ---- Scene 2: same brand, now positioned via LLM Ads ---- */ setScene('ad'); setAdStep(0); await wait(560); setAdStep(1); await wait(520); setAdStep(2); await wait(620); setAdStep(3); await wait(4200); } })(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, []); const caret = ( ); const rise = (on, d = 0) => ({ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(10px)', transition: `opacity .5s var(--ease-out) ${d}ms, transform .5s var(--ease-out) ${d}ms` }); return (
{/* animated prompt bar (non-interactive) */}
{p || 'Zapytaj AI…'}{p && p.length < PROMPT.length && caret} AI Search
{/* Answer stage. Desktop/tablet: fixed-height crossfade so the sygnet layer above never moves. Mobile (compact): only the active scene is mounted, in normal flow, so the box always sizes to its content — no guessed height, no overflow/overlap. */} {compact ? (
{displayScene === 'organic' ? ( {org === 'thinking' ? {[0, 1, 2].map((i) => ())} : {a}{org === 'answering' && !hl && caret}} ) : (
ChatGPT
= 1) }}> LLM Ad · Sponsorowane
= 1, 60) }}>Rekomendowane w odpowiedzi:
= 2), transform: adStep >= 2 ? 'none' : 'translateY(10px) scale(0.98)' }}> MK
Marka klienta
Montaż klimatyzacji — opinie, termin, gwarancja
= 3) }}> Sprawdź
= 3, 120) }}> Pozycja reklamowa w odpowiedzi AI · LLM Ads
)}
) : (
{/* Scene 1 — organic answer (LLM Visibility) */}
{org === 'thinking' ? {[0, 1, 2].map((i) => ())} : {a}{org === 'answering' && !hl && caret}}
{/* Scene 2 — same brand, now positioned via LLM Ads */}
ChatGPT
= 1) }}> LLM Ad · Sponsorowane
= 1, 60) }}>Rekomendowane w odpowiedzi: {/* sponsored brand card */}
= 2), transform: adStep >= 2 ? 'none' : 'translateY(10px) scale(0.98)' }}> MK
Marka klienta
Montaż klimatyzacji — opinie, termin, gwarancja
= 3) }}> Sprawdź
= 3, 120) }}> Pozycja reklamowa w odpowiedzi AI · LLM Ads
)}
); } /* ===================== MOTION PRIMITIVES ===================== */ /* Scroll-reveal wrapper — fades + lifts children when they enter the viewport */ function Reveal({ children, delay = 0, y = 26, as = 'div', style, ...rest }) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(() => typeof document !== 'undefined' && document.visibilityState === 'hidden'); React.useEffect(() => { if (seen) return; const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.14, rootMargin: '0px 0px -8% 0px' }); io.observe(el); // Safety: never leave content permanently hidden (print / offscreen / PDF) const t = setTimeout(() => setSeen(true), 1600); return () => { io.disconnect(); clearTimeout(t); }; }, [seen]); const Tag = as; return ( {children} ); } /* The big animated brand sygnet — a "listening / answering" mark */ function SygnetMark({ size = 132 }) { return (
{/* breathing glow */}
{/* radar pings */} {[0, 1.4, 2.8].map((d, i) => (
))} {/* rotating dashed ring */} {/* the sygnet glyph */}
); } /* Cinematic hero showcase for the sygnet — Vercel-style staged backdrop: conic halo sweep, counter-rotating dashed rings, radar pings, orbiting satellite, radial spotlight and a soft floor reflection. */ function SygnetShowcase({ size = 340, simple = false }) { const S = size; return (
{/* radial spotlight */}
{/* conic halo sweep */}
{/* breathing core glow */}
{/* radar pings */} {[0, 1.5, 3].map((d, i) => (
))} {/* outer dashed ring — slow */} {/* mid solid thin ring — counter-rotate */} {/* inner ring with orbiting satellite */}
{/* second satellite — larger orbit, counter-direction, offset */} {!simple &&
} {/* third satellite — tiny, fast, tight orbit */} {!simple &&
} {/* conic scanning sweep — a thin radar line */} {!simple &&
} {/* the sygnet glyph */} SEMAI {/* floor reflection */}
); } /* ============================ NAV ============================ */ function SiteNav({ active = '/' }) { const links = ['LLM Ads','LLM Visibility','AI Search','Measurement']; const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', on); return () => window.removeEventListener('scroll', on); }, []); React.useEffect(() => { setOpen(false); }, [active]); const onPerf = active === '/performance'; return (
go('#/',e)} style={{display:'inline-flex',alignItems:'center'}}>
{onPerf ? Umów konsultację : }
{/* mobile dropdown panel — plain JS toggle, no extra libraries */}
); } /* ============================ HERO ============================ */ /* ============================ SECTION 1: BRAND INTRO ============================ */ /* ============================ HERO: intro-stage + intro-sticky + intro-hold + content-layer ============================ One shared scene, matching the required DOM/CSS contract exactly: .intro-stage { position: relative } — shared coordinate space for both layers .intro-sticky { position: sticky; top:0; height:100vh; z-index:1; overflow:hidden } — Section 1, pinned .intro-hold { height: 40-60vh } — scroll room reserved for the intro animation alone .content-layer { position: relative; z-index:2; opacity:1; transform:none; opaque bg } — Section 2, natural flow Section 2 has NO JS-driven opacity/transform of its own — it only moves because it is a normal block after .intro-hold, riding the document's native scroll. Section 1's fade/scale/blur is driven ENTIRELY by content-layer's own getBoundingClientRect().top (measured via a ref forwarded into it), so as content-layer's top crosses from `vh` (fully below) to `0` (reached the top of the viewport), Section 1 fades from opaque to fully invisible in lockstep. */ function HeroFlow() { const isMobile = useBreakpointValue([[767, true]], false); const holdVh = isMobile ? 12 : 25; // intro-hold: pure intro scroll before Section 2 begins entering const contentRef = React.useRef(null); const symbolStartRef = React.useRef(null); // invisible placeholder marking the intro sygnet's slot const symbolTargetRef = React.useRef(null); // the slot the sygnet lands in, inside Section 2 const travelRef = React.useRef(null); // the single travelling sygnet element (styled imperatively) const [coverProgress, setCoverProgress] = React.useState(0); // 0 = hero-content fully below viewport · 1 = fully covers it const [landed, setLanded] = React.useState(false); const landedRef = React.useRef(false); const introSymbolSize = useBreakpointValue([[480,150],[767,190],[1024,230]],270); React.useEffect(() => { let raf = 0; const calc = () => { raf = 0; const el = contentRef.current; if (!el) return; const vh = window.innerHeight; const top = el.getBoundingClientRect().top; setCoverProgress(Math.max(0, Math.min(1, (vh - top) / vh))); const a = symbolStartRef.current, b = symbolTargetRef.current, mover = travelRef.current; if (!a || !b || !mover) return; // MOBILE (≤767px): no shared-element transition at all. The travelling // sygnet is parked/hidden; the intro sygnet simply fades in place and // Section 2's own sygnet appears later, already at its final position. if (window.matchMedia('(max-width: 767px)').matches) { mover.style.visibility = 'hidden'; if (landedRef.current !== true) { landedRef.current = true; setLanded(true); } return; } const ra = a.getBoundingClientRect(), rb = b.getBoundingClientRect(); if (!(ra.width > 0 && rb.width > 0)) return; // Travel progress is derived from the TARGET's real on-screen position, // not from a fixed cover window — so the sygnet can never be dragged // off-screen chasing a target still far below the fold (this also keeps it // correct in the single-column layout, where the target stacks low). const t0 = Math.max(0, Math.min(1, (vh - rb.top) / (vh * 0.55))); const t = t0 * t0 * (3 - 2 * t0); // smoothstep — calm, no overshoot const dx = (rb.left + rb.width / 2) - (ra.left + ra.width / 2); const dy = (rb.top + rb.height / 2) - (ra.top + ra.height / 2); const endScale = rb.width / ra.width; // Scale eases DOWN through the middle of the move, then settles on the // target's scale — the mark recedes while travelling, per spec. const scale = 1 + (endScale - 1) * t - Math.sin(Math.PI * t) * 0.12; mover.style.left = ra.left + 'px'; mover.style.top = ra.top + 'px'; mover.style.width = ra.width + 'px'; mover.style.height = ra.height + 'px'; mover.style.transform = `translate3d(${dx * t}px, ${dy * t}px, 0) scale(${scale})`; mover.style.filter = (t > 0.001 && t < 0.995) ? `blur(${Math.sin(Math.PI * t) * 3.5}px)` : 'none'; const isLanded = t0 >= 0.995; mover.style.visibility = isLanded ? 'hidden' : 'visible'; if (isLanded !== landedRef.current) { landedRef.current = isLanded; setLanded(isLanded); } }; const on = () => { if (raf) return; raf = requestAnimationFrame(calc); }; window.addEventListener('scroll', on, { passive: true }); window.addEventListener('resize', on, { passive: true }); calc(); return () => { window.removeEventListener('scroll', on); window.removeEventListener('resize', on); if (raf) cancelAnimationFrame(raf); }; }, []); return (
); } /* ---- Section 1: pure brand intro. Fixed and centered for the ENTIRE transition — the composition itself never translates/parallaxes; only opacity, a sub-3% scale, and blur respond to Section 2 covering it. Fade formula (exact, per spec): fadeProgress = clamp((coverProgress-0.2)/0.7, 0, 1) — Section 1 stays fully visible until Section 2 has covered 20% of the viewport, then fades over the remaining 70%. Sygnet and wordmark are two clearly separated elements stacked vertically with a real gap — the sygnet's animation never crosses or backlights the wordmark. */ function BrandIntro({ coverProgress, symbolStartRef, symbolSize }) { const isMobile = useBreakpointValue([[767, true]], false); const shown = useMounted(80); // Retreat: the intro only reacts once Section 2 has begun covering it (15%), // then the WHOLE composition recedes as one unit — drifting slightly down // (opposite Section 2's upward travel), scaling back, softening and fading. // Reads as "tucking under" Section 2, never as sliding out of the viewport. // MOBILE: no shared-element travel, so the intro must clear the screen sooner — // fully invisible by ~58% cover, before Section 2's text reaches mid-viewport. const retreat = isMobile ? Math.max(0, Math.min(1, (coverProgress - 0.18) / 0.4)) : Math.max(0, Math.min(1, (coverProgress - 0.15) / 0.8)); const fadeProgress = isMobile ? retreat : Math.pow(retreat, 1.3); const maxY = isMobile ? 24 : 30; // wordmark drifts 20-30px, no more const maxBlur = isMobile ? 4 : 8; const buildIn = shown ? 1 : 0; const visualStyle = { transform: `translate3d(0, ${retreat * maxY}px, 0) scale(${1 - retreat * (isMobile ? 0.03 : 0.035)})`, filter: retreat > 0.001 ? `blur(${retreat * maxBlur}px)` : 'none', opacity: 1 - fadeProgress, willChange: 'transform, opacity, filter', }; const glowOpacity = 0.85 * (1 - Math.pow(retreat, 0.55)); // glow clears well before the sygnet finishes travelling const meshOpacity = 0.55 * (1 - Math.pow(retreat, 0.45)); // decorative mesh thins out first const logoStyle = { opacity: buildIn, filter: `blur(${(1 - buildIn) * 6}px)`, transition: 'opacity 1.1s var(--ease-entrance) .5s, filter 1.1s var(--ease-entrance) .5s', }; const seq = (delayMs) => ({ opacity: buildIn ? 1 : 0, transition: `opacity .9s var(--ease-entrance) ${delayMs}ms` }); return (
{/* two clearly separated elements, stacked with a real gap — sygnet above, wordmark below, on the same axis */}
{/* Desktop: invisible slot reserving space + measured as the shared-element START (the visible sygnet is the single travelling element rendered by HeroFlow). Mobile: no shared-element transition — the sygnet renders here, in place, and simply fades with the rest of the intro. */}
{isMobile && }
{/* wordmark: its own clean space, flat dark ground, no glow/orbits behind the letters */} SEMAI
Przewiń
); } /* ---- Section 2: the complete content section — headline, copy, CTAs + AI demo, two columns on desktop. Top-aligned (not vertically centered) so its real content sits close to the top edge and appears almost immediately as Section 2 climbs into view — no large empty band before the headline. Natural document flow: opacity:1, transform:none, opaque background, no JS-driven motion of its own. A soft gradient on its top edge (::before via an inline pseudo-equivalent layer) blends the seam instead of a hard line. */ function ContentHero({ contentRef, coverProgress = 0, symbolTargetRef, symbolLanded = false }) { const heroCols = useBreakpointValue([[1024, '1fr']], 'minmax(0,1fr) minmax(420px,0.9fr)'); const sygnetSize = useBreakpointValue([[390,150],[640,190],[768,230],[1024,260]], 300); const demoOffset = useBreakpointValue([[1024,-8]], -28); const compactDemo = false; const answerStageHeight = useBreakpointValue([[767, 386]], 258); const isMobileHero = useBreakpointValue([[767, true]], false); // Section 2's own decorations only come up once the sygnet has landed, so // nothing competes with its travel. On mobile there is no travel — the // sygnet reveals in place, gated by an IntersectionObserver instead. const sygnetReveal = symbolLanded ? 1 : 0; const [inView, setInView] = React.useState(false); React.useEffect(() => { if (!isMobileHero) return; const el = symbolTargetRef && symbolTargetRef.current; if (!el) return; const io = new IntersectionObserver((es) => { es.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }); }, { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, [isMobileHero, symbolTargetRef]); return (
{/* soft top-edge blend + very soft cast shadow — marks Section 2 as a covering layer without reading as a card */}
{/* LEFT — headline + copy + CTAs */}
Nowy kanał · wejdź zanim zrobi się tłoczno

Bądź odpowiedzią, nie tylko wynikiem wyszukiwania.

Twoi klienci coraz częściej pytają AI, co wybrać. Pomagamy markom pojawiać się w tej odpowiedzi — organicznie, płatnie i mierzalnie. LLM Ads, LLM Visibility i performance w ChatGPT, AI Search i innych interfejsach.

Nie obiecujemy pozycji nr 1 w ChatGPT. Projektujemy warunki, które zwiększają szansę widoczności — i je mierzymy.

{/* RIGHT — the sygnet, showcased, with the answer it produces below */}
{/* Desktop: landing slot for the travelling sygnet — holds its space always, revealing the real element only once the shared transition completes. Mobile: no travel at all — the sygnet lives in normal document flow, sits below the CTA block (≥40px clear), and simply fades/scales up in place once it scrolls into view. */}
); } /* ============================ ECOSYSTEM (marquee) ============================ */ function Ecosystem() { const items=['ChatGPT','Gemini','Copilot','Perplexity','AI Overviews','AI Mode','Claude','Grok']; const track = [...items, ...items]; return (
Gdzie decyduje klient
{track.map((x,i)=>({x}))}
); } /* ============================ SHIFT (comparison) ============================ */ function Shift() { const shiftCols = useBreakpointValue([[768,'1fr']], '1fr 1fr'); return (
Zmiana punktu decyzji

SEO nie znika. Ale samo SEO przestaje wystarczać.
Dotychczas

Klient wyszukuje

  • Ranking w Google i feed reklamowy
  • Słowa kluczowe i pozycje
  • Kliknięcie → strona → decyzja
 Coraz częściej

Klient pyta AI

  • Cytowalność i obecność w odpowiedzi
  • Kontekst rozmowy i intencja
  • Rekomendacja AI → zawężenie → decyzja
); } /* ============================ PRODUCTS ============================ */ function Products() { const cols = useBreakpointValue([[640,'1fr'],[1024,'1fr 1fr']], 'repeat(3,1fr)'); const items = [ {icon:, eyebrow:'Produkt wejściowy', title:'LLM Visibility Audit', description:'Czy i jak marka pojawia się w odpowiedziach ChatGPT, Gemini, Copilot i Perplexity.', outcome:'Raport + priorytety · 10 dni', featured:true}, {icon:, eyebrow:'Readiness', title:'ChatGPT Ads Readiness', description:'Przygotowanie oferty, landingów, kontekstów, kreacji i pomiaru pod reklamy w ChatGPT.', outcome:'Plan gotowości · 2 tyg.'}, {icon:, eyebrow:'Content', title:'AI Search Content Plan', description:'Treści pod pytania, porównania, intencje i decyzje użytkowników w LLM-ach.', outcome:'Plan treści + mapa'}, {icon:, eyebrow:'Strategia', title:'LLM Ads Strategy', description:'Segmenty, intencje, konteksty, komunikaty, budżet i pomiar reklam w interfejsach AI.', outcome:'Strategia + budżet'}, {icon:, eyebrow:'Analityka', title:'AI Measurement Setup', description:'Ruch i konwersje z nowych źródeł AI: UTM-y, zdarzenia, dashboardy, jakość leadów.', outcome:'Dashboard + definicje'}, ]; return (
Produkty wejściowe

Konkret, nie „transformacja AI".

Każdy produkt ma mechanikę (co robimy) i miarę (jak sprawdzamy, że działa). Zacznij od audytu.
{items.map((it,i)=>())}

Nie wiesz, od czego zacząć?

15 minut. Powiemy wprost, gdzie jest realna dźwignia, a gdzie hype.
); } /* ============================ MEASUREMENT ============================ */ function Measurement() { const cols = useBreakpointValue([[768,'1fr']], '0.9fr 1.1fr'); return (
Measurement & Analytics

Jeśli nie mierzysz, zgadujesz.

Rozdzielamy ruch z AI Search, dark search i klasycznych źródeł. Jedna definicja wyniku, jeden dashboard, spójne raporty w marketingu, sprzedaży i finansach.
Widoczność wg modelu Live
); } /* ============================ CTA + FOOTER ============================ */ function CTA() { const ctaSygnet = useBreakpointValue([[640,64]], 92); return (

Wejdź w nowy kanał, zanim zbierze w nim uwagę konkurencja.

); } function Footer() { return ( ); } /* ============ DEDICATED HOMEPAGE SECTION → SEMAI Performance ============ AI-first homepage keeps violet everywhere; this is the ONE place green (#3ECF8E) appears — the product signal for SEMAI Performance. Kept to a single, clearly-separated band so it reads as "second product", not "second half of the homepage" (Brandbook v1.1: max 3-5% green on home). */ function PerformanceBridge() { const bridgeCols = useBreakpointValue([[1024,'1fr']], '1.25fr 0.75fr'); const Check = (p)=>(); const feats = [ ['Google Ads · Meta · SEM','Search, PMax, Meta Ads, remarketing'], ['Analityka i pomiar','GA4, GTM, konwersje, dashboardy'], ['Decyzje budżetowe','CPA, ROAS, jakość leadów, skalowanie'], ]; return (
{/* green product atmosphere — the only green on the homepage */}
{/* top product ribbon */}
Drugi produkt SEMAI — osobna ścieżka
SEMAI Performance

Szukasz klasycznego SEM i performance marketingu?

SEMAI to nie tylko widoczność w AI. Jeśli potrzebujesz kampanii Google Ads i Meta, precyzyjnej analityki, poprawnego pomiaru konwersji i decyzji budżetowych opartych na danych, przejdź do SEMAI Performance.

{feats.map(([t,d],i)=>(
{t} {d}
))}
); } /* small icons for Performance */ const Check = (p)=>(); const Gauge = (p)=>(); const Funnel = (p)=>(); const Sliders = (p)=>(); const Layers2 = (p)=>(); /* Green product CTA (SEMAI Performance) */ function PerfButton({ children, size = 'md', variant = 'solid', onClick }) { const [h, setH] = React.useState(false); const dims = size === 'lg' ? { height: 48, pad: '0 24px', fs: 15 } : { height: 40, pad: '0 18px', fs: 14 }; const solid = variant === 'solid'; return ( ); } /* Green accent tile for Performance icons */ const perfTile = { width:40, height:40, borderRadius:'var(--radius-md)', background:'var(--perf-tint)', border:'1px solid var(--perf-border)', color:'var(--perf-accent)', display:'inline-flex', alignItems:'center', justifyContent:'center' }; /* ============================ PERFORMANCE — HERO ============================ */ function PerfHero() { const shown = useMounted(80); const cols = useBreakpointValue([[1024,'1fr']], '1.1fr 0.9fr'); const metricCols = useBreakpointValue([[420,'1fr']], '1fr 1fr'); return (
SEMAI Performance
Google Ads · Meta · Analityka

SEM i performance marketing oparty na precyzyjnej analityce.

SEMAI Performance pomaga firmom prowadzić kampanie Google Ads, Meta i performance marketing w sposób mierzalny, uporządkowany i oparty na danych. Nie chodzi o same kliknięcia. Chodzi o poprawny pomiar, jakość konwersji, kontrolę budżetu i decyzje, które da się obronić liczbami.

Umów konsultację
Dashboard kampanii Live
{[['Search',82],['Performance Max',64],['Meta Ads',57],['Demand Gen',44],['Remarketing',33]].map(([n,v])=>(
{n} {v}
))}
); } /* ==================== PERFORMANCE — FOR WHOM + SCOPE ==================== */ function PerfForWhom() { const cols = useBreakpointValue([[1024,'1fr']], '1fr 1fr'); const scopeCols = useBreakpointValue([[520,'1fr']], '1fr 1fr'); const pains = [ 'Inwestujesz w Google Ads i Meta, ale nie masz pewności, co realnie działa.', 'Nie wiesz, czy konwersje są poprawnie mierzone.', 'Raporty pokazują liczby, ale nie prowadzą do decyzji.', 'Kampanie generują leady, ale jakość jest nierówna.', 'Budżet rośnie, ale nie wiadomo, czy powinien być skalowany.', 'Potrzebujesz analityki, a nie tylko obsługi reklam.', ]; const scope = [ 'Audyt kont Google Ads i Meta','Search, PMax, Demand Gen, remarketing','Meta Ads: Advantage+, retargeting','Struktura kampanii i grup reklam','Analiza budżetu','Analiza kosztów i konwersji','GA4 i GTM','Konfiguracja eventów i konwersji','Dashboardy','Analiza lejka','Analiza jakości leadów','Rekomendacje: skalować, ciąć, testować','Poprawa landingów i trackingu', ]; return (
Dla kogo

Dla firm, które inwestują w Google Ads i Meta — ale nie mają pełnej kontroli nad wynikiem.

Dla firm, które widzą koszty, kliknięcia i konwersje, ale nie wiedzą, które działania realnie dowożą biznes.

{pains.map((p,i)=>(
{p}
))}
Co obejmuje usługa
{scope.map((s,i)=>(
{s}
))}
); } /* ==================== PERFORMANCE — ANALYTICS FOUNDATION ==================== */ function PerfAnalytics() { const cols = useBreakpointValue([[640,'1fr'],[1024,'1fr 1fr']], 'repeat(3,1fr)'); const points = [ ['Poprawny tracking', ], ['Jasna definicja konwersji', ], ['Rozdzielenie mikro- i makrokonwersji', ], ['Spójność GA4, GTM, Google Ads i Meta', ], ['Dashboardy prowadzące do decyzji', ], ['Analiza jakości leadów, nie tylko liczby', ], ]; return (
Analityka jako fundament

Bez pomiaru performance jest zgadywaniem.

W SEMAI Performance analityka nie jest dodatkiem. Jest punktem wyjścia. Kampanie mają sens dopiero wtedy, gdy wiadomo, co mierzymy, jaką wartość mają konwersje i które działania faktycznie wpływają na biznes.
{points.map(([t,ic],i)=>( {ic} {t} ))}
); } /* ==================== PERFORMANCE — PROCESS ==================== */ function PerfProcess() { const cols = useBreakpointValue([[640,'1fr'],[1024,'1fr 1fr']], 'repeat(3,1fr)'); const steps = [ ['Diagnoza konta i danych','Sprawdzamy, czy dane są wiarygodne.'], ['Weryfikacja pomiaru','Tracking, eventy, konwersje, spójność GA4/GTM.'], ['Uporządkowanie kampanii','Struktura kont, grup i kreacji.'], ['Optymalizacja budżetu','Koszty, stawki, alokacja między kampanie.'], ['Analiza efektów','CPA, ROAS, CVR, jakość leadów, lejek.'], ['Decyzje o skalowaniu','Skalować, ciąć, testować albo poprawić.'], ]; return (
Proces pracy

Najpierw dane. Potem struktura. Dopiero później skalowanie.

Najpierw sprawdzamy, czy dane są wiarygodne. Potem poprawiamy strukturę kampanii. Dopiero później podejmujemy decyzje o skalowaniu.
{steps.map(([t,d],i)=>( {String(i+1).padStart(2,'0')} {t} {d} ))}
); } /* ==================== PERFORMANCE — ENTRY PRODUCTS ==================== */ function PerfProducts() { const cols = useBreakpointValue([[520,'1fr'],[900,'1fr 1fr']], 'repeat(4,1fr)'); const items = [ {icon:, eyebrow:'Produkt wejściowy', title:'Performance Audit', description:'Audyt kampanii, budżetów, struktury konta, konwersji i realnych punktów przepalania pieniędzy.', outcome:'Raport + priorytety', featured:true}, {icon:, eyebrow:'Analityka', title:'Measurement Setup', description:'Uporządkowanie GA4, GTM, eventów, konwersji, dashboardów i standardu danych.', outcome:'Standard pomiaru'}, {icon:, eyebrow:'Sprint', title:'Campaign Optimization Sprint', description:'Krótki sprint: diagnoza, wdrożenie, analiza efektów i decyzje o dalszym kierunku.', outcome:'Wdrożenie + decyzje'}, {icon:, eyebrow:'Plan', title:'Performance Growth Plan', description:'Plan rozwoju kampanii, budżetu, lejka, testów i analityki na 30–90 dni.', outcome:'Plan 30–90 dni'}, ]; return (
Produkty wejściowe

Zacznij od audytu i pomiaru.
{items.map((it,i)=>(
{it.icon} {i===0 && Zacznij tu}
{it.eyebrow}

{it.title}

{it.description}

{it.outcome}
))}
); } /* ==================== PERFORMANCE — CTA ==================== */ function PerfCTA() { return (

Chcesz wiedzieć, czy Twoje kampanie naprawdę dowożą wynik?

Sprawdźmy konto, pomiar i dane. Bez prezentacji o marketingu. Konkretnie: co działa, co przepala budżet i co warto poprawić jako pierwsze.

Porozmawiajmy o SEMAI Performance
); } function PerformancePage() { return ( ); } /* ============================ APP (router) ============================ */ function App() { const route = useRoute(); const perf = route.indexOf('performance') !== -1; return ( {perf ? ( ) : ( )}