// CLEARVERSE one-page intro site // Premium, minimal, futuristic. Deep navy background, neon-blue accent, // dot-particle dolphin hero. const { useState, useEffect, useRef } = React; // ---------- Tiny utility hooks ---------- const useInView = () => { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current || inView) return; let raf = 0; const check = () => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const vh = window.innerHeight || 0; // trigger when any part of the element is within (slightly inset) the viewport if (r.top < vh * 0.9 && r.bottom > vh * 0.05) { setInView(true); window.removeEventListener('scroll', check); window.removeEventListener('resize', check); return; } raf = requestAnimationFrame(() => {}); }; // initial check (run synchronously + on next frame + on a short delay // so we don't depend on a throttled rAF in a hidden iframe) check(); raf = requestAnimationFrame(check); const t1 = setTimeout(check, 50); const t2 = setTimeout(check, 250); window.addEventListener('scroll', check, { passive: true }); window.addEventListener('resize', check); return () => { cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2); window.removeEventListener('scroll', check); window.removeEventListener('resize', check); }; }, [inView]); return [ref, inView]; }; const useScrollY = () => { const [y, setY] = useState(0); useEffect(() => { const onScroll = () => setY(window.scrollY); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return y; }; // Returns 'mobile' (<640) | 'tablet' (<1024) | 'desktop' (>=1024) const useBreakpoint = () => { const get = () => { if (typeof window === 'undefined') return 'desktop'; const w = window.innerWidth; if (w < 640) return 'mobile'; if (w < 1024) return 'tablet'; return 'desktop'; }; const [bp, setBp] = useState(get); useEffect(() => { const on = () => setBp(get()); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, []); return bp; }; const isMobile = (bp) => bp === 'mobile'; const isTablet = (bp) => bp === 'tablet'; const isDesktop = (bp) => bp === 'desktop'; // ---------- Reveal wrapper ---------- const Reveal = ({ children, delay = 0, y = 24, as: As = 'div', ...rest }) => { const [ref, inView] = useInView(); return ( {children} ); }; // ---------- Navigation ---------- const Nav = ({ accent }) => { const y = useScrollY(); const bp = useBreakpoint(); const mobile = isMobile(bp); const [open, setOpen] = useState(false); const condensed = y > 20; const links = [ ['About', '#about'], ['Vision', '#vision'], ['What we do', '#direction'], ['Values', '#values'], ['Contact', '#contact'], ]; return ( ); }; const LogoMark = ({ accent }) => ( ); // ---------- Hero ---------- const Hero = ({ accent, density, intensity }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); return (
{/* Top label */}
A NEW DIGITAL FLOW
{/* Main copy */}

복잡한 세상을 명확하게, 작은 행동을 더 큰 가치로.

CLEARVERSE는 기술과 AI를 통해 사람·정보·행동·기회를 연결하는 플랫폼 컴퍼니입니다. {mobile ? ' ' :
} 아직 정의되지 않은 가능성 속에서, 우리는 더 명확하고 가치 있는 디지털 경험을 만들어갑니다.

회사 소개 보기 → 문의하기
{/* Scroll indicator (hidden on mobile to save space) */} {!mobile && (
SCROLL
)}
); }; // ---------- About ---------- const About = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); return (

CLEARVERSE는
명확한 연결을 만드는
회사입니다.

세상에는 좋은 정보, 좋은 서비스, 좋은 기회가 많습니다.
하지만 많은 사람들은 복잡한 과정 속에서 무엇을 선택해야 할지, 어떤 행동을 해야 할지 쉽게 알기 어렵습니다.

CLEARVERSE는 이 복잡함을 기술로 정리하고,
사람들의 행동이 더 나은 기회와 가치로 이어질 수 있도록 돕는 회사를 지향합니다.

