= 2 ? 1 : 0,
transition: "opacity 0.35s ease",
pointerEvents: "none",
}} />
{/* subtle grid bg */}
{/* 4 Channel nodes — left column */}
{channels.map((c, i) => {
const visible = step >= 1;
return (
);
})}
{/* pulse rings — independent of AI core wrapper, no transform accumulation */}
= 2 ? 0.3 : 0,
transition: "opacity 0.35s ease",
animation: "aiHubPulse 2.4s ease-out infinite",
willChange: "transform",
}} />
= 2 ? 0.2 : 0,
transition: "opacity 0.35s ease",
animation: "aiHubPulse 2.4s ease-out infinite 1.2s",
willChange: "transform",
}} />
{/* AI core (center) */}
= 2 ? 1 : 0,
transform: step >= 2 ? "scale(1)" : "scale(0.85)",
transformOrigin: "center center",
transition: "opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1)",
zIndex: 3,
}}>
{/* glossy highlight */}
AI
{/* Output: recommendation result */}
= 3 ? 0 : 16}px)`,
opacity: step >= 3 ? 1 : 0,
transition: "all 0.7s cubic-bezier(.2,.7,.2,1)",
zIndex: 2,
width: "78%", maxWidth: 340,
} : {
position: "absolute",
right: "8%", top: "50%",
transform: `translateY(-50%) translateX(${step >= 3 ? 0 : 16}px)`,
opacity: step >= 3 ? 1 : 0,
transition: "all 0.7s cubic-bezier(.2,.7,.2,1)",
zIndex: 2,
width: "26%", maxWidth: 240,
}}>
);
};
const LawUpdateA = () => {
const data = HJ.lawUpdate;
const { isMobile } = useViewport();
const sectionRef = React.useRef(null);
const [step, setStep] = React.useState(0);
React.useEffect(() => {
const el = sectionRef.current; if (!el) return;
let timers = [];
const trigger = () => {
timers.forEach(clearTimeout);
setStep(0);
timers = [
setTimeout(() => setStep(1), 300),
setTimeout(() => setStep(2), 900),
setTimeout(() => setStep(3), 1500),
];
};
if (typeof IntersectionObserver === "undefined") { setStep(3); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) trigger();
else { timers.forEach(clearTimeout); setStep(0); }
});
}, { threshold: 0.3, root: el.closest('[data-scroll-root]') || null });
io.observe(el);
return () => { io.disconnect(); timers.forEach(clearTimeout); };
}, []);
const blockedGroup = data.groups.find((g) => g.status === "blocked");
const openGroup = data.groups.find((g) => g.status === "open");
void blockedGroup; void openGroup;
return (
{/* TOP — headline */}
{data.title}
{/* BOTTOM — diagram (no card, sits on section bg) */}
);
};
// ---------- 4섹션: 3채널 유입 전략 ----------
const ChannelStrategyA = () => {
const data = HJ.channelStrategy;
const { isMobile } = useViewport();
return (
{data.title}
{/* Hub diagram */}
{data.channels.map((c, i) => (
{ if (!isMobile) { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 40px -20px rgba(10,37,64,.18)"; e.currentTarget.style.borderColor = A.lineStrong; } }}
onMouseLeave={(e) => { if (!isMobile) { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = A.line; } }}>
{c.name}
{c.role}
{c.desc}
{c.formats.map((f) => (
{f}
))}
))}
{/* Hub footer */}
HUB
병원 자체 홈페이지
3개 채널의 유입을 모두 모으는 최종 도착지
);
};
// ---------- 5섹션 (Part 1): 마케팅 가격 ----------
const PricingMarketingA = () => {
const data = HJ.pricingV2;
const { isMobile, isTablet } = useViewport();
return (
{data.marketing.title}
{data.marketing.items.map((m, i) => (
{ if (!isMobile) { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 40px -20px rgba(10,37,64,.18)"; e.currentTarget.style.borderColor = A.lineStrong; } }}
onMouseLeave={(e) => { if (!isMobile) { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = A.line; } }}>
{m.name}
{m.channel}
{m.desc}
{m.rows.map((r) => (
-
{r.label}
{r.price}
))}
))}
{/* Marketing PACKAGE */}
PACKAGE
{data.marketing.package.name}
{data.marketing.package.sub}
{data.marketing.package.rows.map((r) => (
-
{r.label}
{r.note}
))}
월 정액
{data.marketing.package.price}
{data.marketing.package.save}
);
};
// ---------- 5섹션 (Part 2): 홈페이지 가격 ----------
const PricingHomepageA = () => {
const data = HJ.pricingV2;
const { isMobile, isTablet } = useViewport();
return (
{data.homepage.title}
{data.homepage.items.map((p, i) => {
const featured = i === 3;
return (
{ if (!isMobile) e.currentTarget.style.transform = "translateY(-4px)"; }}
onMouseLeave={(e) => { if (!isMobile) e.currentTarget.style.transform = "translateY(0)"; }}>
{featured && (
)}
{featured && (
한정 모집
)}
{p.tag}
{p.name}
{p.price}
{p.desc}
{p.points.map((pt) => (
-
{pt}
))}
);
})}
);
};
// ---------- COMPARE ----------
const CompareA = () => {
const sectionRef = React.useRef(null);
const { isMobile } = useViewport();
const [revealedRows, setRevealedRows] = React.useState(0);
React.useEffect(() => {
const el = sectionRef.current; if (!el) return;
if (typeof IntersectionObserver === "undefined") {
setRevealedRows(HJ.compare.rows.length);
return;
}
let intervalId = null;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
if (intervalId) clearInterval(intervalId);
let i = 0;
setRevealedRows(0);
intervalId = setInterval(() => {
i += 1;
setRevealedRows(i);
if (i >= HJ.compare.rows.length) { clearInterval(intervalId); intervalId = null; }
}, 180);
} else {
if (intervalId) { clearInterval(intervalId); intervalId = null; }
setRevealedRows(0);
}
});
}, { threshold: 0.25, root: el.closest('[data-scroll-root]') || null });
io.observe(el);
return () => { io.disconnect(); if (intervalId) clearInterval(intervalId); };
}, []);
return (
나란히 두면
분명해집니다
{isMobile ? (
{HJ.compare.rows.map((r, i) => {
const shown = i < revealedRows;
return (
{r.axis}
{r.a}
일반
{r.b}
HJ
);
})}
{HJ.compare.rows.map((r, i) => {
const shown = i < revealedRows;
return (
);
})}
)}
);
};
// ---------- FAQ ----------
const FaqA = () => {
const [open, setOpen] = React.useState(0);
const items = HJ.faq;
const { isMobile } = useViewport();
return (
자주 묻는 질문
{items.map((f, i) => {
const isOpen = open === i;
return (
);
})}
);
};
// ---------- FINAL CTA ----------
const CtaA = () => {
const { isMobile } = useViewport();
return (
지금 AI시대에
대응하셔야 됩니다
);
};
// ---------- ROOT ----------
const VariationA = () => {
const scrollRef = React.useRef(null);
React.useEffect(() => {
const root = scrollRef.current;
if (!root) return;
let isAnimating = false;
let animationId = null;
let lastWheelEnd = 0;
const COOLDOWN = 120; // ms after animation before next wheel registers (filters trackpad inertia)
const DURATION = 1400; // ms — section transition duration; tune for feel
const easeInOutCubic = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const animateTo = (target) => {
if (animationId) cancelAnimationFrame(animationId);
isAnimating = true;
const start = root.scrollTop;
const distance = target - start;
const startTime = performance.now();
const step = (now) => {
const elapsed = now - startTime;
const t = Math.min(elapsed / DURATION, 1);
root.scrollTop = start + distance * easeInOutCubic(t);
if (t < 1) {
animationId = requestAnimationFrame(step);
} else {
isAnimating = false;
animationId = null;
lastWheelEnd = performance.now();
}
};
animationId = requestAnimationFrame(step);
};
const sectionsList = () => Array.from(root.querySelectorAll("section"));
const currentIndex = () => {
const sections = sectionsList();
const top = root.scrollTop;
let bestIdx = 0, bestDist = Infinity;
sections.forEach((s, i) => {
const d = Math.abs(s.offsetTop - top);
if (d < bestDist) { bestDist = d; bestIdx = i; }
});
return bestIdx;
};
const onWheel = (e) => {
e.preventDefault();
// Suppress when mobile menu (or any modal) has body scroll lock active
if (document.body.style.overflow === "hidden") return;
const now = performance.now();
if (isAnimating) return;
if (now - lastWheelEnd < COOLDOWN) return;
const sections = sectionsList();
if (!sections.length) return;
const cur = currentIndex();
const dir = e.deltaY > 0 ? 1 : -1;
const next = Math.max(0, Math.min(sections.length - 1, cur + dir));
if (next === cur) return;
animateTo(sections[next].offsetTop);
};
const onKey = (e) => {
const keys = ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "];
if (!keys.includes(e.key)) return;
if (document.body.style.overflow === "hidden") return;
e.preventDefault();
if (isAnimating) return;
const sections = sectionsList();
if (!sections.length) return;
const cur = currentIndex();
let next = cur;
if (e.key === "ArrowDown" || e.key === "PageDown" || e.key === " ") next = cur + 1;
else if (e.key === "ArrowUp" || e.key === "PageUp") next = cur - 1;
else if (e.key === "Home") next = 0;
else if (e.key === "End") next = sections.length - 1;
next = Math.max(0, Math.min(sections.length - 1, next));
if (next === cur) return;
animateTo(sections[next].offsetTop);
};
// Expose nav-jump function so TopBar nav links use the same smooth animation
window.__dtScrollToId = (selector) => {
const target = root.querySelector(selector);
if (target) animateTo(target.offsetTop);
};
root.addEventListener("wheel", onWheel, { passive: false });
window.addEventListener("keydown", onKey);
return () => {
root.removeEventListener("wheel", onWheel);
window.removeEventListener("keydown", onKey);
if (animationId) cancelAnimationFrame(animationId);
delete window.__dtScrollToId;
};
}, []);
return (
);
};
window.VariationA = VariationA;