/* sections.jsx — 다힘 v4 (브리프 v2 + 사용자 맥락) */ const { useState, useEffect, useRef } = React; // ─── 공용 ──────────────────────────────────────────────── const Eyebrow = ({ children, orange }) => ( {children} ); const SectionHead = ({ tag, title, sub, orange, align = "left", mb = 56 }) => (
{tag}

{title}

{sub &&

{sub}

}
); // ═══════════════════════════════════════════════════════════ // 1. HERO // ═══════════════════════════════════════════════════════════ const Hero = () => (
울산 입시 명문 · 20년+ · {(() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); const tenK = Math.round(t/10000); return tenK; })()}만 문항 · 캠퍼스 2곳

잊지 않게 가르치고,
매일 부모님께
보고합니다.

1·3·7·30일 자동 복습 · 3회 연속 정답 시 ‘정복’ · 매일 18시 학부모 알림 · 매주 일요일 21시 주간 요약 · 매월 1일 월간 리포트. 학원이 자동으로 합니다.

원장 직강 100%
리드인(독서) + 입시·내신
출판사·학년·학교 매칭
); // 잔디 캘린더 (GitHub-style heatmap) + 1·3·7·30 highlights const HeroGrass = () => { // 7 rows × 12 weeks const rows = 7; const cols = 12; // synthetic learning pattern const heat = Array.from({ length: rows * cols }).map((_, i) => { const r = i % rows; const c = Math.floor(i / rows); if (r === 6) return 0; // Sunday off // gradient pattern with some intensity const v = Math.max(0, Math.min(4, Math.round(((c + r * 0.3) % 5) + (Math.sin(i) > 0 ? 1 : 0)))); return v; }); // 1·3·7·30 highlighted markers const highlights = { 12: 1, 14: 3, 18: 7, 41: 30 }; const palette = ["var(--surface-soft)", "#dbeafe", "#93c5fd", "#3b82f6", "#1d4ed8"]; return (
잔디 · 12주 학습 누적
오늘까지 67일 연속
+1
{/* grass grid */}
{heat.map((v, i) => { const h = highlights[i]; return (
{h && ( D+{h} )}
); })}
{/* legend */}
적음
{palette.map((c, i) =>
)}
많음
1·3·7·30일 자동 복습
); }; // Daily Report 미리보기 (SMS) const HeroDailyReport = () => (
학부모 SMS · 매일 18시 18:02
[다힘국어]
김OO 학생 오늘 보고서
입실 16:42 · 학습 5회 · 메타인지 82점 · 정복 1건
자세히 보기 →
); const HeroTimeCapsule = () => (
30일 시간 캡슐
한 달 전
30%
이해도
지금
85%
이해도
); // ═══════════════════════════════════════════════════════════ // 2. 학부모 3대 불안 → 다힘의 답 // ═══════════════════════════════════════════════════════════ const Anxieties = () => { const data = [ { qTop: "“우리 아이가 진짜", qBot: "공부하고 있는 건가?”", sys: "키오스크 입실 + 회차별 학습 로그", icon: , body: "학원 자체 키오스크로 입퇴실 시각·관(room)·학생을 3중 기록합니다. 정독 시간이 초 단위로 추적되고, 입실 즉시 학부모께 자동 통보됩니다.", }, { qTop: "“한 번 틀린 걸 또", qBot: "틀리지 않을까?”", sys: "약점 자동 반복 보완 시스템", icon: , body: "틀린 문제는 자동으로 오답 데이터베이스에 모입니다. 변형 출제와 반복학습을 통해 같은 약점을 두 번 틀리지 않게 만들고, 졸업할 때 한 권의 약점 노트로 정리해 드립니다.", accent: true, }, { qTop: "“3개월 보냈는데 진짜", qBot: "나아진 게 맞나?”", sys: "30일 성장판 · 월간 비교 리포트", icon: , body: "한 달 전 점수·풀이 속도·문해력 지표와 오늘을 나란히 비교합니다. 매월 자동 그래프로 보내드립니다. 막연한 느낌이 아닌 데이터로 확인하세요.", }, ]; return (
가장 궁금한 세 가지에
시스템이 답합니다.} sub="학원이 매일 자동으로 추적하고, 학부모가 매일 알림으로 확인합니다." />
{data.map((d, i) => (
{/* 큰 질문 헤더 — 배경에 흐릿한 Q + 위 왼쪽/아래 오른쪽 정렬 */}
{/* 큰 Q&A 워터마크 */}
Q&A
{/* 질문 두 줄 (위=좌, 아래=우) */}
{d.qTop}
{d.qBot}
{d.icon}
다힘의 답
{d.sys}

{d.body}

))}
); }; // ═══════════════════════════════════════════════════════════ // 2-B. 다힘의 학습 동선 — 첫 등원부터 졸업까지 한 톱니바퀴처럼 // ═══════════════════════════════════════════════════════════ const DahimSystem = () => { const steps = [ { n: "01", title: "메타인지 진단", lead: "아는 것과 모르는 것을 철저히 분리", icon: , color: "var(--primary)", bg: "var(--primary-50)", items: [ "메타인지 시험으로 학생의 실제 실력을 정확히 측정", "읽기 속도와 문해력을 모두 수치화", "강·약점이 데이터로 명확히 도출됩니다", ], }, { n: "02", title: "맞춤형 자동 처방", lead: "약점은 그 자리에서 처방됩니다", icon: , color: "var(--accent)", bg: "var(--accent-50)", highlight: true, items: [ "읽기 속도 느린 학생 → 자동 읽기 훈련 즉시 시작", "문해력 약한 학생 → 비문학 짧은 문장부터 긴 글까지 단계별 요약 정리 습관화", "집중력 훈련으로 글을 읽어내는 힘을 키웁니다", ], }, { n: "03", title: "1·3·7·30일 반복학습", lead: "그날 배운 내용을 완전히 자기 것으로", icon: , color: "var(--primary)", bg: "var(--primary-50)", items: [ "수업과 별개로 메타인지 시스템 작동", "배운 내용을 1일·3일·7일·30일 자동 반복", "동영상 강의로 부족한 부분을 매번 보완", ], }, { n: "04", title: "개별 약점 자기학습", lead: "약한 부분은 따로, 끝까지", icon: , color: "#6f42c1", bg: "rgba(111,66,193,0.08)", items: [ "문법이 약한 학생 → 학원 시스템 문법 강좌 자기학습", "개념이 약한 학생 → 개념어 강좌 자기학습", "학생 본인의 페이스로 부족한 부분을 끝까지 채워줍니다", ], }, { n: "05", title: ((() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); return t.toLocaleString() + '+ 문제 시험 대비'; })()), lead: "방대한 양으로 실전을 압도", icon: , color: "var(--accent)", bg: "var(--accent-50)", items: [ ((() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); return '내신·모의 ' + t.toLocaleString() + '문항 자체 문제은행'; })()), "틀린 문제는 자동으로 오답 데이터베이스에 수집", "오답노트로 변환되어 반복학습으로 약점 정복", ], }, { n: "06", title: "수시·정시·학종 컨설팅", lead: "학생부 한 장이면 모든 입시 전략", icon: , color: "var(--green)", bg: "var(--green-50)", items: [ "학생부 기록 기반으로 목표 대학 정밀 분석", "수시·정시·학종 통합 전략과 최저등급 관리", "면접 준비까지 끝까지 동행합니다", ], }, ]; return (
다힘은 등원 첫날부터
한 톱니바퀴처럼 움직입니다.} sub="학생을 평가하는 기준부터 기존 학원들과 완전히 다릅니다. 진단 → 처방 → 반복 → 개별 보충 → 시험 대비 → 입시 컨설팅까지, 여섯 단계가 끊김 없이 자동으로 이어집니다." />
{steps.map((s) => (
{s.icon} STEP {s.n}
{s.lead}

{s.title}

    {s.items.map((it, i) => (
  • {it}
  • ))}
))}
{/* closing — 학원 지향점 */}
OUR COMMITMENT · 다힘의 지향점

