import React, { useEffect, useRef, useState } from 'react'; import { motion, useInView, useScroll, useTransform, useAnimationControls, AnimatePresence } from 'framer-motion'; import { Menu, X, ArrowRight, ArrowUpRight, ClipboardList, Boxes, Truck, ShieldCheck, AlertTriangle, CheckCircle2, Layers, Cable, BadgeCheck, Rocket, Sparkles, } from 'lucide-react'; const services = [ { key: '기획', title: '기획', blurb: '소음 없이 새 프로그램을 체계적인 계획으로 전환합니다.', bullets: ['전담 프로그램 리더 배치', '의사결정 가능한 로드맵'], icon: ClipboardList, }, { key: '조달', title: '조달', blurb: '훨씬 적은 마찰로 공급사를 소싱하고 검증합니다.', bullets: ['조직 간 범위 정렬', '엔드투엔드 책임 소재'], icon: Boxes, }, { key: '물류', title: '물류', blurb: '예상치 못한 문제 없이 제때 필요한 자재를 이동합니다.', bullets: ['사양 및 적합성 검증', '변경 요청 관리'], icon: Truck, }, { key: '커미셔닝', title: '커미셔닝', blurb: '추측이 아닌 완전한 맥락으로 시스템을 가동합니다.', bullets: ['끊김 없는 워크플로우', '검증된 깔끔한 인수인계'], icon: ShieldCheck, }, ]; const problems = [ '근본적인 문제가 뒤늦게 드러나며 반복되는 소방수 대응', '핵심 팀의 역량을 갉아먹는 과도한 조율 업무', '신뢰할 수 없는 데이터로 인한 끊임없는 재확인', '공급사 관계 분절로 인해 어긋나는 산출물', '여러 시스템에 흩어진 사양과 의사결정 기록', ]; const solutions = [ '단계별 의존성 지도로 값비싼 리스크를 사전에 제거', '간소화된 팀 인수인계로 즉시 실행 가능한 결과 제공', '실시간 검증 루프로 모든 단계의 요구사항을 고정', '단일 책임 창구를 통한 통합 공급사 관리', '중앙화된 맥락과 명확한 기록으로 빠른 의사결정', ]; const deliverySteps = [ { key: '범위산정', label: '범위산정', icon: Layers, tags: ['조건', '용량', '사양', '일정'] }, { key: '통합', label: '통합', icon: Cable, tags: ['토목', '기계', '전기', '제어'] }, { key: '인증', label: '인증', icon: BadgeCheck, tags: ['이중화', '테스트', '규정 준수', '승인'] }, { key: '가동', label: '가동', icon: Rocket, tags: ['전환', '운영 매뉴얼', '인수인계', 'SLA'] }, ]; const fadeUp = { hidden: { opacity: 0, y: 28 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.6, delay: i * 0.09, ease: [0.16, 1, 0.3, 1] }, }), }; function useCountUp(target, startWhenInView, duration = 1600) { const [value, setValue] = useState(0); useEffect(() => { if (!startWhenInView) return; let raf; const start = performance.now(); const tick = (now) => { const p = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setValue(Math.round(target * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [startWhenInView, target, duration]); return value; } function SunburstBackground() { return (

); } function Navbar() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = ['서비스 소개', '진행 방식', '회사 소개', '인사이트']; return (

코어베이스

{links.map((l) => ( {l} ))}

{open && (

{links.map((l) => ( {l} ))}

)}

); } function Hero() { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-80px' }); const stat = useCountUp(530, inView); return (

오래 가는 인프라를 위한 설계 설계부터, 명확한 확장까지. 코어베이스는 인프라 소유자, 운영자, 공급사 팀이 미션 크리티컬 시스템에 대한 글로벌 빌드 표준을 지키도록 돕습니다. 무거운 작업 없이 팀과 지역, 프로그램을 하나로 정렬하세요.

착공부터 가동까지, 엔터프라이즈가 신뢰하는 파트너

끊임없는 변화 속에서도 운영의 명확함을 만듭니다.

{stat}MW+ 미션 크리티컬 인프라에서 검증

); } function CapabilityMarquee() { const controls = useAnimationControls(); const loopTransition = { duration: 26, repeat: Infinity, ease: 'linear' }; const flatTags = deliverySteps.flatMap((s) => s.tags); const doubled = [...flatTags, ...flatTags]; useEffect(() => { controls.start({ x: ['0%', '-50%'], transition: loopTransition }); }, []); return (

controls.stop()} onMouseLeave={() => controls.start({ x: ['0%', '-50%'], transition: loopTransition })} > {doubled.map((tag, i) => ( {tag} ))}

); } function ServiceCard({ service, index }) { const Icon = service.icon; return (

{service.title}

{service.blurb}

{service.bullets.map((b) => (

{b}

))}

); } function ServicesSection() { return (

{services.map((s, i) => ( ))}

); } function HighlightRow({ children, className }) { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] }); const opacity = useTransform(scrollYProgress, [0, 0.4, 0.6, 1], [0.3, 1, 1, 0.3]); const x = useTransform(scrollYProgress, [0, 0.5, 1], [-6, 0, -6]); return ( {children} ); } function ControlSection() { return (

통제

혼돈을 떠안지 마세요.
자신 있게 운영하세요.

지금까지는

{problems.map((p) => (

{p}

))}

코어베이스와 함께라면

{solutions.map((s) => (

{s}

))}

); } function DeliverySection() { return (

체계적인 딜리버리

하나로 통합된, 엔드투엔드 시스템.

코어베이스 팀은 프로그램을 지속시키는 데 필요한 것을 정확히 포착하고, 정렬하고, 검증하고, 전달합니다. 복리로 쌓이는 운영 가치를 경험하세요.

{deliverySteps.map((step, i) => { const Icon = step.icon; return (

{step.label}

{step.tags.map((t) => ( {t} ))}

); })}

); } function ClosingCTA() { return (

지금, 팀과 함께 시작하세요.

프로그램 규모와 상관없이, 첫 착공부터 가동까지 명확한 구조로 안내해 드립니다.

); } function Footer() { return ( ); } export default function App() { return (

); }

{service.title}

혼돈을 떠안지 마세요. 자신 있게 운영하세요.

하나로 통합된, 엔드투엔드 시스템.

{step.label}

지금, 팀과 함께 시작하세요.

혼돈을 떠안지 마세요.
자신 있게 운영하세요.