// Tilos — Landing page (single React component) // 섹션 1: 히어로(복도 + Tilos + 양옆 앱) — 기존 디자인 그대로 유지 // 섹션 2: Why Tilos (매표소) · 섹션 3: Our Apps (사막+석양, 앱 카드 5개) // 모든 배경 경로 / 앱 데이터는 상단 상수·배열로 분리 → 수치 조정 용이. const { useState, useEffect, useRef } = React; // ── 색 토큰 ── const COLORS = { dark: "#0d1020", warm: "#f4c98a", sand: "#f3ece0", }; // ── 섹션 배경 이미지 경로 ── const BG = { corridor: "assets/bg-corridor.jpg", boxoffice: "assets/sec2-boxoffice.jpg", // 사막+석양 이미지를 여기에 넣으면 자동 적용 (없으면 따뜻한 그라데이션 placeholder) desert: "assets/sec3-desert.jpg", }; // ── 글로우 / 그림자 ── const COPY_GLOW = "0 0 24px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.7)"; const BRAND_GLOW = "0 0 30px rgba(255,255,255,0.85), 0 0 14px rgba(255,255,255,0.6)"; const TEXT_SHADOW_DARK = "0 2px 18px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.6)"; // ════════════════════════════════════════════════════════════ // 섹션 1 — 히어로 데이터 // ════════════════════════════════════════════════════════════ const STAGE_W = 1440; const STAGE_H = 1024; const HERO_APPS = [ { id: "retirement", name: "퇴사계산기", image: "assets/app-retirement.png", side: "left", rotateY: 46, scale: 1, left: 13, top: 158, width: 260, height: 561 }, { id: "quotes", name: "JJ명언", image: "assets/app-quotes.png", side: "left", rotateY: 54, scale: 0.85, left: 296, top: 232, width: 194, height: 420 }, { id: "letter", name: "미래로 보내는 편지", image: "assets/app-letter.png", side: "right", rotateY: -54, scale: 0.85, left: 950, top: 232, width: 194, height: 420 }, { id: "fit", name: "핏트레이너", image: "assets/app-fit.png", side: "right", rotateY: -46, scale: 1, left: 1167, top: 158, width: 260, height: 561 }, ]; const HERO_COPY = [ "그리스 신화 속 섬 틸로스에서는 지친 이들에게 약초를 건넸습니다.", "Tilos는 불안한 당신에게 앱을 서비스합니다.", ]; // ════════════════════════════════════════════════════════════ // 섹션 2 — Why Tilos 데이터 // ════════════════════════════════════════════════════════════ const WHY_LINES = [ "퇴사를 고민하는 밤에는 감정 대신 숫자를,", "버틸 힘이 없는 아침에는 한 문장을,", "흔들리는 하루에는 작은 처방 하나를.", ]; const WHY_HEADLINE = "Tilos는 직장인·학생의 불안을 해결하는 앱을 만듭니다."; // ════════════════════════════════════════════════════════════ // 섹션 3 — Our Apps 데이터 (지그재그 배치 좌표 포함) // ════════════════════════════════════════════════════════════ // ── 섹션3 카드 데이터 (피그마 원본 좌표 그대로) ── // 카드 크기: 200×265 (피그마 Frame77 원본) // lx/ly = 컨테이너 내부 로컬 좌표(px). 절대 위치 환산: x=(881+lx)/1440*100vw, y=(26+ly)/1024*100vh // bg = 각 카드 hover 시 섹션 배경으로 전환될 이미지 경로 const APP_CARDS = [ { id: "retirement", name: "퇴사계산기", desc: "감정말고 숫자로.\n생존력·준비력·시장성을\n3분 만에 진단합니다.", lx: 0, ly: 0, bg: "assets/bg-retirement.jpg" }, { id: "letter", name: "미래로 보내는 편지", desc: "미래의 나에게 편지를 씁니다.\n그 날이 오면 도착하도록.", lx: 0, ly: 353, bg: "assets/bg-letter.jpg" }, { id: "fit", name: "핏트레이너", desc: "스쿼트/런지/팔올리기\n기본 동작의 자세를 AI가\n정확히 분석해줍니다.", lx: 0, ly: 706, bg: "assets/bg-fit.png" }, { id: "quotes", name: "JJ의 명언", desc: "AI 코치가 오늘의 당신에게\n건네는 명언 한 문장과 해설.\n아침/저녁마다 도착합니다.", lx: 255, ly: 177, bg: "assets/bg-jj.jpg" }, { id: "cat", name: "교양이 키우기", desc: "교양을 먹고 자라는\n나만의 고양이를 키웁니다.", lx: 255, ly: 530, bg: "assets/bg-cat.png" }, ]; // 기본 배경 — 아무 카드도 hover 안 된 상태 const SEC3_DEFAULT_BG = "assets/sec3-desert.jpg"; // 프리로드 목록 const SEC3_ALL_BGS = [SEC3_DEFAULT_BG, ...APP_CARDS.map(c => c.bg)]; // px → vw (1440 기준) / px → section-relative vh (1024 기준) const toVW = (px) => `${(px / 1440) * 100}vw`; const toVH = (py) => `${(py / 1024) * 100}vh`; // ── 뷰포트 추적 (모바일 분기) ── function useViewport() { const [vp, setVp] = useState({ w: window.innerWidth, h: window.innerHeight }); useEffect(() => { const onResize = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); return vp; } // prefers-reduced-motion 훅 function useReducedMotion() { const [reduced, setReduced] = useState( () => window.matchMedia("(prefers-reduced-motion: reduce)").matches ); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const fn = (e) => setReduced(e.matches); mq.addEventListener("change", fn); return () => mq.removeEventListener("change", fn); }, []); return reduced; } // ════════════════════════════════════════════════════════════ // 히어로 — 앱 카드 / 중앙 콘텐츠 / 무대 // ════════════════════════════════════════════════════════════ function HeroAppCard({ app }) { const origin = app.side === "left" ? "right center" : "left center"; return (
); } function HeroCenter() { return (

Tilos

{HERO_COPY.map((line, i) => ( {line} ))}

); } function HeroDesktop({ scale }) { return (
{HERO_APPS.map((app) => )}
); } function HeroMobile() { return (

Tilos

{HERO_COPY.join(" ")}

); } function HeroSection({ isMobile, scale }) { return (
{!isMobile && ( <> Why Apps )} 오늘의 처방
{isMobile ? : }
); } // ════════════════════════════════════════════════════════════ // 섹션 2 — Why Tilos // ════════════════════════════════════════════════════════════ function Pill({ label, color, className }) { return ( {label} ); } function WhyTilosSection({ isMobile }) { return (
{/* 가독성 오버레이 — 가운데로 갈수록 살짝 더 어둡게 */}

