); } return null; } // i18n strings — Korean primary, EN/中文 secondary const I18N = { ko: { nav_features: '기능', nav_presets: '프리셋', nav_pricing: '플랜', nav_faq: 'FAQ', nav_upgrade: 'Pro로 업그레이드', nav_login: '로그인', nav_mypage: '마이페이지', brand_name: 'Chroma AI', brand_tagline: '당신의 AI를, 당신답게', eyebrow: '설치 완료 · v0.1.0', hero_h1_a: 'AI 챗봇을\n당신의 공간으로.', hero_h1_b: '당신의 AI,\n당신만의 AI.', hero_sub: 'Claude · ChatGPT · Gemini, 당신의 AI를 당신만의 색으로.\n사이드바 하나로 AI 챗봇을 자유롭게 커스터마이즈하세요.', cta_primary: '다운로드', cta_secondary: '테마 적용해주기', scroll_hint: '아래로 스크롤하기', section_compare: '같은 챗봇,\n전혀 다른 공간', section_compare_sub: '한 번의 클릭으로 익숙한 화면이 새로워집니다', before: 'Before', after: 'After - Chroma AI 적용', section_platforms: '지원 플랫폼', section_platforms_sub: '지금 바로 사용 가능', section_presets: '당신만을 위한 12종의 무료 프리미엄 프리셋', section_presets_sub: '클릭 한 번으로 배경·강조·텍스트 색상이 한꺼번에 바뀝니다', section_steps: '3단계로 시작하기', step1_t: '확장 핀 고정', step1_d: '브라우저 우측 상단 퍼즐 아이콘에서 AI Theme Engine을 핀으로 고정하세요.', step2_t: '챗봇 페이지 열기', step2_d: 'ChatGPT, Claude, Gemini 어느 곳이든 평소처럼 접속합니다.', step3_t: '아이콘 클릭', step3_d: '브라우저 우측 상단에 핀 고정한 Chroma AI 아이콘을 클릭하면 페이지 우측에 에디터 사이드바가 슬라이드 인.', section_plan: '두 가지 플랜', plan_free: 'Free', plan_free_price: '₩0', plan_free_desc: '핵심 기능 무료 사용', plan_pro: 'Pro', plan_pro_price: '$0/월', plan_pro_regular_price: '$2.99/월', plan_pro_desc: '기간 한정 Pro 플랜 무료 배포 (결제 불필요)', plan_promo_badge: '기간 한정 무료', plan_promo_off: '100% OFF', plan_promo_note: '정규가 $2.99/월 → 현재 회원가입 시 완전 무료', plan_current: '지금 사용 중', plan_upgrade: 'Pro 플랜 무료로 받기', plan_pro_active: 'Pro 혜택 적용됨', f_presets: '12종 컬러 프리셋', f_solid: '단색 그라디언트 배경', f_overlay: '색상 오버레이', f_glass: '글라스 효과 (블러)', f_media5: '미디어 배경 (이미지·영상) 5회', f_media_unlimited: '미디어 배경 무제한', f_filter: '배경 필터 (흑백·세피아·비비드)', f_pro_editor: 'PRO 에디터 — 라이브 프리뷰', f_fonts: '맞춤형 폰트', f_support: '커스텀 테마 프리셋 이용 가능', badge_new: 'NEW', badge_beta: 'BETA', hero_badge: '신규 · 커스텀 테마 프리셋', section_custom: '커스텀 테마 프리셋', section_custom_sub: '익숙한 그 앱처럼 — 메신저·시트 스타일로 챗봇 레이아웃을 바꿔보세요', custom_msg_name: 'Messenger', custom_msg_desc: '메신저 앱처럼 — 사이드 레일과 말풍선 중심의 친근한 대화 레이아웃', custom_sheet_name: 'Sheet', custom_sheet_desc: '스프레드시트처럼 — 정돈된 그리드와 셀 기반의 깔끔한 집중 레이아웃', footer_made: 'Copyright © ComfortOne Co.,Ltd. All rights reserved.', footer_privacy: '개인정보처리방침', footer_terms: '이용약관', footer_support: '지원', footer_trademark: 'ChatGPT · Claude · Gemini는 각 권리자의 상표입니다. Chroma AI는 어떤 회사와도 제휴되지 않은 독립적인 외부 도구입니다.', open_sidebar_hint: '당신의 챗봇에게 선물하세요.', footer_cta_a: '지금 바로', footer_cta_b: '새로운 분위기', footer_cta_c: '를', compare_cap_before: '', compare_cap_after: '', chat_titles: ['아이디어 정리', '코드 리뷰', '여행 계획', '독서 메모', '주간 보고서'], chat_new: '새 채팅', chat_search: '채팅 검색', chat_recent: '최근 항목', chat_user_1: '오늘 일정 정리해줘 — 회의 3개랑 점심 약속 있어.', chat_bot: '오늘 일정을 정리해드릴게요. 우선순위 기준으로 묶었습니다.', chat_sched: ['• 10:00 디자인 리뷰 (45분)', '• 12:30 점심 — 카페 로비', '• 14:00 PRD 싱크 (1시간)', '• 16:00 1:1 (30분)'], chat_user_2: '완벽해, 고마워!', chat_input: '무엇이든 물어보세요…' }, en: { nav_features: 'Features', nav_presets: 'Presets', nav_pricing: 'Plans', nav_faq: 'FAQ', nav_upgrade: 'Upgrade to Pro', nav_login: 'Sign in', nav_mypage: 'My Page', brand_name: 'Chroma AI', brand_tagline: 'Customize your AI', eyebrow: 'Installed · v0.1.0', hero_h1_a: 'Make any AI chat\nfeel like yours.', hero_h1_b: 'Your AI,\nFit Your Imagination', hero_sub: 'Customize your AI — Claude, ChatGPT, Gemini\nBackgrounds, colors and marvelous effects, all from a single sidebar', cta_primary: 'Download', cta_secondary: 'Apply theme', scroll_hint: 'Scroll down', section_compare: 'Same chatbot,\nA whole new space', section_compare_sub: 'One click turns the familiar into something new', before: 'Before', after: 'After — Applying Chroma AI', section_platforms: 'Supported Platforms', section_platforms_sub: 'Available today', section_presets: '12 free Premium presets', section_presets_sub: 'Background, accent and text colors swap together in one click', section_steps: 'Get started in 3 steps', step1_t: 'Pin the extension', step1_d: 'Click the puzzle icon in the top right of your browser and pin AI Theme Engine.', step2_t: 'Open any chatbot', step2_d: 'Visit ChatGPT, Claude or Gemini as you normally would.', step3_t: 'Click the icon', step3_d: 'Click the pinned Chroma AI icon in the top right of your browser and the editor sidebar slides in from the right.', section_plan: 'Two simple plans', plan_free: 'Free', plan_free_price: '$0', plan_free_desc: 'Core features, free forever', plan_pro: 'Pro', plan_pro_price: '$0/mo', plan_pro_regular_price: '$2.99/mo', plan_pro_desc: 'Limited time free distribution (No payment required)', plan_promo_badge: 'FREE PROMO', plan_promo_off: '100% OFF', plan_promo_note: 'Regular $2.99/mo → Free for a limited time', plan_current: 'Current plan', plan_upgrade: 'Get Pro for Free', plan_pro_active: 'Pro benefit active', f_presets: '12 color presets', f_solid: 'Solid + gradient backgrounds', f_overlay: 'Color overlay', f_glass: 'Glass blur effect', f_media5: 'Media backgrounds (5 changes)', f_media_unlimited: 'Unlimited media backgrounds', f_filter: 'Background filters (gray · sepia · vivid)', f_pro_editor: 'PRO editor — live preview', f_fonts: 'Custom fonts', f_support: 'Custom theme presets available', badge_new: 'NEW', badge_beta: 'BETA', hero_badge: 'New · Custom theme presets', section_custom: 'Custom theme presets', section_custom_sub: 'Like the apps you know — re-skin your chatbot as a messenger or a sheet', custom_msg_name: 'Messenger', custom_msg_desc: 'Messenger-style — a friendly layout built around a side rail and chat bubbles', custom_sheet_name: 'Sheet', custom_sheet_desc: 'Spreadsheet-style — a focused, grid-and-cell layout that keeps things tidy', footer_made: 'Copyright © ComfortOne Co.,Ltd. All rights reserved.', footer_privacy: 'Privacy', footer_terms: 'Terms', footer_support: 'Support', footer_trademark: 'ChatGPT, Claude, and Gemini are trademarks of their respective owners. Chroma AI is an independent third-party tool, not affiliated with any of these companies.', open_sidebar_hint: 'A gift for your chatbot.', footer_cta_a: 'Start the', footer_cta_b: 'new mood', footer_cta_c: ', now', compare_cap_before: '', compare_cap_after: '', chat_titles: ['Idea notes', 'Code review', 'Trip plan', 'Reading log', 'Weekly report'], chat_new: 'New chat', chat_search: 'Search chats', chat_recent: 'Recent', chat_user_1: 'Summarize my day — 3 meetings and lunch.', chat_bot: 'Here’s your day, grouped by priority.', chat_sched: ['• 10:00 Design review (45m)', '• 12:30 Lunch — Café Lobby', '• 14:00 PRD sync (1h)', '• 16:00 1:1 (30m)'], chat_user_2: 'Perfect, thanks!', chat_input: 'Ask anything…' } }; // Detect initial UI language. A stored preference (shared with the legal / // upgrade pages via legal.js, same `chroma-lang` key) wins, so the language // choice stays in sync when navigating between the React landing page and the // static legal/upgrade pages. Falls back to the browser locale, then English. function detectInitialLang() { try { const stored = localStorage.getItem('chroma-lang'); if (stored === 'ko' || stored === 'en') return stored; } catch {/* storage unavailable */} try { const langs = navigator.languages && navigator.languages.length ? navigator.languages : [navigator.language || 'en']; for (const l of langs) { const tag = String(l).toLowerCase(); if (tag.startsWith('ko')) return 'ko'; if (tag.startsWith('en')) return 'en'; } } catch {/* SSR or unavailable */} return 'en'; } // ChatGPT-ish mockup component used for Before/After comparison. // `theme` controls colors. When `themed`, applies a wallpaper-style bg. function ChatGPTMockup({ themed = false, preset, scale = 1, width = 520, height = 340, lang = 'ko' }) { const p = preset || COLOR_PRESETS[1]; // Frost const tt = I18N[lang] || I18N.ko; const baseBg = themed ? p.bg : '#ffffff'; const sidebarBg = themed ? 'transparent' : '#f9f9f9'; const textCol = themed ? p.text : '#0d0d0d'; const subText = themed ? `${p.text}b3` : '#5d5d5d'; const bubbleUser = themed ? `${p.accent}33` : '#e9e9e9'; const bubbleBot = themed ? 'rgba(255,255,255,0.04)' : 'transparent'; const inputBg = themed ? 'rgba(255,255,255,0.06)' : '#f4f4f4'; const borderC = themed ? 'rgba(255,255,255,0.08)' : '#e7e7e7'; const wallpaperBg = themed ? ` radial-gradient(ellipse 80% 60% at 15% 10%, ${p.accent}33 0%, transparent 55%), radial-gradient(ellipse 60% 80% at 85% 90%, ${p.accent}22 0%, transparent 55%), radial-gradient(circle at 50% 40%, rgba(255,255,255,0.04) 0%, transparent 40%), linear-gradient(160deg, ${p.bg} 0%, ${p.accent}1f 35%, ${p.bg} 65%, ${p.accent}14 100%) ` : '#ffffff'; const chats = [tt.chat_new, ...tt.chat_titles]; const bodyFont = lang === 'ko' ? "'Pretendard', system-ui, sans-serif" : "'Inter', 'Pretendard', system-ui, sans-serif"; return (