처음부터 끝까지, 게으름은 허락하지 않습니다.
학생의 성적, 우리가 반드시 잡아냅니다.

지금 진단 받기
); }; // ═══════════════════════════════════════════════════════════ // 3. WHY DAHIM 5 + 원장 직강 // ═══════════════════════════════════════════════════════════ const WhyFive = () => (
“최고”라고 말하지 않습니다.
시스템으로 보여드립니다.} sub="20년 노하우 · 데이터로 증명하는 학습. 다섯 가지를 한 화면에 정리했습니다." />
{/* 1. Director card (large, 2x2) — 원장 직강 */}
FOUNDER · 원장 직강

20년 동안 한 권도
외주에 맡기지 않았습니다.

모든 수업은 원장이 직접. AI 출제 문제도 학생 화면 그대로 미리보기로 검수한 뒤에만 공개합니다.

{[ { k: "20년+", v: "교육 경력" }, { k: "100%", v: "원장 직강" }, { k: "전수", v: "AI 문항 검수" }, { k: "1:1", v: "출결 흔들리면 직접 상담" }, ].map((c) => (
{c.k}
{c.v}
))}
{/* portrait stamp */}
이상헌
{/* 4 small punch cards */} {[ { n: "01", title: "매일 자동으로 보고", body: "18시 학습 알림 · 일요일 21시 주간 요약 · 매월 1일 월간 리포트. 안 물어봐도 학원이 먼저 알립니다.", icon: , color: "var(--primary)", }, { n: "02", title: "3번 틀린 문제는 안 넘어갑니다", body: "Conquer가 변형 출제 → 3회 연속 정답까지 추적 → 졸업할 때 ‘정복 책’ PDF.", icon: , color: "var(--accent)", }, { n: "03", title: "한 달 전 나 vs 지금 나", body: "Time Capsule이 점수·풀이 속도·문장 길이까지 비교. 성장은 막연한 느낌이 아닌 그래프.", icon: , color: "var(--green)", }, { n: "04", title: "출판사·학교 정밀 매칭", body: "미래엔·비상·천재 출판사별, 작품 단위까지. 진짜 시험과 같은 형식·범위로", icon: , color: "var(--primary)", }, ].map((c) => (
{c.icon} {c.n}

{c.title}

{c.body}

))}
); // ═══════════════════════════════════════════════════════════ // 4. SYSTEM — 7 cards (refined) // ═══════════════════════════════════════════════════════════ const System = () => { const items = [ { n: "01", title: "1·3·7·30일 자동 예약 학습", primary: true, span: 2, body: "수업을 들으면 시스템이 자동으로 다음 학습 일정을 잡아 큐에 넣습니다. 호기심→정독→인출→확신도→자기설명 5단계로 진행되며 정독 시간이 초 단위로 추적됩니다.", icon: , visual: , }, { n: "02", title: "AI 출제 + 원장 검수 게이트", body: "교과서 PDF에서 회차별 문제 세트가 자동 생성됩니다. 모든 문제는 원장이 학생 화면 그대로 미리보기 후 공개합니다.", icon: , visual: , }, { n: "03", title: "Conquer — 3회 연속 정답이면 정복", body: "오답이 다른 회차에서 변형되어 다시 만납니다. 3번 연속 정답이면 ‘정복’. 졸업할 때 책으로 묶입니다.", icon: , visual: , }, { n: "04", title: "30일 Time Capsule", body: "1·3·7·30일 라운드를 끝낸 단원은 한 달 전과 지금이 나란히 비교됩니다. ‘처음 30% → 지금 85%’ 같은 시각화.", icon: , visual: , }, { n: "05", title: "Signals — 학습 신호등", body: "메타인지 제출률·정확성, 영상 집중도, 플래너 실행률을 신호등(녹·황·적)으로. 부모도 학생도 한눈에.", icon: , visual: , }, { n: "06", title: "출판사·학교 정밀 매칭", body: "미래엔·비상·천재 출판사별, 작품 단위(예: 미래엔 ‘스노우맨’, 비상 ‘흰 바람벽이 있어’)까지", icon: , visual: , }, { n: "07", title: "시험직전요약", body: "시험 1주일 전, 회차별 핵심만 한 페이지로. 동영상 강의에서도 즉시 호출, 풀스크린 모달.", icon: , visual: , }, ]; return (
가르치는 일과
가르친 뒤의 일을 한 시스템으로} sub="학생은 ‘오늘 할 일’만 보면 됩니다. 잊지 않게 만드는 일은 시스템이 합니다." />
{items.map((it) => )}
); }; const SystemCard = ({ item }) => (
{item.icon} {item.n}

{item.title}

{item.body}

{item.visual &&
{item.visual}
}
); // ── 시스템 카드 시각 ───────────────────────────────── const VisSpaced = () => (
오늘 푼 한 문제의 일정 5단계 · 메타인지
{[ { d: "D+1", label: "학습", c: "var(--accent)" }, { d: "D+3", label: "1차 복습", c: "var(--primary)" }, { d: "D+7", label: "2차 복습", c: "var(--primary)" }, { d: "D+30", label: "확신", c: "var(--green)" }, ].map((s, i) => (
{i === 0 ? : i + 1}
{s.d}
{s.label}
))}
{["호기심", "정독", "인출", "확신도", "자기설명"].map((s, i) => (
{s}
))}
); const VisAI = () => (
PDF → AI 문항 32개 생성
원장 학생화면 검수
is_active=1 · 공개
); const VisConquer = () => (
같은 약점 3회 정답까지
{[true, true, false, true, true, true].map((ok, i) => (
{ok ? : }
))} 3연속 → 정복
); const VisCapsule = () => (
30일 전
30%
이해도
지금
85%
이해도
); const VisSignals = () => (
{[ { k: "메타인지 제출", v: "녹", c: "var(--green)", bg: "var(--green-50)" }, { k: "영상 집중도", v: "황", c: "var(--amber)", bg: "var(--amber-50)" }, { k: "플래너 실행", v: "녹", c: "var(--green)", bg: "var(--green-50)" }, ].map((s) => (
{s.k} {s.v}
))}
); const VisMatch = () => (
{["미래엔", "고2", "방민호 ‘스노우맨’", "2026 1학기"].map((c, i) => ( {c} ))}
맞춤 문제 124개 · 작품 단위 정밀 매핑
); const VisSummary = () => (
시험 1주 전 · 회차 12-18
{["화자 정서 정리", "고전운문 표현법 ×4", "안긴문장 5종"].map((t) => (
{t}
))}
); Object.assign(window, { Eyebrow, SectionHead, Hero, Anxieties, DahimSystem, WhyFive, System });