// V7 — Hybrid (user's mix of V5 / V2 / V1) — interactive edition // Changes vs prev: // - Hero arrow nudged so it doesn't kiss the dot of "i" in databázi // - Live counter (live email-sent ticker) overlaid on dashboard // - Manual+auto ProcessAnimatedManual w/ moving "packets" on connecting line // - Tilt-on-mouse wrapper around the live email mockup (gentle) // - Email mockup gets "Otevřít" button → expanded inline view // - Client-logos marquee converted to clickable case-study cards w/ modal // - V7ContactForm: typing indicator, smart hints, inline mini calendar const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "arrowChar": "↗", "arrowSize": 80, "arrowGap": 6, "arrowOffsetY": 1, "arrowOffsetX": 0, "arrowOpacity": 0.4, "arrowAlign": "center", "arrowItalic": false, "arrowWeight": 600 }/*EDITMODE-END*/; function V7Hybrid() { const [seg, setSeg] = React.useState('barber'); const accent = '#1a5ada'; const [caseStudy, setCaseStudy] = React.useState(null); const [navDrop, setNavDrop] = React.useState(false); const [mobileMenu, setMobileMenu] = React.useState(false); const [mobileSubOpen, setMobileSubOpen] = React.useState(false); const navDropTimer = React.useRef(null); const navOpen = () => { clearTimeout(navDropTimer.current); setNavDrop(true); }; const navClose = () => { navDropTimer.current = setTimeout(() => setNavDrop(false), 140); }; const closeMobile = () => { setMobileMenu(false); setMobileSubOpen(false); }; React.useEffect(() => { document.body.style.overflow = mobileMenu ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [mobileMenu]); const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); return (
{/* Dot-grid bg */}
{/* NAV */} {/* MOBILE MENU OVERLAY */} {mobileMenu && (
e.stopPropagation()} style={{ position: 'absolute', top: 64, left: 12, right: 12, background: '#fff', borderRadius: 18, boxShadow: '0 24px 60px -20px rgba(0,0,0,0.35)', padding: '16px 8px', animation: 'v7DropIn 0.22s ease-out', maxHeight: 'calc(100vh - 80px)', overflowY: 'auto', }} > {/* Řešení s pod-menu */} {mobileSubOpen && (
{[ { key: 'barber', icon: '💈', name: 'Barbershopy' }, { key: 'beauty', icon: '💅', name: 'Kosmetičky', soon: true }, { key: 'wellness', icon: '🧖', name: 'Wellness', soon: true }, { key: 'auto', icon: '🚗', name: 'Autoservisy', soon: true }, ].map(s => ( { e.preventDefault(); } : closeMobile} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 10, textDecoration: 'none', color: s.soon ? 'rgba(0,0,0,0.5)' : '#0a0a0a', fontSize: 15, fontWeight: 500, }}> {s.icon} {s.name} {s.soon && JIŽ BRZY} ))}
)} {[ { href: 'pages/pripadovky.html', label: 'Případovky', soon: true }, { href: 'pages/jak-pracujeme.html', label: 'Jak pracujeme' }, { href: 'pages/o-nas.html', label: 'O nás' }, { href: 'pages/akademie.html', label: 'Akademie', soon: true }, { href: 'pages/cenik.html', label: 'Ceník', soon: true }, ].map(l => ( {l.label} {l.soon && BRZY} ))}
)} {/* HERO */}

Méně peněz

za reklamu.

Víc v křesle {tw.arrowChar}

Vracíme stálé zákazníky barbershopů zpátky do křesla. Nextlevel v Praze takhle dostává 58 rezervací z e-mailu měsíčně, 45 792 Kč obratu. Bez reklamy. Bez zbytečných slev.
{/* Dashboard mockup */}
{/* MARQUEE STATS */}
{[...STATS, ...STATS, ...STATS, ...STATS].map((s, i) => (
{s.value} {s.label} ✦
))}
{/* PRO KOHO TO DĚLÁME — segments + tilted live email */}

Začínáme u barbershopů.

Specializujeme se na podniky, kam lidé chodí pravidelně. Další obory přidáváme postupně.
{/* Custom systém na míru */}
🛠
JINÝ OBOR?

Máte zákazníky, kteří se vracejí? Ozvěte se.

