// uture — main app const { useState, useEffect, useRef, useMemo } = React; /* ====================== Icons ====================== */ const Icon = { ArrowRight: (p) => ( ), ArrowUpRight: (p) => ( ), Check: (p) => ( ), Lock: (p) => ( ), Compass: (p) => ( ), Trend: (p) => ( ), Users: (p) => ( ), Plus: (p) => ( ), }; /* ====================== Reveal Hook ====================== */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal, .reveal-stagger'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); els.forEach((el) => io.observe(el)); requestAnimationFrame(() => { els.forEach((el) => { const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.92 && rect.bottom > 0) { el.classList.add('in'); io.unobserve(el); } }); }); return () => io.disconnect(); }, []); } /* ====================== Counter ====================== */ function Counter({ to, suffix = '', duration = 1600 }) { const ref = useRef(null); const [val, setVal] = useState(0); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setVal(Math.round(to * eased)); if (t < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [to, duration]); return {val.toLocaleString()}{suffix}; } /* ====================== Nav ====================== */ function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } /* ====================== Hero ====================== */ function Hero({ variant }) { const heroRef = useRef(null); useEffect(() => { const el = heroRef.current; if (!el) return; const onScroll = () => { const y = window.scrollY; const glow = el.querySelector('.hero-glow'); const grid = el.querySelector('.hero-grid'); if (glow) glow.style.transform = `translateX(-50%) translateY(${y * 0.15}px)`; if (grid) grid.style.transform = `translateY(${y * 0.08}px)`; }; const onPointerMove = (event) => { const rect = el.getBoundingClientRect(); const x = ((event.clientX - rect.left) / rect.width - 0.5) * 2; const y = ((event.clientY - rect.top) / rect.height - 0.5) * 2; el.style.setProperty('--hero-aura-x', `${(x * 18).toFixed(2)}px`); el.style.setProperty('--hero-aura-y', `${(y * 14).toFixed(2)}px`); }; window.addEventListener('scroll', onScroll, { passive: true }); el.addEventListener('pointermove', onPointerMove, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); el.removeEventListener('pointermove', onPointerMove); }; }, []); if (variant === 'conservative') { return (
2026 AX Transformation Partner

기업과 구성원,
한 명 한 명에 맞추는
AX 컨설팅

uture는 회사와 직무, 그리고 사람을 함께 봅니다.
구성원이 실제 업무에서 AI를 써서 일을 혁신할 때까지 — 밀착해서 동행합니다.

기업교육 문의하기 솔루션 살펴보기
); } if (variant === 'impact') { return (
지금 바로 유쳐와 함께하세요

기업에 진짜 필요한 AI 교육 배움에서 ✦ 실무로. 지식을 성과로 바꾸다

기업을 위한 맞춤형 AI/AX 교육

기업교육 문의하기
); } // Balanced (default) return (
AX Transformation Agency for Enterprise

기업과 사람에
1:1로 맞추는
uture.

기업 맞춤 · 조직원 맞춤 · 밀착 컨설팅.
구성원이 실제 업무에서 AI로 일하는 방식을 바꿀 때까지, uture가 함께 갑니다.

기업교육 문의하기 솔루션 살펴보기
); } function HeroTypingTitle() { const lines = useMemo(() => [ { text: '기업에 진짜 필요한 AI 교육', className: 'accent' }, { text: '배움에서 ✦ 실무로.', className: '' }, { text: '지식을 성과로 바꾸다', className: 'accent' }, ], []); const [visible, setVisible] = useState(() => lines.map(() => 0)); const [activeLine, setActiveLine] = useState(0); useEffect(() => { const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const charsByLine = lines.map((line) => Array.from(line.text)); if (reduceMotion) { setVisible(charsByLine.map((chars) => chars.length)); setActiveLine(null); return; } let lineIndex = 0; let charIndex = 0; let timer; const tick = () => { if (lineIndex >= charsByLine.length) { setActiveLine(null); return; } setActiveLine(lineIndex); charIndex += 1; const currentLine = lineIndex; const currentCount = charIndex; setVisible((prev) => { const next = [...prev]; next[currentLine] = currentCount; return next; }); if (charIndex >= charsByLine[lineIndex].length) { lineIndex += 1; charIndex = 0; timer = window.setTimeout(tick, 260); } else { timer = window.setTimeout(tick, 74); } }; timer = window.setTimeout(tick, 360); return () => window.clearTimeout(timer); }, [lines]); return (

{lines.map((line, index) => { const text = Array.from(line.text).slice(0, visible[index]).join(''); const showCursor = activeLine === index || (activeLine === null && index === lines.length - 1); return ( {text} {showCursor && } ); })}

); } function HeroMeta() { return (
밀착 컨설팅 기업
1:1 코칭 받은 구성원
%
재계약률
h
구성원 1인당 주간 절감
); } function HeroOrbital() { return ( ); } Object.assign(window, { Nav, Hero, Counter, Icon, useReveal });