/* global React */ // Recipeat — Landing page components. Token-sourced from colors_and_type.css const LC = { bg: "#FBF9F7", surf1: "#FFFFFF", surf2: "#F5F3F1", surf3: "#EFEDEC", text: "#1B1C1B", textVar: "#40493D", primary: "#0D631B", primaryDeep: "#0B4E15", primaryFixed: "#A3F69C", onPrimaryContainer: "#CBFFC2", secondary: "#964900", secondaryFixed: "#FFDCC6", tertiaryFixed: "#FFDEAC", peach: "#FFDCC6", mint: "#A3F69C", honey: "#FFDEAC", divider: "#E4E2E0", }; window.LC = LC; // MaterialIcons "verified" — app과 동일한 인증 배지 function VerifiedBadge({ size = 12, color = LC.primary, style }) { return ( ); } window.VerifiedBadge = VerifiedBadge; // ───────────────────────────────────────────────────────────────────────────── // Brand chrome function NavBar({ variant = "light" }) { const onDark = variant === "dark"; const fg = onDark ? "#FBF9F7" : LC.text; const muted = onDark ? "rgba(251,249,247,0.72)" : LC.textVar; return ( ); } function AppMark({ size = 28, color = LC.primary }) { // 앱 아이콘과 동일한 심볼 (client/assets/icons/symbol.svg). // 원본 viewBox 16.7871 × 27.0605 을 32×32 박스 중앙에 배치. return ( ); } function StoreBadge({ store = "app", variant = "dark", disabled = false }) { const isApp = store === "app"; const dark = variant === "dark"; const bg = dark ? "#111" : "#FFFFFF"; const fg = dark ? "#FFFFFF" : "#111"; const subLabel = isApp ? disabled ? "Coming soon to" : "Download on the" : "GET IT ON"; const mainLabel = isApp ? "App Store" : "Google Play"; const onClick = disabled ? (e) => e.preventDefault() : undefined; return (

{isApp ? ( ) : ( )}

)} ); } // ───────────────────────────────────────────────────────────────────────────── // Phone preview — compact fake of the actual mobile app function PhoneFrame({ children, style = {} }) { return (

{/* Dynamic island */}

{/* Status bar */}

9:41

{children} {/* Home indicator */}

); } function PhoneHomePreview() { return (

{/* Brand header */}

Recipeat

{/* Hero copy */}

오늘의 제안

오늘은 뭐 먹지?

{/* Section header */}

지금 바로

만들 수 있어요

· 3개

{/* Featured rail */}

{/* Partial section */}

조금만

사면 돼요

); } function MiniFeatured({ title, creator, bg, overlay, emoji, pct }) { return (

{emoji}

{pct}% 매칭

{title}

{creator}

); } function MiniTrendingRow({ title, creator, missing, pct, bg, emoji }) { return (

{emoji}

{title}

{creator}

+ {missing}

{pct}%

); } function PhoneFridgePreview() { return (

내 재료

내 냉장고

{[ { n: "마늘", e: "🧄", t: "3일 전 추가 · 조미료" }, { n: "대파", e: "🥬", t: "어제 추가 · 채소" }, { n: "계란", e: "🥚", t: "오늘 추가 · 기타" }, { n: "김치", e: "🥬", t: "2일 전 추가 · 채소" }, ].map((x) => ( ))}

); } function MiniStat({ l, v, c }) { return (

{l}

{v}

); } function MiniFridgeRow({ n, e, t }) { return (

{e}

{n}

{t}

); } function PhoneRecipePreview() { return (

🍳

100% 매칭 · 모든 재료 있음

김치볶음밥

Recipeat · 15분 · 1인분

재료

{["🥬 김치", "🍚 밥", "🥚 계란", "🧄 마늘", "🧂 참기름"].map( (x) => (

{x}

), )}

만드는 법

{[ "달군 팬에 참기름을 두르고 다진 마늘을 볶아요.", "김치를 넣고 2분간 볶다가 밥을 넣어 섞어요.", ].map((s, i) => (

{i + 1}

{s}

))}

); } Object.assign(window, { NavBar, AppMark, StoreBadge, PhoneFrame, PhoneHomePreview, PhoneFridgePreview, PhoneRecipePreview, });