// top.jsx — 공용 컴포넌트 + 상단 띠 + 헤더 + 히어로(좌: 키카피 / 우: 학부모 후기) // ─── 공용: 태그 칩 ─── const Tag = ({ children }) => ( {children} ); // ─── 공용: 솔루션 탭 ─── const SolutionTabs = ({ tabs, activeIdx, setActiveIdx }) => (

{tabs.map((tab, i) => ( ))}

); // ─── 공용: 탭 이미지 ─── const TabImageSwitcher = ({ tabs, activeIdx, ratio }) => (

{tabs.map((tab, i) => ( {tab.label}

))}

); // ─── 상단 띠 ─── function RealtimeCounter() { return (

지금 이 순간, 원장님들께 돌려드리고 있는 시간: {HOURS_DISPLAY}시간

반복 업무에 쓰이던 시간이 이제 아이들을 더 잘 가르치는 데 쓰이고 있어요

); } // ─── 헤더 ─── function Header() { const [open, setOpen] = React.useState(false); return (

{/* 왼쪽: 로고 + 내비 */}

{ e.target.style.display = "none"; }} />

{/* 오른쪽: 계정 액션 (데스크톱) */}

로그인 3일 무료체험 →

{/* 햄버거 (모바일) */}

{/* 모바일 드로어 */}

기능 한눈에 보기 솔루션 FAQ 블로그 로그인 3일 무료체험 →

); } // ─── 후기 카드 (캐러셀) ─── function ReviewCard() { const [idx, setIdx] = React.useState(0); const n = REVIEWS.length; const go = (d) => setIdx((p) => (p + d + n) % n); React.useEffect(() => { const id = setInterval(() => setIdx((p) => (p + 1) % n), 6000); return () => clearInterval(id); }, [n]); const r = REVIEWS[idx]; const initial = r.name.trim().charAt(0); const isParent = r.role === "학부모"; const badgeStyle = isParent ? { background: "var(--primary)", color: "#fff" } : { background: "var(--ink)", color: "#fff" }; return (

{/* 별점 + 역할 배지 */}

{[0, 1, 2, 3, 4].map((i) => )}

“{r.quote}”

{r.role}

{initial}

{r.name}

); } // ─── 히어로 ─── function Hero() { return (

{/* 좌측 — 키카피 */}

{/* 수상 배지 바 */}

{ e.target.style.display = "none"; }} /> 교육부장관상 수상

{ e.target.style.display = "none"; }} /> 동아시아 에듀테크 150

수업 준비부터
운영까지, 한 번에
영어 교육 올인원 플랫폼

선생님은 수업에 집중하고, 아이들은 더 깊이 배웁니다.

3일 무료체험 시작하기 →

카드 등록 불필요 · 정기결제 없이 즉시 사용

{/* 우측 — 학부모 후기 */}

); } Object.assign(window, { Tag, SolutionTabs, TabImageSwitcher, RealtimeCounter, Header, Hero, ReviewCard });

수업 준비부터 운영까지, 한 번에 영어 교육 올인원 플랫폼

수업 준비부터
운영까지, 한 번에
영어 교육 올인원 플랫폼