Boostmail jedeme zatím jen pro barbershopy, další obory plánujeme. Pokud děláte službu, kam lidé chodí pravidelně, dejte nám vědět. Patnáct minut hovoru a řekneme, kdy bychom se k vám dostali.
Probrat můj obor →
{/* MARQUEE REVERSE */}
{Array.from({ length: 8 }).map((_, i) => ( BEZ REKLAMY ✦ BEZ ZBYTEČNÝCH SLEV ✦ MĚŘENO REZERVACEMI ✦ ))}
{/* KDY POSÍLÁME — 5 reálných situací */}

Pět situací, kdy píšeme.

Žádné slevové letáky, žádný spam. Správná zpráva ve správný moment.
{SITUATIONS.map(s => (
[{s.n}]
{s.emoji}

{s.title}

{s.desc}
))}
{/* JAK TO BĚŽÍ — 3 kroky onboardingu */}

Co se stane, když řeknete ano.

↓ KLIKNĚTE NA KROK PRO DETAIL
{/* VÝSLEDKY — clickable cards in marquee */}

Čtyři barbershopy. Jeden příklad.

Detailní čísla zveřejňujeme zatím jen u Nextlevelu. U dalších klientů čekáme na souhlas se zveřejněním dat.
{[...CASE_STUDIES, ...CASE_STUDIES, ...CASE_STUDIES].map((cs, i) => ( cs.placeholder ? null : setCaseStudy(cs)} /> ))}
{/* UKÁZKA — callout + email */}

Patnáct minut. Konkrétně k vašemu barbershopu.

Žádná obecná prezentace. Podíváme se na vaše čísla a řekneme rovnou, jestli pro vás dává smysl s námi spolupracovat.
{[ 'Kolik zákazníků máte v rezervačním systému', 'Kolik se jich vám za poslední rok nevrátilo', 'Jaký dopad může mít e-mail u podobné velikosti', 'Co bychom nastavili jako první a co až potom', ].map((t, i) => (
{i + 1}
{t}
))}
Domluvit patnáctiminutový hovor →

Tak vypadá jedna z našich zpráv.

Jednoduchý e-mail, spočítané načasování, jeden klik na rezervaci. U Nextlevelu otevírá 28,6 % příjemců (s rezervou na bot inflation v Apple Mail Privacy).
{/* CTA / FORM with smart bits */}

Pojďme spočítat, kolik vám utíká.

