AUDIT · HISTORICKÁ KREATIVA

● BEST

9:16

{metrics.map((m, i) => (

{m.label}

))}

⌇ Začínáme od dat.

); } // Step 2: Vezmeme produkt a podklady — file/asset upload diorama function DioramaPN2({ inView = true }) { const assets = [ { name: 'produkt_foto_01.jpg', type: 'IMG', size: '3.2 MB', done: true }, { name: 'brand_manual.pdf', type: 'PDF', size: '8.1 MB', done: true }, { name: 'produkt_white_bg.png', type: 'PNG', size: '4.2 MB', done: false, pct: 67 }, { name: 'logo_pack.zip', type: 'ZIP', size: '1.4 MB', done: false, pct: 31 }, ]; return (

PŘÍJEM PODKLADŮ / 4 HOTOVO

{assets.map((a, i) => (

{a.type} {a.name} {a.done ? '✓' : `${a.pct}%`}

{!a.done && (

)}

))}

); } // Step 3: Navrhneme kreativní směry — 3 direction cards, middle selected function DioramaPN3({ inView = true }) { const directions = [ { label: 'SMĚR A', name: 'Srovnávací', lines: ['Před / po', 'kontrast', 'výsledek'], selected: false, }, { label: 'SMĚR B', name: 'Lifestyle', lines: ['Produkt', 'v situaci', 'CTA →'], selected: true, }, { label: 'SMĚR C', name: 'Výkonový', lines: ['Přímý offer', 'sleva / akce', 'urgence'], selected: false, }, ]; return (

● KREATIVNÍ SMĚRY · 3 KONCEPTY

{directions.map((d, i) => (

{d.label}

{d.name}

{d.lines.map((line, j) => (

{line}

))}

); } // Step 4: Vytvoříme sadu kreativ — reused Production diorama function DioramaPN4({ inView = true }) { const variants = [ { label: 'Produktový banner · 1:1', pct: 100, state: 'DONE' }, { label: 'Lifestyle banner · 9:16', pct: 71, state: 'RUN' }, { label: 'Výkonový banner · 1:1', pct: 38, state: 'RUN' }, ]; return (

6 KREATIV PARALELNĚ / 6 HOTOVO

{variants.map((v, i) => (

{v.label} {v.pct}%

{v.state === 'RUN' && (

)}

))}

); } // Step 5: Dodáme výstupy do reklam — reused Handover diorama function DioramaPN5() { const files = [ { name: 'meta-ads-export/', folder: true, depth: 0 }, { name: 'produktove/', folder: true, depth: 1 }, { name: 'banner_1x1.jpg', depth: 2, size: '0.8 MB' }, { name: 'banner_9x16.jpg', depth: 2, size: '1.1 MB' }, { name: 'lifestyle/', folder: true, depth: 1 }, { name: 'banner_1x1.jpg', depth: 2, size: '0.9 MB' }, { name: 'banner_9x16.jpg', depth: 2, size: '1.2 MB' }, { name: 'vykonove/', folder: true, depth: 1 }, { name: 'banner_1x1.jpg', depth: 2, size: '0.7 MB' }, { name: 'banner_9x16.jpg', depth: 2, size: '1.0 MB' }, ]; return (

● META ADS · EXPORT

Připraveno ke spuštění.

{[...files, ...files].map((f, i) => (

{f.folder ? '▾' : '·'} {f.name} {f.size && {f.size}}

))}

); } // ============ STEP CARD ============ function StepCardPN({ num, title, desc, Diorama, delay }) { const [hover, setHover] = usePNState(false); const [inView, setInView] = usePNState(false); const cardRef = usePNRef(null); usePNEffect(() => { const el = cardRef.current; if (!el) return; const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced) { setInView(true); return; } const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh * 0.85 && r.bottom > 0) { const t = setTimeout(() => setInView(true), delay + 200); return () => clearTimeout(t); } const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.unobserve(el); } }); }, { threshold: 0.25 }); io.observe(el); return () => io.disconnect(); }, [delay]); return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: hover ? 'var(--surface-hover)' : 'var(--surface)', border: '1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'), borderRadius: '14px', padding: '32px', display: 'flex', flexDirection: 'column', gap: '24px', height: '100%', boxSizing: 'border-box', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 20px 40px -20px rgba(0,0,0,0.8)' : 'none', transition: 'background 400ms cubic-bezier(0.65, 0, 0.35, 1), border-color 400ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1)', position: 'relative', overflow: 'hidden', }} > Krok {num}

{title}

{desc}

); } function ProcessNew() { const steps = [ { num: 1, title: 'Poznáme vaši značku', desc: 'Projdeme si, co prodáváte, komu, jaké kreativy vám fungovaly a co už jste zkoušeli. Bez toho netvoříme naslepo.', D: DioramaPN1, }, { num: 2, title: 'Vezmeme produkt a podklady', desc: 'Pracujeme s vaším produktem, fotkami, videi, brand manuálem nebo existujícími reklamami. Když podklady nejsou perfektní, nevadí — pomůžeme si vlastním workflow.', D: DioramaPN2, }, { num: 3, title: 'Navrhneme kreativní směry', desc: 'Připravíme kreativní koncepty, které budou respektovat vaše zadání.', D: DioramaPN3, }, { num: 4, title: 'Vytvoříme sadu kreativ', desc: 'Kombinujeme AI, reálné podklady a práci grafiků. Hlídáme detaily, uvěřitelnost i to, aby produkt nepůsobil falešně.', D: DioramaPN4, }, { num: 5, title: 'Dodáme výstupy do reklam', desc: 'Dle domluveného balíčku připravíme několik setů reklamní grafiky do Meta Ads.', D: DioramaPN5, }, ]; return (

{/* 2+2 grid */}

{steps.slice(0, 4).map((s, i) => ( ))}

{/* 5th step — full width */}

); } window.ProcessNew = ProcessNew;