{[ ['Clear', '명확함'], ['Connect', '연결'], ['Verse', '확장 가능한 세계'], ].map(([en, ko], i) => (
0 ? '1px solid rgba(120,170,255,0.12)' : 'none', }}>
{en}
{ko}
))}
); }; // ---------- Problems ---------- const Problems = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); const items = [ { k: '01', t: '정보는 많지만 명확하지 않습니다', b: '사용자는 수많은 정보 속에서 자신에게 필요한 선택을 찾기 어렵습니다.' }, { k: '02', t: '행동은 많지만 가치로 연결되지 않습니다', b: '사람들의 방문·참여·기록·선택은 의미 있는 데이터이지만 충분히 활용되지 못합니다.' }, { k: '03', t: '기업과 사용자는 더 좋은 연결이 필요합니다', b: '기업은 실질적 행동을 원하고, 사용자는 합당한 보상과 경험을 원합니다.' }, { k: '04', t: '기술은 더 쉽게 쓰여야 합니다', b: 'AI와 데이터는 복잡한 것을 더 복잡하게 만드는 것이 아니라, 더 쉽게 만들어야 합니다.' }, ]; return (

우리는 복잡함에서
기회를 봅니다.

{items.map((it, i) => (
{it.k}

{it.t}

{it.b}

))}
); }; const ProblemGlyph = ({ index, accent }) => { // Abstract micro-glyphs in the corner of each card const size = 120; return ( {index === 0 && Array.from({ length: 60 }).map((_, i) => { const x = 20 + (i % 8) * 11; const y = 20 + Math.floor(i / 8) * 11; const r = 0.6 + ((i * 13) % 7) / 4; return ; })} {index === 1 && ( {Array.from({ length: 8 }).map((_, i) => ( ))} )} {index === 2 && ( )} {index === 3 && ( {Array.from({ length: 12 }).map((_, i) => { const a = (i / 12) * Math.PI * 2; return ; })} )} ); }; // ---------- Direction ---------- const Direction = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); const tablet = isTablet(bp); const items = [ { n: '01', t: '행동 기반 플랫폼', b: '사람들의 일상 속 행동이 기록되고, 연결되고, 보상받는 플랫폼을 만들어갑니다.', tags: ['참여', '방문', '인증', '기록', '추천', '미션'], }, { n: '02', t: 'AI 기반 자동화', b: '반복적이고 복잡한 과정을 AI로 단순화하여, 더 빠르고 명확한 의사결정을 돕습니다.', tags: ['요약', '추천', '자동 분류', '콘텐츠 생성', '행동 분석'], }, { n: '03', t: '로컬·생활 연결', b: '지역·상점·사용자·서비스를 연결하여 실질적인 생활 기반 가치를 만듭니다.', tags: ['지역 상권', '생활 혜택', '방문 미션', '커뮤니티', '로컬'], }, { n: '04', t: '데이터 기반 가치 설계', b: '사용자의 행동과 선택을 데이터로 이해하고, 더 좋은 경험과 성과로 연결합니다.', tags: ['행동 분석', '성과 캠페인', '맞춤 추천', '리워드'], }, ]; return (

CLEARVERSE가
만들어갈 방향.

{items.map((it, i) => (
{it.n} /04

{it.t}

{it.b}

{it.tags.map(tag => ( {tag} ))}
))}
); }; // ---------- Values ---------- const Values = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); const tablet = isTablet(bp); const items = [ { k: 'Clear', ko: '명확함', d: '복잡한 것을 명확하게 정리합니다.', icon: 'clear' }, { k: 'Connect', ko: '연결', d: '사람, 정보, 서비스, 기회를 연결합니다.', icon: 'connect' }, { k: 'Action', ko: '행동', d: '생각보다 행동을 중요하게 봅니다.', icon: 'action' }, { k: 'Value', ko: '가치', d: '행동이 가치로 이어지는 구조를 만듭니다.', icon: 'value' }, { k: 'Growth', ko: '성장', d: '사용자·파트너·회사가 함께 성장합니다.', icon: 'growth' }, ]; return (

CLEARVERSE가
중요하게 생각하는 것.

{items.map((v, i) => (
{v.k}
{v.ko.toUpperCase()}

{v.d}

 ))}
); }; const ValueIcon = ({ kind, accent }) => { // Abstract dot/line glyphs const s = 56; return (
{kind === 'clear' && ( )} {kind === 'connect' && ( )} {kind === 'action' && ( )} {kind === 'value' && ( )} {kind === 'growth' && ( )}
); }; // ---------- Possibility ---------- const Possibility = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); return (

우리는 지금,
가능성을 설계하고 있습니다.

CLEARVERSE는 하나의 정해진 제품보다 더 넓은 가능성에서 출발합니다. 사람들의 행동, 지역의 기회, 기업의 니즈, AI 기술의 가능성을 연결하며 다양한 디지털 서비스와 플랫폼을 만들어갈 준비를 하고 있습니다.