Vyplňte formulář nebo si rovnou vyberte termín patnáctiminutového hovoru. Ozveme se do 24 hodin.
TELEFONNÍ ČÍSLO
+420 604 656 033
{/* Case-study modal */} {caseStudy && setCaseStudy(null)} />} setTweak('arrowChar', v)} /> setTweak('arrowSize', v)} /> setTweak('arrowGap', v)} /> setTweak('arrowOffsetY', v)} /> setTweak('arrowOffsetX', v)} /> setTweak('arrowOpacity', v)} /> setTweak('arrowAlign', v)} /> setTweak('arrowWeight', v)} /> setTweak('arrowItalic', v)} />
); } // ─── V1-style mono section label ────────────────────────── function MonoLabel({ n, text, accent, center = false }) { return (
[{n}] — {text}
); } // ─── Live counter overlay (top-right of dashboard) ──────── function LiveCounter({ accent }) { const [count, setCount] = React.useState(8247); const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => { const inc = Math.floor(Math.random() * 4) + 1; setCount((c) => c + inc); setTick((t) => t + 1); }, 1400); return () => clearInterval(id); }, []); return (
EMAILŮ ODESLÁNO · 24H
{count.toLocaleString('cs-CZ').replace(/,/g, ' ')}
); } // ─── Tilt wrapper (gentle) ──────────────────────────────── function TiltWrap({ children, max = 6 }) { const ref = React.useRef(null); const [transform, setTransform] = React.useState('perspective(1400px) rotateX(0deg) rotateY(0deg)'); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; setTransform(`perspective(1400px) rotateX(${(-y * max).toFixed(2)}deg) rotateY(${(x * max).toFixed(2)}deg)`); }; const onLeave = () => setTransform('perspective(1400px) rotateX(0deg) rotateY(0deg)'); return (
{children}
); } // ─── Manual ProcessAnimated with packet dots ────────────── function ProcessAnimatedManual({ accent = '#1a5ada', interval = 2800 }) { const [active, setActive] = React.useState(0); const [paused, setPaused] = React.useState(false); const [packetKey, setPacketKey] = React.useState(0); React.useEffect(() => { if (paused) return; const id = setInterval(() => { setActive((a) => (a + 1) % PROCESS_STEPS.length); setPacketKey((k) => k + 1); }, interval); return () => clearInterval(id); }, [paused, interval]); const handleClick = (i) => { setActive(i); setPaused(true); setPacketKey((k) => k + 1); }; // Detail panel content for each step (3 kroky onboardingu) const details = [ { title: 'Co řešíme při předání databáze', items: [ 'Napojení na váš rezervační systém (Reservio, Reservanto, MyFox)', 'Převzetí historie zákazníků a jejich návštěv', 'Kontrola, že máme dost dat na rozjezd flow', ], }, { title: 'Co se děje při nastavení flow', items: [ 'Sepneme jednotlivé situace (post care, recommend, free slots, cancel, reactivation)', 'Přizpůsobíme jazyk a timing vašemu barbershopu', 'První dva týdny ladíme, než to sedne', ], }, { title: 'Co dostanete v prvním reportu', items: [ 'Počet rezervací, které proběhly po našem e-mailu', 'Hodnota těchto rezervací v korunách', 'Co fungovalo, co ne, a kde doladíme další měsíc', ], }, ]; return (
{/* connecting line */}
{/* moving packet */}
{PROCESS_STEPS.map((s, i) => { const isActive = i === active; const isPast = i < active; return (
handleClick(i)}>
{s.emoji}
{s.n}
{s.title.toUpperCase()}
{s.desc}
); })}
{/* Detail panel */}
DETAIL · KROK {PROCESS_STEPS[active].n}
{paused ? '⏸ MANUÁLNÍ MÓD' : '▶ AUTO'}
{details[active].title}
{details[active].items.map((it, idx) => (
{idx + 1} {it}
))}
); } // ─── Case study card + modal ────────────────────────────── // Pozn.: Veřejně publikujeme čísla jen u Nextlevelu. Ostatní označené jako placeholder. const CASE_STUDIES = [ { name: 'Nextlevel', cat: 'Barbershop · Praha', metric: '45 792 Kč', metricUnit: 'obratu z e-mailu / měsíc', summary: '58 rezervací proběhlo po našem e-mailu. Z databáze, kterou Nextlevel už dávno měl. Bez reklamy, bez zbytečných slev.', kpis: [ { k: 'Rezervace / měsíc', v: '58' }, { k: 'Open rate', v: '28,6 %' }, { k: 'Reklama', v: '0 Kč' }, ], }, { name: 'Torinos', cat: 'Barbershop · Praha', summary: 'Stálá spolupráce. Detailní případovka v přípravě, čísla zveřejníme se souhlasem klienta.', placeholder: true, }, { name: 'Barbershop v Brně', cat: 'Barbershop · Anonymizováno', summary: 'Reálný klient, jméno nezveřejňujeme. Detailní případovka v přípravě.', placeholder: true, anonymous: true, }, { name: 'Barbershop v Praze', cat: 'Barbershop · Anonymizováno', summary: 'Reálný klient, jméno nezveřejňujeme. Detailní případovka v přípravě.', placeholder: true, anonymous: true, }, ]; function CaseStudyCard({ cs, accent, onClick }) { const isPlaceholder = !!cs.placeholder; return (
{/* Header: badge + category */}
{cs.anonymous ? '·' : '💈'}
{cs.cat.toUpperCase()}
{/* Name */}
{cs.name}
{/* Summary */}
{cs.summary}
{/* Big metric (only if real numbers) */} {!isPlaceholder && (
{cs.metric}
{cs.metricUnit}
)} {/* Placeholder block */} {isPlaceholder && (
PŘÍPADOVKA V PŘÍPRAVĚ
)} {/* Footer */}
{isPlaceholder ? 'KLIENT' : 'PŘÍPADOVKA'}
{isPlaceholder ? '–' : 'Detail →'}
); } function CaseStudyModal({ cs, accent, onClose }) { return (
e.stopPropagation()} className="v7-modal" style={{ background: '#fff', borderRadius: 18, maxWidth: 720, width: '100%', maxHeight: '90vh', overflowY: 'auto', padding: 40, boxShadow: '0 40px 100px rgba(0,0,0,0.4)', animation: 'v7modalIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1)', position: 'relative', }}>
💈
{cs.cat.toUpperCase()} · PŘÍPADOVKA
{cs.name}
{cs.summary} Měříme to, co proběhlo po našem e-mailu, last-touch attribution. Detailní metodiku najdete v případovce.
{/* fake chart */}
VYBRANE MĚSÍCE · ILUSTRAČNÍ
{[0, 60, 120, 180, 240, 300, 360, 420, 480, 540, 600].map((x, i) => { const ys = [110, 100, 92, 78, 70, 50, 38, 28, 18, 10, 5]; return ; })}
{/* KPIs */}
{cs.kpis.map((k, i) => (
{k.k.toUpperCase()}
{k.v}
))}
); } // ─── Typing indicator ──────────────────────────────────── function TypingIndicator({ accent }) { const [name, setName] = React.useState('Lukáš'); React.useEffect(() => { const names = ['Lukáš', 'Vojta']; const id = setInterval(() => setName(names[Math.floor(Math.random() * names.length)]), 5000); return () => clearInterval(id); }, []); return (
{name[0]}
{name} z týmu právě píše
); } // ─── V7 contact form: smart hints + inline calendar ────── function V7ContactForm({ accent }) { const [mode, setMode] = React.useState('form'); // 'form' | 'cal' const [data, setData] = React.useState({ name: '', email: '', phone: '', project: '', db: '', msg: '' }); const [errors, setErrors] = React.useState({}); const [sent, setSent] = React.useState(false); const [picked, setPicked] = React.useState(null); const validate = () => { const e = {}; if (!data.name.trim()) e.name = 'Jméno je povinné'; if (!data.email.trim()) e.email = 'Email je povinný'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'Neplatný formát emailu'; if (!data.project.trim()) e.project = 'Název barbershopu je povinný'; return e; }; const submit = (ev) => { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length === 0) setSent(true); }; // Smart hint based on db size const dbHint = (() => { const n = parseInt(data.db.replace(/\D/g, ''), 10); if (!n) return null; if (n < 300) return { text: 'Malý barbershop. Retenční e-mail začíná dávat smysl tak od 300 zákazníků. Klidně se ozvěte dřív, řekneme, jak na to.', tone: 'warn' }; if (n < 1500) return { text: 'Slušný start. Retenční flow tady může přivést první desítky rezervací měsíčně. Hodíme se.', tone: 'good' }; if (n < 5000) return { text: 'Sweet-spot. Při této velikosti vidíme u barbershopů nejlepší výsledky.', tone: 'good' }; return { text: 'Velký barbershop. Hodí se nastavit několik flow paralelně. Probereme na hovoru.', tone: 'good' }; })(); if (sent && mode === 'form') { return (
🎉
Děkujeme, {data.name || 'parťáku'}!
Ozveme se vám do 24 hodin na {data.email}.
); } if (picked && mode === 'cal') { return (
🎉
Termín potvrzen, {picked.lead.name.split(' ')[0]}!
{picked.day} v {picked.slot}
Pozvánku jsme poslali na {picked.lead.email}.
); } const inputBase = { width: '100%', padding: '14px 16px', fontSize: 15, fontFamily: 'inherit', border: '1px solid rgba(0,0,0,0.12)', background: '#fff', color: '#0a0a0a', borderRadius: 8, outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s, box-shadow 0.15s', }; const field = (key, label, type = 'text', placeholder = '') => (
setData({ ...data, [key]: e.target.value })} placeholder={placeholder} style={{ ...inputBase, ...(errors[key] ? { borderColor: '#dc2626' } : {}) }} /> {errors[key] &&
{errors[key]}
}
); return (
{/* Mode switcher */}
{mode === 'form' && (
{field('name', 'Jméno', 'text', 'Jan Novák')} {field('email', 'E-mail', 'email', 'jan@barbershop.cz')}
{field('phone', 'Telefon', 'tel', '+420 …')} {field('project', 'Název barbershopu', 'text', 'Např. Boostmail Barbershop')}
setData({ ...data, db: e.target.value })} placeholder="např. 1 500" style={inputBase} /> {dbHint ? (
{dbHint.tone === 'good' ? '💡' : '⚠️'} {dbHint.text}
) : (
PRŮMĚR U BARBERSHOPŮ: KOLEM 1 200 ZÁKAZNÍKŮ
)}