/* ============================================================ landing-core.jsx - közös komponensek mindkét landinghez window-re exportálva, hogy a selfservice.jsx / managed.jsx használhassa ============================================================ */ const { useState, useEffect, useRef } = React; const ORANGE = "#ffa014"; const CALENDLY_URL = "https://calendly.com/d/cvq8-jwh-sq5/netadclick-com-hirlevelkuldo-bemutato-meeting?hide_event_type_details=1&hide_gdpr_banner=1&primary_color=068ee7"; // A Calendly natívan rögzíti az utm_* paramétereket a foglalásnál (Meetings // fül, webhook, v2 API), ezért a widget URL-jére ráfűzzük az attribúciót. // Így a foglalás forrása akkor is megvan, ha a látogató elutasította a // mérési sütiket - lásd attribution.js. Csak az 5 standard utm_* mezőt // fogadja el, egyéb saját paramétert nem. const calendlyUrl = () => window.nacAttribution ? window.nacAttribution.decorate(CALENDLY_URL) : CALENDLY_URL; // ---------- CONVERSION TRACKING (IndiData) ---------- // A látogató fontos műveletét jelzi a mérőrendszernek. Score: 100 = magas // értékű lead (hívás / bemutatófoglalás), lásd IndiData konverzió-doksi. const trackConversion = (event, score) => { window.eventStorage = window.eventStorage || []; window.eventStorage.push('conversion', event, score); }; // ---------- KÖSZÖNŐOLDAL ---------- // Sikeres foglalás után átvisszük a látogatót egy külön URL-re. Két oka van: // a Calendly visszaigazolása szűkszavú (nem mondja el, mi következik), és egy // önálló URL a legegyszerűbb, legmegbízhatóbb konverziós jel a GA4 / Ads // felé - nem kell postMessage-re triggert építeni. const THANKS_PATH = "/koszonom"; // A köszönőoldal ebből tudja, melyik csomagról szólt a bemutató. Az attribúció // utm_content mezője erre NEM jó: azt minden oldal a saját útvonalából állítja // elő, tehát a köszönőoldalon már "/koszonom" lenne. const THANKS_SOURCE = { "/": "hirlevelkuldo", "/teljes-koru": "teljes-koru", "/kalkulator": "kalkulator" }; const thanksUrl = () => { // Fájlból megnyitva (.html) és éles cleanUrls alatt is ugyanazt adja. const path = (window.location.pathname || "/").replace(/\.html$/, "").replace(/\/index$/, "/"); const url = THANKS_PATH + "?forras=" + encodeURIComponent(THANKS_SOURCE[path] || "egyeb"); // Az utm_* paramétereket visszük tovább, hogy a köszönőoldali konverzió is // a kampányhoz kötődjön - JS-navigációnál ezt a click handler nem intézi el. return window.nacAttribution ? window.nacAttribution.internal(url) : url; }; // ---------- ICONS ---------- const ICONS = { editor: () => , stats: () => , segment: () => , trigger: () => , form: () => , retarget: () => , analytics: () => , sms: () => , integrate: () => }; const FeatureIcon = ({ iconKey }) => { const r = ICONS[iconKey]; return r ? r() : null; }; // ---------- reveal hook ---------- const useReveal = () => { useEffect(() => { document.querySelectorAll(".section-label, section .h2").forEach(el => { if (!el.classList.contains("reveal")) el.classList.add("title-rv"); }); const els = Array.from(document.querySelectorAll(".reveal, .title-rv")); const showAll = () => els.forEach(e => e.classList.add("in")); if (!("IntersectionObserver" in window)) { showAll(); return; } const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } }); }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" }); els.forEach(e => io.observe(e)); // Fallback 1: if the observer never fires (some embed/iframe contexts), // Fallback 1: reveal only what's already in/above the viewport, so initial // content is never stuck at opacity:0 - below-fold stays for the observer. const revealInView = () => els.forEach(e => { if (e.getBoundingClientRect().top < window.innerHeight * 0.95) e.classList.add("in"); }); const t = setTimeout(revealInView, 500); // Fallback 2 (bulletproof): force-show anything still computed-invisible that // has entered the viewport, without pre-revealing off-screen elements. const t2 = setTimeout(() => { els.forEach(e => { if (getComputedStyle(e).opacity === "0" && e.getBoundingClientRect().top < window.innerHeight) { e.style.opacity = "1"; e.style.transform = "none"; } }); }, 1500); return () => { clearTimeout(t); clearTimeout(t2); io.disconnect(); }; }, []); }; // ---------- LOGO ---------- const Logo = ({ tier, managed }) =>