“첫 번째 제품보다 중요한 것은,
우리가 어떤 문제를 해결하려 하는지입니다.”
); }; // ---------- Future Areas ---------- const FutureAreas = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); const areas = [ { k: 'Mission & Reward', d: '참여 행동을 가치로 전환하는 미션·리워드 구조' }, { k: 'AI Automation', d: '반복 업무와 복잡한 판단을 돕는 AI 기반 자동화' }, { k: 'Local Platform', d: '지역과 사용자를 연결하는 생활 밀착형 플랫폼' }, { k: 'Data Experience', d: '행동 데이터를 기반으로 한 사용자 경험 설계' }, { k: 'Digital Contents', d: '브랜드와 사용자를 연결하는 콘텐츠 기반 서비스' }, ]; return (

관심을 두고 있는
다섯 가지 흐름.

아직 확정된 사업이 아닌, 우리가 깊이 들여다보고 있는 방향입니다.

{areas.map((a, i) => (
0{i+1}

{a.k}

{mobile && (

{a.d}

)}
{!mobile && (

{a.d}

)}
))}
); }; // ---------- Closing message ---------- const Closing = ({ accent }) => { const bp = useBreakpoint(); return (

CLEARVERSE는 아직 완성된 답보다,
더 나은 질문에서 시작합니다.

우리는 사람들이 왜 움직이는지, 어떤 경험이 가치를 만드는지, 기술이 어떻게 일상을 더 명확하게 만들 수 있는지 고민합니다. CLEARVERSE는 이 질문들을 바탕으로 새로운 플랫폼과 서비스를 만들어가고 있습니다.

); }; // ---------- Contact ---------- const Contact = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); return (

함께 이야기할 준비가
되어 있습니다.

CLEARVERSE의 방향성, 협업, 투자, 서비스 제안과 관련해
궁금한 점이 있다면 편하게 연락해 주세요.

EMAIL
berryking@naver.com
BUSINESS
berryking@naver.com
LOCATION
Gyeonggi-do, Republic of Korea
); }; const ContactBg = ({ accent }) => ( ); // ---------- Footer ---------- const Footer = ({ accent }) => { const bp = useBreakpoint(); const mobile = isMobile(bp); return ( ); }; // ---------- Section eyebrow ---------- const SectionEyebrow = ({ accent, num, label, align = 'left' }) => (
{num} {label}
); // ---------- Shared styles ---------- const wrap = (bp) => ({ maxWidth: 1280, margin: '0 auto', padding: bp === 'mobile' ? '0 20px' : bp === 'tablet' ? '0 32px' : '0 40px', }); const sectionStyle = (bp) => ({ padding: bp === 'mobile' ? '90px 0' : bp === 'tablet' ? '120px 0' : '160px 0', }); const h2Style = (bp) => ({ fontFamily: 'var(--font-display)', fontSize: bp === 'mobile' ? 'clamp(28px, 8vw, 40px)' : 'clamp(32px, 4.4vw, 64px)', lineHeight: 1.12, letterSpacing: '-0.022em', fontWeight: 500, margin: 0, color: '#fff', textWrap: 'balance', wordBreak: 'keep-all', lineBreak: 'strict', overflowWrap: 'normal', }); const bodyStyle = { color: 'rgba(220,232,255,0.65)', fontSize: 16, lineHeight: 1.7, margin: 0, textWrap: 'pretty', wordBreak: 'keep-all', lineBreak: 'strict', overflowWrap: 'normal', }; // ---------- App ---------- const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#3FB6FF", "density": 1.0, "intensity": 1.0, "background": "deepNavy" }/*EDITMODE-END*/; const BG_PRESETS = { deepNavy: 'radial-gradient(ellipse at 50% 0%, #0a1834 0%, #050a1a 40%, #02060f 100%)', midnight: 'radial-gradient(ellipse at 50% 0%, #050a1f 0%, #02050e 50%, #000004 100%)', abyss: 'radial-gradient(ellipse at 50% 30%, #0a1438 0%, #060f25 50%, #030713 100%)', }; const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.body.style.background = BG_PRESETS[t.background] || BG_PRESETS.deepNavy; }, [t.background]); return (
); }; ReactDOM.createRoot(document.getElementById('root')).render();