{/* Sidebar */}

{tt.chat_new}

{tt.chat_search}

{tt.chat_recent}

{tt.chat_titles.map((c, i) =>

{c}

)}

{/* Main */}

{/* Header */}

ChatGPT

{/* Messages */}

{tt.chat_user_1}

{tt.chat_bot}

{tt.chat_sched.map((line, i) =>

{line}

)}

{tt.chat_user_2}

{/* Input */}

{tt.chat_input}

); } // Language switcher (KO / EN) function LangSwitch({ value, onChange, theme = 'light' }) { const langs = [['ko', '한국어'], ['en', 'English']]; const isDark = theme === 'dark'; return (

{langs.map(([id, label]) => )}

); } // Keyboard combo chip — used in hero hint function Kbd({ children, theme = 'light' }) { const isDark = theme === 'dark'; return ( {children}); } // Compact preset swatch matching the one in editor-sidebar.js function PresetSwatch({ p, size = 64, label = true, onHover }) { return (

{label && {p.name}}

); } Object.assign(window, { COLOR_PRESETS, BRAND, I18N, ATELogo, ChromaLogo, PlatformIcon, ChatGPTMockup, LangSwitch, Kbd, PresetSwatch, Reveal, detectInitialLang }); // ─── Reveal — fade + lift on scroll into view ──────────────────────────── // Wrap any element; defaults: 24px lift, 700ms, easeOutCubic-ish. // Pass `delay` (ms) for staggered children. Once visible, stays visible. function Reveal({ children, delay = 0, duration = 700, y = 24, threshold = 0.12, as: As = 'div', style, ...rest }) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; // Respect prefers-reduced-motion — show immediately, no transform/transition. const prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (prefersReduce) {setVisible(true);return;} const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); io.unobserve(e.target); } }); }, { threshold, rootMargin: '0px 0px -40px 0px' } ); io.observe(el); return () => io.disconnect(); }, [threshold]); return ( {children} ); }