Hírlevél {tier && {tier}} ; // ---------- NAV ---------- const Nav = ({ links, onBook, ctaLabel = "Ingyenes bemutató →", tier, managed, otherHref, otherLabel }) => { const [open, setOpen] = useState(false); const close = () => setOpen(false); return (

); }; // ---------- HERO PREVIEW (dashboard mockup) ---------- const HeroPreview = () => { const [tab, setTab] = useState(0); useEffect(() => { const t = setInterval(() => setTab(x => (x + 1) % 3), 3800); return () => clearInterval(t); }, []); const stats = [ { l: "Átlag megnyitás", v: "47,2%", d: "+4,1% heti" }, { l: "Átlag kattintás", v: "12,8%", d: "+1,9% heti" }, { l: "Leiratkozás", v: "0,23%", d: "−0,02% heti" } ]; return (

minta adat

hirlevelkuldo.netadclick.com / áttekintés

{["Áttekintés", "Szerkesztő", "Automatizmus"].map((n, i) => )}

{tab === 0 &&

{stats.map(s =>

{s.l}

{s.v}

{s.d}

)}

hét 1hét 2hét 3hét 4hét 5

Tavaszi kampány49,1% megnyitás

Hírlevél #4245,7% megnyitás

Újrakampány38,2% megnyitás

} {tab === 1 &&

SzövegKépGombOszlopElválasztó

Üdvözöljük, Anna!

[ kép blokk ]

Kedves Anna, szeretnénk megmutatni néhány új ajánlatot, amely pont az Ön érdeklődési körébe vág…

Ajánlat megtekintése →

} {tab === 2 &&

Feliratkozás

Üdvözlő levél

2 nap

Kérdőív

válasz alapján

Érdeklődő sorozat

Hírlevél lista

}

); }; // ---------- TESTIMONIALS ---------- const TypeQuote = ({ text }) => { const clean = text.replace(/^[„"“]/, "").replace(/[""”]$/, ""); const ref = useRef(null); const [n, setN] = useState(0); const [started, setStarted] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setN(clean.length); return; } const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setStarted(true); io.disconnect(); } }), { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, [clean.length]); useEffect(() => { if (!started || n >= clean.length) return; const t = setTimeout(() => setN(x => Math.min(clean.length, x + 3)), 12); return () => clearTimeout(t); }, [started, n, clean.length]); const done = n >= clean.length; return (

{clean.slice(0, n)}

); }; // ---------- COUNT-UP NUMBER ---------- const CountUpNum = ({ value }) => { const ref = useRef(null); const digits = String(value).replace(/\s/g, ""); const isNum = /^\d+$/.test(digits); const target = isNum ? parseInt(digits, 10) : 0; const [n, setN] = useState(0); useEffect(() => { if (!isNum) return; const el = ref.current; if (!el) return; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setN(target); return; } const io = new IntersectionObserver((es) => es.forEach(e => { if (!e.isIntersecting) return; io.disconnect(); const dur = 1500, start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / dur); setN(Math.round(target * (1 - Math.pow(1 - p, 3)))); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }), { threshold: 0.5 }); io.observe(el); return () => io.disconnect(); }, [isNum, target]); const fmt = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "\u00a0"); return {isNum ? fmt(n) : value}; }; const Testimonials = ({ quotes }) =>

{quotes.map((q, i) =>

“ ”

{q.logo ?

: {q.initials}} {q.name} {q.role || "Partner"}

)}

; // ---------- PARTNER STRIP ---------- const PARTNERS = [ { name: "Focus Medical", logo: "assets/partners/focus-medical.jpg" }, { name: "SAKKOM Interaktív", logo: "assets/partners/sakkom.png" }, { name: "Program Turizmus", logo: "assets/partners/programturizmus.jpg" } ]; const PartnerStrip = () =>

Néhány partnerünk

{PARTNERS.map(p =>

)}

; // ---------- BOOKING ---------- const Booking = ({ bookRef, title, lead }) => { const [calShown, setCalShown] = useState(false); useEffect(() => { if (!document.querySelector('script[src*="calendly.com/assets/external/widget.js"]')) { const s = document.createElement('script'); s.src = 'https://assets.calendly.com/assets/external/widget.js'; s.async = true; document.body.appendChild(s); } if (!document.querySelector('link[href*="calendly.com/assets/external/widget.css"]')) { const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'https://assets.calendly.com/assets/external/widget.css'; document.head.appendChild(l); } }, []); // ---- Calendly események: a konverzió a TÉNYLEGES foglalásnál szólal meg ---- // A Calendly a widget.js-alapú beágyazásnál postMessage-ben jelzi a lépéseket: // profile_page_viewed → event_type_viewed → date_and_time_selected → event_scheduled // Nyers