{WHY_LINES.map((line, i) => ( {line} ))}

{WHY_HEADLINE}

); } // ════════════════════════════════════════════════════════════ // 섹션 3 — Our Apps (크로스페이드 bg + 카드 hover) // ════════════════════════════════════════════════════════════ function AppInfoCard({ card, idx, isActive, anyActive, onActivate, onDeactivate, onTap, mobile, reducedMotion }) { const CARD_W_PX = 200; const CARD_H_PX = 265; const dur = reducedMotion ? "0s" : ".25s"; const dimmed = anyActive && !isActive; const inner = (

{card.name}

{card.desc}

); if (mobile) { return
onTap(idx)} style={{ width: "100%" }}>{inner}
; } return (
onActivate(idx)} onMouseLeave={() => onDeactivate()} style={{ position: "absolute", left: toVW(881 + card.lx), top: toVH(26 + card.ly), zIndex: Math.round(1000 - card.ly) }}> {inner}
); } function OurAppsSection({ isMobile }) { const apps = [ { name:"퇴사계산기", bg:"assets/bg-retirement.jpg" }, { name:"JJ의 명언", bg:"assets/bg-jj.jpg" }, { name:"미래로 보내는 편지", bg:"assets/bg-letter.jpg" }, { name:"교양이 키우기", bg:"assets/bg-cat.png" }, { name:"핏트레이너", bg:"assets/bg-fit.png" }, ]; // 카드 텍스트와 앱 순서는 유지하고, 데스크톱은 긴 스크롤 트랙에 맞춰 크기·간격만 조정 const CARDS = [ { id:"retirement", name:"퇴사계산기", desc:"감정말고 숫자로.\n생존력·준비력·시장성을\n3분 만에 진단합니다.", col:"left", bg:apps[0].bg }, { id:"quotes", name:"JJ의 명언", desc:"AI 코치가 오늘의 당신에게\n건네는 명언 한 문장과 해설.\n아침/저녁마다 도착합니다.", col:"right", bg:apps[1].bg }, { id:"letter", name:"미래로 보내는 편지", desc:"미래의 나에게 편지를 씁니다.\n그 날이 오면 도착하도록.", col:"left", bg:apps[2].bg }, { id:"cat", name:"교양이 키우기", desc:"교양을 먹고 자라는\n나만의 고양이를 키웁니다.", col:"right", bg:apps[3].bg }, { id:"fit", name:"핏트레이너", desc:"스쿼트/런지/팔올리기\n기본 동작의 자세를 AI가\n정확히 분석해줍니다.", col:"left", bg:apps[4].bg }, ]; const desktopCardWidth = "clamp(220px,18.75vw,300px)"; const desktopCardHeight = "clamp(292px,24.844vw,398px)"; const desktopCardStep = "clamp(205px,15.625vw,250px)"; const desktopCardTops = [ "30vh", `calc(30vh + ${desktopCardStep})`, `calc(30vh + ${desktopCardStep} + ${desktopCardStep})`, `calc(30vh + ${desktopCardStep} + ${desktopCardStep} + ${desktopCardStep})`, `calc(30vh + ${desktopCardStep} + ${desktopCardStep} + ${desktopCardStep} + ${desktopCardStep})`, ]; const desktopLeftCol = "54.5vw"; const desktopRightCol = `calc(${desktopLeftCol} + ${desktopCardWidth} + 64px)`; const [scrollIdx, setScrollIdx] = useState(0); const [hoverIdx, setHoverIdx] = useState(null); const reducedMotion = useReducedMotion(); const xfade = reducedMotion ? "0s" : "0.6s"; const cardRefs = useRef([]); const centerHitsRef = useRef(new Set()); const activeIdx = hoverIdx !== null ? hoverIdx : scrollIdx; // 이미지 프리로드 useEffect(() => { CARDS.forEach(c => { const img = new Image(); img.src = c.bg; }); }, []); // IntersectionObserver — 중앙 band에 들어온 카드 중 화면 중앙에 가장 가까운 카드 → scrollIdx useEffect(() => { const root = document.getElementById("main-scroll"); const rootRect = () => root ? root.getBoundingClientRect() : { top: 0, bottom: window.innerHeight, height: window.innerHeight }; let rafId = 0; const pickClosestCard = () => { const viewport = rootRect(); const centerY = viewport.top + viewport.height / 2; const centerHits = centerHitsRef.current; let closestIdx = 0; let closestDistance = Infinity; let hasCandidate = false; cardRefs.current.forEach((el, i) => { if (!el) return; const rect = el.getBoundingClientRect(); const isVisible = rect.bottom >= viewport.top && rect.top <= viewport.bottom; const isCenterHit = centerHits.size === 0 || centerHits.has(i); if (!isVisible || !isCenterHit) return; const cardCenterY = rect.top + rect.height / 2; const distance = Math.abs(cardCenterY - centerY); if (distance < closestDistance) { closestDistance = distance; closestIdx = i; hasCandidate = true; } }); if (hasCandidate) setScrollIdx(closestIdx); }; const schedulePick = () => { cancelAnimationFrame(rafId); rafId = requestAnimationFrame(pickClosestCard); }; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const idx = Number(entry.target.dataset.appIndex); if (Number.isNaN(idx)) return; if (entry.isIntersecting) centerHitsRef.current.add(idx); else centerHitsRef.current.delete(idx); }); schedulePick(); }, { root, rootMargin: "-45% 0px -45% 0px", threshold: 0 } ); cardRefs.current.forEach((el) => el && observer.observe(el)); const scrollTarget = root || window; scrollTarget.addEventListener("scroll", schedulePick, { passive: true }); window.addEventListener("resize", schedulePick); schedulePick(); return () => { cancelAnimationFrame(rafId); observer.disconnect(); scrollTarget.removeEventListener("scroll", schedulePick); window.removeEventListener("resize", schedulePick); }; }, []); // 크로스페이드 배경 레이어 (인라인 JSX, remount 방지) const bgLayersJSX = (
{CARDS.map((card, i) => (
))}
); if (isMobile) { return (
{bgLayersJSX}
Our Apps

당신의 오늘에 필요한 5가지 앱

{CARDS.map((card, i) => (
{ cardRefs.current[i] = el; }} style={{ width:"100%", aspectRatio:"200/265", borderRadius:30, background:"rgba(255,255,255,0.92)", backdropFilter:"blur(8px)", WebkitBackdropFilter:"blur(8px)", boxShadow:"0 4px 20px rgba(0,0,0,0.15)", display:"flex", flexDirection:"column", justifyContent:"flex-end", padding:"0 17px 29px 16px", boxSizing:"border-box", overflow:"hidden", opacity: activeIdx === i ? 1 : 0.85, transition: reducedMotion ? "none" : "opacity 0.3s ease", }}>

{card.name}

{card.desc}

))}
); } return (
{/* 크로스페이드 배경 */} {bgLayersJSX} {/* 왼쪽 텍스트 — 배경과 함께 고정, 카드만 긴 트랙으로 스크롤 */}
Our Apps

당신의 오늘에 필요한 5가지 앱

{/* 카드 5개 — 비율 유지, GS Energy 사업소개처럼 촘촘한 지그재그 간격으로 배치 */} {CARDS.map((card, i) => { const isFocused = activeIdx === i; return (
{ cardRefs.current[i] = el; }} onMouseEnter={() => setHoverIdx(i)} onMouseLeave={() => setHoverIdx(null)} style={{ position:"absolute", left: card.col === "right" ? desktopRightCol : desktopLeftCol, top:desktopCardTops[i], width: desktopCardWidth, aspectRatio:"200/265", borderRadius:30, background:isFocused ? "rgba(255,255,255,0.82)" : "#fff", backdropFilter:isFocused ? "blur(8px)" : "none", WebkitBackdropFilter:isFocused ? "blur(8px)" : "none", boxShadow: isFocused ? "0 18px 44px rgba(0,0,0,0.3)" : "0 4px 16px rgba(0,0,0,0.12)", display:"flex", flexDirection:"column", justifyContent:"flex-end", padding:"0 clamp(19px,1.7vw,25px) clamp(31px,2.7vw,43px) clamp(18px,1.6vw,24px)", boxSizing:"border-box", overflow:"hidden", maskImage: card.id === "retirement" ? "linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.72) 18%, #000 36%)" : "none", WebkitMaskImage: card.id === "retirement" ? "linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.72) 18%, #000 36%)" : "none", zIndex: 3, opacity: 1, transition: reducedMotion ? "none" : "background-color 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease", cursor:"default", }}>

{card.name}

{card.desc}

); })}
); } // ════════════════════════════════════════════════════════════ // 섹션 4 — CTA // ════════════════════════════════════════════════════════════ function CTASection({ isMobile }) { return (
START WITH TILOS

오늘의 불안에 맞는 처방을 하나 골라보세요.

숫자가 필요한 날도, 문장이 필요한 아침도, 몸을 다시 세워야 하는 순간도 있습니다.

); } // ════════════════════════════════════════════════════════════ // 푸터 // ════════════════════════════════════════════════════════════ function Footer() { return (
Tilos

불안한 하루에 작은 처방을 건네는 앱들.

© 2026 Tilos. All rights reserved. Small remedies for uncertain days.
); } // ════════════════════════════════════════════════════════════ // 루트 // ════════════════════════════════════════════════════════════ function App() { const { w, h } = useViewport(); const isMobile = w <= 768 || h >= w; const scale = Math.max(w / STAGE_W, h / STAGE_H); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();